Android shape within a shape

Ben picture Ben · Jun 21, 2010 · Viewed 18.5k times · Source

I want to have a shape element with a two color border outline. I can do a single color outline using the solid element, but this only allows me to draw a single line. I tried using two stroke elements within my shape, but that didn't work either.

Is there a way to either draw a shape within a shape or draw two lines around my shape (which has rounded corners, BTW).

Answer

Ben picture Ben · Jun 23, 2010

I found that the <layer-list> is the best approach. Like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="6dp"
        android:right="6dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <stroke
                android:width="3dp"
                android:color="#000000" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="8dp"
        android:right="8dp"
        android:top="1dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners
                android:bottomLeftRadius="2dp"
                android:bottomRightRadius="2dp"
                android:topLeftRadius="2dp"
                android:topRightRadius="2dp" />
            <solid android:color="@android:color/white" />

            <stroke
                android:width="1dp"
                android:color="#BDBDBD" />
        </shape>
    </item>
</layer-list>

You then need to put the proper margins on your listView row layout, but it works quite nicely.