W would like to have a drawable
which has background and gradient on the left that is about 10dp
wide.
Image of what I would like to achieve:
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With