Adding a Color Background and Border Radius to a Layout

Question

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? :/

Accepted Answer

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.

Answer 2

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

Answer 3

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

Adding a Color Background and Border Radius to a Layout

3 Answers

Must Read

Your Answer

Maya Lin-Takahashi

Adding a Color Background and Border Radius to a Layout

3 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Maya Lin-Takahashi