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 :

enter image description here

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 :

enter image description here

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 :

enter image description here

Hope Help You.

Share:
17,678
pixel
Author by

pixel

Updated on June 04, 2022

Comments

  • pixel
    pixel almost 2 years

    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:

    enter image description here

    1. Red gradient on the left
    2. 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>