Adding a color background and border radius to a Layout

Issue

I want to create a layout with rounded corners and a filled color background.

This is my layout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="210dp"
    android:orientation="vertical"
    android:layout_marginBottom="10dp"        
    android:background="@drawable/offerItemLayout">
    <LinearLayout
        android:id="@+id/offerImageHolder"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
            .
            .
            .
    </LinearLayout>
</LinearLayout>

I have the following drawable xml (offerItemLayout) that creates the borders correctly:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="rectangle">
            <corners
                android:radius="5dp"/>
            <stroke
                android:width="1dp"
                android:color="@color/bggrey" />            
        </shape>
    </item>
    // The lines below causes an inflation failure.
    <item>
        <fill
            android:color="@color/white"/>
    </item>
</layer-list>

But inserting the item with a fill causes the inflation of the layout to fail.

Additionally, if I assign a color background to my inner LinearLayout (offerImageHolder), it overrides the first background with my rounded corners.

Any thoughts on doing this properly? :/

Solution

You don't need the separate fill item. In fact, it's invalid. You just have to add a solid block to the shape. The subsequent stroke draws on top of the solid:

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">

    <corners android:radius="5dp" />
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1dip"
        android:color="@color/bggrey" />
</shape>

You also don't need the layer-list if you only have one shape.

Answered By - Jeffrey Blattman