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=""> <item> <shape xmlns: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? :/

3 Answers

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="" 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=""> <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"> 

You can use a binding adapter like this :

@BindingAdapter("borderRadius") fun setBorderRadiusAdapter(view: View, radius: Float) { val shape = GradientDrawable() shape.cornerRadius = radius shape.color = view.backgroundTintList ?: ColorStateList.valueOf(getColor(view.context, R.color.primary)) view.background = shape } 

And on yout view component :

android:backgroundTint="@android:color/white" app:borderRadius="@{8f}" 

Warning : wrap your template with <layout></layout> for compile @{8f} border radius value