ImageView rejecting rounded corners and borders of parent

问题

I have a View with multiple children I would like to give the entire group rounded corners like this:

I am attempting do do this by giving both the parent LinearLayout and its ImageView Rounded corners via their backgrounds

LinearLayout and children:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/tile_background"
            android:elevation="1dp"
            android:orientation="vertical">


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/image_frame_sponsorship"
                android:coverTileUrl="@{sponsorship.coverTileUri}">

            </ImageView>


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:gravity="center_vertical"
                android:paddingLeft="20dp">

                <TextView
                    android:id="@+id/postActionText"
                    style="@style/ActionFont"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    tools:text="@string/watch_respond">

                </TextView>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/ic_chevron_right_black_36dp">

                </ImageView>


            </RelativeLayout>


        </LinearLayout>

LinearLayout background:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#D2DADC" />
    <corners android:radius="10dp" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />
</shape>

ImageView background:

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp"/>
            <solid android:color="@android:color/white" />

            <stroke
                android:width="1dp"
                android:color="@color/white" />
        </shape>

The LinearLayout takes on a the rounded corners, but the top two corners of the imageView do not, overflowing the corners and apparently the borders of its parent:

How do I make the ImageView behave?

回答1:

Make all the corners of imageview rounded. Bottom of that will be hide back of linearlayout.

回答2:

You can use this shape created by this code :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:radius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />

<solid android:color="#FFFF" />

<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

<size
    android:height="60dp"
    android:width="270dp" />

 </shape>

回答3:

I ended up just giving the ImageView four rounded corners and the white linear layout in the bottom of the view a negative top margin to cover the bottom two as a work around.

来源：https://stackoverflow.com/questions/60941554/imageview-rejecting-rounded-corners-and-borders-of-parent

标签

android

xml

android-layout