Gradient dividers in Android
Sunday, January 18th, 2009 - 6:51 pm - 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" />
slt,
dans mon code tout les ‘R’ sont en rouge je sais pas comment les corriger ;svp comment je peux les corriger?? cemmecet ‘R’ svp
inflater.inflate(R.menu.mainmenu, menu);
I don’t believe this has changed since Android 1. According to this doc, you should have an R.
Its awesome, thanks for sharing.. it works very good in my emulator and phone.. really helpful.. thanks lot
Thanks for sharing, awesome.. 🙂
i liked it very much
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)
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
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
how can u make a xml file in a drwable its funny !! ?
Awesome!
Thx for the info, really help me out
Thanks man, simple, quick, and it works 🙂
Will this also work for a LinearLayout?
Cool. Simple and easy – and nice 🙂
Stephan
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.
In your UI layout XML.
In your drawable folder. Name is list_divider.xml.
You can also just add it to a ListView as a divider
Hi, i want the more information on the above given example.If anyone know please respond.
Thanx in advance
Fantastic. Exactly what I’ve been looking for, I was about to create an image by hand. Thanks.
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.
Hello, what is “someOtherThing” in layout_below?