How to Draw a Gradient Line in Android

Drawing gradient is not a difficult task in Android. You can draw the gradient either through java code or through XML resource file. As it is always nice to keep the user interface stuff in the xml file, I am going to explain drawing gradient through XML layout.

To understand things better lets explain through steps.

Step 1: Create a new Android project in your work space.
Refer: How to Create and Run Your First Android Project

Step 2: Create a new XML file under resource folder for gradient line

Create a new XML file with name gradient_line.xml inside R\drawable folder, which contains gradient tag inside a parent shape tag as shown below.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

  <gradient

      android:startColor="#124c75"

      android:centerColor="#FFFFFFFF"

      android:endColor="#124c75"

      android:angle="0" />

</shape>

Here we can give 3 colors for our gradient line the starting color, end color and the center color. Please note, the color is more advisable to specify in the strings.xml and refer in the gradient_line.xml file. 

Step 3: Create an image view in your main.xml file and set the source as gradient_line.xml

Once you have created your gradient_line.xml, its time for you to edit your main.xml layout file. Drag an image view into your parent layout in the main.xml file and set the source as gradient_line.xml as shown below.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation = "vertical"

  >



    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="match_parent"

        android:layout_height="2dp"

        android:layout_marginTop="38dp"

        android:src="@drawable/gradient_line" />



</LinearLayout>
 

Thats all ! Congrats you are done with gradient line in Android. You can give different values to layout_height of your ImageView and you will be getting a result like below.

Cheers,
Have a nice day. View Complete List of Tips