ANDROID GRADIENT DRAWABLE TUTORIAL

By: Unknown 0 comments

Gradient Drawable In Android

In android, we can create Gradient drawable and use them as background resource for TextViews, Buttons, ListView etc. Gradient helps to make the the GUI better and stylish.

Gradient Drawable Example

In this example I have created 3 gradient drawables.
Gradient Drawable are stored in drawable folder inside "res" folder of your app.

If "drawable" folder is not in "res" folder, create a "drawable" folder inside "res" folder and put all the gradient drawable xml files in it.

1st Gradient Drawable

Darker to Lighter shade

gradient_drawable1.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="#4C4C43"
                android:endColor="#B8B894"
                android:angle="270" />
        </shape>
    </item>
</selector>

2nd Gradient Drawable

 Lighter to Darker shade

gradient_drawable2.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="#B8B894"
                android:endColor="#4C4C43"
                android:angle="270" />
        </shape>
    </item>
</selector>

3rd Gradient Drawable

 Darker at Boundaries  and Lighter in center 

gradient_drawable3.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="#4C4C43"
                android:centerColor="#B8B894"
                android:endColor="#4C4C43"
                android:angle="270" />
        </shape>
    </item>
</selector>


In below layout I have used these gradient drawable as background resource of Button.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:layout_marginTop="150dp"
        android:id="@+id/button1"
        android:textSize="24dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient_drawable1" <!-- set as background resource -->
        android:text="Button With Gradient Drawable 1" />
  
     <Button
        android:layout_marginTop="20dp"
        android:id="@+id/button1"
        android:textSize="24dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient_drawable2" <!-- set as background resource -->
        android:text="Button With Gradient Drawable 2" />
   
      <Button
        android:layout_marginTop="20dp"
        android:id="@+id/button1"
        android:textSize="24dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient_drawable3" <!-- set as background resource -->
        android:text="Button With Gradient Drawable 3" />
  
  
</LinearLayout>