Tariq Tariq - 1 month ago 20
Android Question

How to create border around whole layer-list?

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 Source

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>