CODEWITHSUNDEEP
androidandroid-drawable
kavie
kavie

Reputation: 2244

Drawable with a four-color border With Circular Shape

Is it possible to achieve the following as a drawable (for a background) using a Layer-List ???

enter image description here

Upvotes: 2

Views: 1093

Answers (2)

Stanley Ko
Stanley Ko

Reputation: 3497

Yeah sure. Why not?

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:right="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#55FF55"/>
            <size
                android:width="5dp"
                android:height="5dp"/>
            <corners
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp"/>
        </shape>
    </item>

    <item android:left="5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FFFF00"/>
            <size
                android:width="5dp"
                android:height="5dp"/>
            <corners
                android:bottomRightRadius="5dp"
                android:topRightRadius="5dp"/>
        </shape>
    </item>

    <item android:top="5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#555555"/>
            <size
                android:width="5dp"
                android:height="5dp"/>
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"/>
        </shape>
    </item>

    <item
        android:right="5dp"
        android:top="5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FF0000"/>
            <size
                android:width="5dp"
                android:height="5dp"/>
            <corners
                android:bottomLeftRadius="5dp"/>
        </shape>
    </item>

    <!-- Look out! -->
    <item>
        <shape android:shape="oval">
            <size
                android:width="10dp"
                android:height="10dp"/>

            <stroke
                android:width="1dp"
                android:color="#000000"/>
        </shape>
    </item>

    <!-- You might wanna uncomment this ! -->
    <!--<item-->
        <!--android:gravity="center">-->
        <!--<shape android:shape="oval">-->
            <!--<size-->›
                <!--android:width="8dp"-->
                <!--android:height="8dp"/>-->

            <!--<solid android:color="#000000"/>-->
        <!--</shape>-->
    <!--</item>-->

</layer-list>

Upvotes: 0

rafsanahmad007
rafsanahmad007

Reputation: 23881

For layer List use:

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size
                android:width="56dp"
                android:height="56dp" />

            <stroke
                android:width="10dp"
                android:dashGap="20dp"
                android:color="#0000ff" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <size
                android:width="25dp"
                android:height="24dp" />

            <stroke
                android:width="10dp"
                android:color="#FF0000"
                android:dashGap="20dp"
                android:dashWidth="10dp" />
        </shape>
    </item>

</layer-list>

Output:

enter image description here

Change your dash gap and stroke width accordingly..

Upvotes: 2

Related Questions