CODEWITHSUNDEEP
androidxml
Nicholas Muir
Nicholas Muir

Reputation: 3104

Android: XML draw custom rectangle with solid border of one color with fill of another

I am using a custom rectangle as a background:

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

This gives me a nice card like shape, however I would like to have a solid black (or other color line around that). I am assuming what I need to do in my xml is create a black rectangle that is 1 point wider and taller than my current rectangle and then place the smaller white one over the top. I can do this with an extra frame layout in my main XML with framelayout and two different custom rectangles on top of each other nut this seem like it may over engineering the problem. Is there a way to do it in the one custom xml background drawable.

Thanks

Upvotes: 4

Views: 14188

Answers (2)

Janki Gadhiya
Janki Gadhiya

Reputation: 4510

For border you just need to add one line :

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

    //ADD THIS LINE 
    <stroke android:width="1dp" android:color="#000000"/>

</shape>

Upvotes: 8

Arpit Ratan
Arpit Ratan

Reputation: 3026

You have to do something like this :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item >
        <shape>
            <solid android:color="@android:color/transparent"/>
            <stroke
                android:width="3dp"
                android:color="#0093dd" >
            </stroke>
        </shape>
    </item>

</layer-list>

You can change the transparent color in first item to the solid color you wish to achieve what you want to.

Upvotes: 5

Related Questions