CODEWITHSUNDEEP
android
beewall
beewall

Reputation: 141

Is it possible to have multiple borders on a shape?

I was wondering if it is possible to have multiple borders/"stroke" elements on a shape, or if I need to use an image (or a bunch of shapes covering each other). My code:

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

    <item>        
        <shape>
            <gradient
                android:endColor="@color/editTextBG"
                android:startColor="@color/editTextBG"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="@color/editTextEdgeInner" />
            <stroke
                android:width="1dp"
                android:color="@color/editTextEdgeCenter" />
            <stroke
                android:width="1dp"
                android:color="@color/editTextEdgeOuter" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</selector>

I've tried just using the code, which didn't work, and giving the earlier strokes a bigger width (so that the later, if drawn over, would only color part). However, it seems the last stroke overrides the others?

Upvotes: 1

Views: 1144

Answers (2)

cutiko
cutiko

Reputation: 10517

A workaround for borders is to overlay elements:

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

    <item>
        <color android:color="@color/colorAccent"/>
    </item>

    <item android:top="8dp">
        <color android:color="@color/colorPrimaryDark"/>
    </item>

    <item android:top="16dp">
        <color android:color="@color/colorPrimary"/>
    </item>

    <item android:top="32dp" android:right="8dp">
        <color android:color="@android:color/holo_red_dark"/>
    </item>

</layer-list>

This is the result: multi bordered drawable android

The first element in the layer-list from top to bottom is the background and every other is mounted on top.

Upvotes: 3

zanyarnamdari
zanyarnamdari

Reputation: 1

 <item>
    <shape android:shape="rectangle">

        <corners android:radius="8dp" />

        <solid android:color="@color/colorWhite" />

        <stroke
            android:width="1dp"
            android:color="#979797" />

    </shape>
</item>


<item
    android:bottom="5dp"
    android:left="5dp"
    android:right="5dp"
    android:top="5dp">

    <shape android:shape="rectangle">

        <corners android:radius="4dp" />

        <solid android:color="#ffd400" />



    </shape>

</item>

Upvotes: 0

Related Questions