Gradient dividers in Android

Many of Android’s screens use attractive dividers with gradients that fade from black to white to black.  Here’s how to create one of your own.

1. Create a file called “black_white_gradient.xml” in /res/drawable. Paste this into it.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="#00000000"
      android:centerColor="#FFFFFFFF"
      android:endColor="#00000000"
      android:angle="0" />
</shape>

2. Create a view in the target layout and apply the gradient as the background.  The “black_white_gradient” in “@drawable/black_white_gradient” refers to the file name of the shape above.

<View android:id="@+id/divider"
    android:background="@drawable/black_white_gradient"
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_below="@id/someOtherThing" />
Posted in Android by Connor Garvey at January 18th, 2009.
Tags: , , ,

19 Responses to “Gradient dividers in Android”

  1. Love android says:

    Its awesome, thanks for sharing.. it works very good in my emulator and phone.. really helpful.. thanks lot

  2. Love android says:

    Thanks for sharing, awesome.. :)

  3. Sid says:

    i liked it very much

  4. itzco says:

    Great info thanks!

    An extra note, I tried to use as a divider for a listview but doesn’t show up well (it mirrors)
    To use for a listview just change the drawable’s gradient section to:

    (Removing centerColor)

  5. PV says:

    we cant add into an widget, so facing problem. My widget is having three , so I want to add an divider after 1st & 2nd button. pls help me

    • PV says:

      Ignore first….
      we cant add a View into an widget, so facing problem. My widget is having three image buttons , so I want to add an divider after 1st & 2nd button. pls help me

  6. Anonymous says:

    how can u make a xml file in a drwable its funny !! ?

  7. sWozzie says:

    Awesome!

  8. punzz says:

    Thx for the info, really help me out

  9. C says:

    Thanks man, simple, quick, and it works :)

  10. Kevin says:

    Will this also work for a LinearLayout?

  11. Stephan Wiesner says:

    Cool. Simple and easy – and nice :-)

    Stephan

  12. Ross says:

    this is cool ! instead of adding it to a regular View, add the background and layout_height attributes to a regular text view, change the angle on the gradient to 90 and you can fade vertical with text behind it – and for added style, add the gravity attribute (android:gravity=”center_vertical|center_horizontal”) to center the text.

  13. Matt Langston says:

    In your UI layout XML.

    In your drawable folder. Name is list_divider.xml.

  14. Binary Sheep says:

    You can also just add it to a ListView as a divider

  15. jetti says:

    Hi, i want the more information on the above given example.If anyone know please respond.
    Thanx in advance

  16. Michael says:

    Fantastic. Exactly what I’ve been looking for, I was about to create an image by hand. Thanks.

  17. MrSqueezles says:

    layout_below puts the divider below some other component. someOtherThing is the ID of whatever component underneath which the divider will appear. You’ll probably want to insert a little space between the two components.

  18. Sikus says:

    Hello, what is “someOtherThing” in layout_below?

Leave a Reply