Android shape border with gradient
64,612
Solution 1
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>
Solution 2
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>
Solution 3
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>
Solution 4
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>
Solution 5
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>
Related videos on Youtube
Author by
learner
Updated on September 12, 2020Comments
-
learner over 3 years
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>
-
pskink over 10 years
-
CoolMind over 3 years
-
-
AlikElzin-kilaka about 10 yearsCan you please explain the solid color of the second item?
-
Jesus Dimrix over 9 yearsit is the color of the button it self
-
Anis LOUNIS aka AnixPasBesoin over 8 yearsJesus Dimrix you mean the layout
-
Suman over 7 years@vipul , how to do this stackoverflow.com/questions/40322955/…?
-
AkhilGite over 7 yearshow to do it for black and white color?
-
Oleksandr Nos over 7 yearsThere's no way of adding
ripple
tolayer-list
:( -
Riddhi over 5 yearsthanx it helped me :)
-
Shailesh almost 5 yearsAfter a lot of searches, I got the perfect solution. Thank you so much :)
-
CoolMind over 3 yearsThanks! What for is an empty second
<item>
? What for is the first<stroke>
with transparent color? -
Starwave almost 3 yearsNot perfect, since my EditTexts' fill is supposed to be transparent.
-
Distra almost 3 yearsStarwave 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
-
HAXM about 2 yearsI want to add radius on the corners, how can I define the corner radius?
-
Distra about 2 years@HAXM inside the <shape tag add e.g. <corners android:radius="12dp" /> for a 12 dp corner radius. <shape android:shape="rectangle" > <corners android:radius="12dp" /> </shape> If you need different corner radius for each corner you can use bottomLeftRadius, bottomRightRadius, topLeftRadius and topRightRadius instead of radius.