Android shape border with gradient

Question

I want to create a border for a linearLayout. So I decide to create a shape. I want the border to have a gradient. The following is not doing it. It fills the rectangle and then creates a stroke. I don't want a filled rectangle, just the stroke. And I want to apply the gradient to the stroke.

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

    <gradient
        android:angle="360"
        android:centerColor="#e95a22"
        android:endColor="#ff00b5"
        android:gradientRadius="360"
        android:startColor="#006386"
        android:type="sweep" />

    <stroke
        android:width="2dp"
        android:color="#ff207d94" />

</shape>

See also https://stackoverflow.com/questions/39830790/add-gradient-in-edit-text-border-in-android/39831707, https://stackoverflow.com/questions/37496583/android-create-gradient-border/37498686. — CoolMind, Dec 09 '20 at 12:42

score 58 · Accepted Answer · answered Jan 01 '14 at 16:59

58

try something like this:

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

    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="360"
                android:centerColor="#e95a22"
                android:endColor="#ff00b5"
                android:gradientRadius="360"
                android:startColor="#006386"
                android:type="sweep" />

            <stroke
                android:width="2dp"
                android:color="#ff207d94" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />
        </shape>
    </item>

</layer-list>

answered Jan 01 '14 at 16:59

vipul mittal

17,343
3
41
44

1

Can you please explain the solid color of the second item? – AlikElzin-kilaka Feb 19 '14 at 16:29
it is the color of the button it self – Jesus Dimrix Jan 01 '15 at 11:08
1

Jesus Dimrix you mean the layout – Anis LOUNIS aka AnixPasBesoin Aug 16 '15 at 03:04
@vipul , how to do this http://stackoverflow.com/questions/40322955/android-shape-border-with-gradient-and-middle-transparent? – Suman Oct 30 '16 at 08:55
how to do it for black and white color? – AkhilGite Jan 17 '17 at 14:49
There's no way of adding `ripple` to `layer-list` :( – Oleksandr Nos Jan 26 '17 at 16:06
thanx it helped me :) – Riddhi Shah Aug 08 '18 at 11:58

score 41 · Answer 2 · answered Nov 17 '17 at 09:47

41

since the accepted answer didn't work exactly as i wanted it to work for me, i'll post my solution too, maybe it helps someone else :)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
<!-- create gradient you want to use with the angle you want to use -->
    <shape android:shape="rectangle" >
        <gradient
            android:angle="0"
            android:centerColor="@android:color/holo_blue_bright"
            android:endColor="@android:color/holo_red_light"
            android:startColor="@android:color/holo_green_light" />

    </shape>
</item>
<!-- create the stroke for top, left, bottom and right with the dp you want -->
<item
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp">
    <shape android:shape="rectangle" >
        <!-- fill the inside in the color you want (could also be a gradient again if you want to, just change solid to gradient and enter angle, start, maybe center, and end color) -->
        <solid android:color="#fff" />
    </shape>
</item>

</layer-list>

answered Nov 17 '17 at 09:47

Distra

2,260
2
14
23

1

After a lot of searches, I got the perfect solution. Thank you so much :) – Shailesh Jul 12 '19 at 04:32
Not perfect, since my EditTexts' fill is supposed to be transparent. – Starwave Jul 23 '21 at 05:50
Starwave in the solid rectngle you should be able to use @android:color/transparent this should do the trick. or you just use alpha by setting the collor to e.g. #00FFFFFF – Distra Jul 23 '21 at 07:01
I want to add radius on the corners, how can I define the corner radius? – HAXM Feb 22 '22 at 17:13
@HAXM inside the for a 12 dp corner radius. If you need different corner radius for each corner you can use bottomLeftRadius, bottomRightRadius, topLeftRadius and topRightRadius instead of radius. – Distra Feb 23 '22 at 06:56

score 5 · Answer 3 · edited Nov 16 '17 at 18:42

This will create a layout with top border of 2dp. just set it as a background to your layout

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#4fc949"
                android:centerColor="#0c87c5"
                android:endColor="#b4ec51"
                android:angle="180" />
        </shape>
    </item>
    <item android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/background_color"/>
        </shape>
    </item>
</layer-list>

score 3 · Answer 4 · edited Sep 12 '19 at 06:36

This would be the appropriate solution to what you wanna do. It includes gradient in stroke as well as a gradient in fill colour.

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape >
                <gradient
                    android:startColor="#2196F3"
                    android:endColor="#673AB7"
                    android:angle="270" />
                <stroke
                    android:width="0dp"
                    android:color="@color/transparentColor" />
                <corners
                    android:radius="8dp" />
                <padding
                    android:left="2dp"
                    android:right="2dp"
                    android:top="2dp"
                    android:bottom="2dp" />
            </shape>
        </item>
        <item>
            <shape android:shape="rectangle">

            </shape>
        </item>
        <item android:top="0dp">
            <shape>
                <gradient
                    android:startColor="#FBB100"
                    android:endColor="#FF9900"
                    android:angle="270"/>

                <corners
                    android:radius="8dp" />
            </shape>
        </item>
    </layer-list>

Thanks! What for is an empty second ``? What for is the first `` with transparent color? — CoolMind, Dec 09 '20 at 12:33

score 2 · Answer 5 · answered Dec 16 '18 at 18:30

This extra source should fix your problem

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="360"
                android:centerColor="#e95a22"
                android:endColor="#ff00b5"
                android:gradientRadius="360"
                android:startColor="#006386"
                android:type="sweep" />
            <size android:height="170dp"
                android:width="170dp"/>
        </shape>
    </item>
    <item android:top="2dp" android:bottom="2dp" android:right="2dp" android:left="2dp">
        <shape android:shape="rectangle">
            <size android:width="140dp"
                android:height="140dp"/>
            <solid android:color="@color/colorAccent"/>
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

Android shape border with gradient

5 Answers5

Linked

Related