Android drawable with background and gradient on the left
17,678
Create sidecolor (or any name you want) XML in drawable folder as bellow:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/background" android:bottom="5dp"
android:top="5dp" android:left="5dp" android:right="5dp"/>
<item android:drawable="@drawable/red" android:bottom="5dp" android:top="5dp"
android:left="5dp" android:right="280dp" />
</layer-list>
then create background XML:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/black" />
</shape>
then red XML as shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#B22222" />
</shape>
OUTPUT IMAGE :
ALSO you can create red XML as gradient :
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#B22222" android:centerColor="#FFFFFF"
android:endColor="#B22222" android:angle="0" />
</shape>
OUTPUT IMAGE :
UPDATE:
ALSO you can do it this way to align it to left also control its size as you need ,
first create one XML and called it side color.xml and refer view to it by :
android:background="@drawable/sidecolor"
sidecolor.xml :
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF0000" />
</shape>
</item>
<item android:left="10dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
</layer-list>
OUTPUY IMAGE :
Hope Help You.
Author by
pixel
Updated on June 04, 2022Comments
-
pixel almost 2 years
W would like to have a
drawable
which has background and gradient on the left that is about10dp
wide.Image of what I would like to achieve:
- Red gradient on the left
- Background on the rest
How I can achieve that?
I've tried
layer-list
with two shapes but with no luck.Item background:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/background" /> <item android:drawable="@drawable/gradient" /> </layer-list>
Background drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/black" /> </shape>
Shape drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF" android:angle="90"/> <size android:width="10dp" /> </shape>