Adding a color background and border radius to a Layout
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? :/
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
.
background.xml in drawable folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<stroke
android:width="3dp"
android:color="#0FECFF" />
//specify gradient
<gradient
android:startColor="#ffffffff"
android:endColor="#110000FF"
android:angle="90"/>
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
<corners
android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
android:layout_marginBottom="10dp"
android:background="@drawable/background">