How to create border around whole layer-list?

Question

I'm trying to create a border around the whole layer-list and not on the individual shapes in the layer list. I'm following the code from here: http://gisinc.com/talk/creating-reusable-custom-toggle-button-android-applications/

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="@dimen/settings_toggle_circle_diameter">
        <shape android:shape="oval">
            <solid android:color="@color/black"/>
            <size
                android:height="@dimen/settings_toggle_circle_diameter"
                android:width="@dimen/settings_toggle_circle_diameter" />
        </shape>
    </item>
    <item android:left="@dimen/settings_toggle_circle_radius" android:right="@dimen/settings_toggle_circle_radius">
        <shape android:shape="rectangle">
            <solid android:color="@color/black"/>
            <size
                android:height="@dimen/settings_toggle_circle_diameter"
                android:width="@dimen/settings_toggle_circle_diameter" />
        </shape>
    </item>
    <item android:left="@dimen/settings_toggle_circle_diameter">
        <shape android:shape="oval">
            <solid android:color="@color/black"/>
            <size
                android:height="@dimen/settings_toggle_circle_diameter"
                android:width="@dimen/settings_toggle_circle_diameter" />
        </shape>
    </item>
</layer-list>

Basically I don't want a border around the individual ovals and rectangle but one border around the whole thing. Is there any way to do this?

Answer 1

I would like to suggest a different approach that I find easier...

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="5dp"/>
            <padding android:left="15dp" android:right="15dp" android:top="15dp" android:bottom="15dp"/>
            <solid android:color="@color/primary"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="5dp"/>
            <solid android:color="@color/secondary"/>
        </shape>
    </item>
    <item android:gravity="center">
        <bitmap android:src="@drawable/logo_splash"
            android:gravity="center" />
    </item>
</layer-list>

Answer 2

Three possible options

1. Using stroke attribute of Shape and some adjustment in logic

2. User Inner/Outer(border) shapes

3. Use Nine patch

I modified your code to show border

<?xml version="1.0" encoding="utf-8"?>
<!-- I have assumed 1 dp padding around all the shapes-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- First Draw Left Outer circle(white) -->
    <item  android:right="22dp" android:left="0dp" android:top="0dp" android:bottom="0dp">
        <shape android:shape="oval">
            <solid android:color="@color/white"/>
            <size
                android:height="22dp"
                android:width="22dp" />
        </shape>
    </item>
    <!--  Draw Left Inner circle(black) -->
    <item  android:left="1dp" android:top="1dp" android:bottom="1dp" android:right="23dp">
        <shape android:shape="oval">
            <solid android:color="@color/black"/>
            <size
                android:height="20dp"
                android:width="20dp" />
        </shape>
    </item>
    <!-- Draw Right Outer circle(white) -->
    <item  android:left="22dp" android:right="0dp" android:top="0dp" android:bottom="0dp">
        <shape android:shape="oval">
            <solid android:color="@color/white"/>
            <size
                android:height="22dp"
                android:width="22dp" />
        </shape>
    </item>
    <!-- Draw Right Inner circle(black) -->
    <item android:left="23dp" android:right="1dp" android:top="1dp" android:bottom="1dp">
        <shape android:shape="oval">
            <solid android:color="@color/black"/>
            <size
                android:height="20dp"
                android:width="20dp" />
        </shape>
    </item>
    <!-- Draw Rectangle Center (black) -->
    <item android:left="11dp" android:right="11dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/black"/>
            <size
                android:height="20dp"
                android:width="20dp" />
        </shape>
    </item>
    <!-- Draw Rectangle Top edge(white) -->
    <item android:left="11dp" android:right="11dp" android:bottom="21dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>
    <!-- Draw Rectangle Bottom edge(white) -->
    <item android:left="11dp" android:right="11dp" android:top="21dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>

</layer-list>