An Android slider (or a SeekBar as it’s called in the Android world) is a pretty slick UI tool which we recently used in our Call Your Folks! app as a means of choosing a reminder frequency between one day and three months.
I’ll walk you through creating a custom-styled seekbar for your Android application using nothing but a few XML and image drawables.
In this tutorial, I assume that you know how to implement a SeekBar in your app; if you don’t, check out the Android API demos, specifically SeekBar1.java and seekbar_1.xml.
Step 1: Create Your Image Drawables (9-Patch)
Before creating any XML drawables, make sure you create the image drawables (including one 9-patch drawable) needed for the seekbar background, handle, and progress sections. The 9-patch drawables will be put to use by the XML drawables in the steps below.
Create the following drawables and place them in your /res/drawable/ folder:
Step 2: SeekBar Progress Drawable
Now create an XML drawable for the Android seekbar progress (the blue-striped section in the example), call it seekbar_progress_bg.xml, and place it in your /res/drawable/ folder:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 |
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <clip> <shape> <gradient android:startColor="#FF5e8ea3" android:centerColor="#FF32a0d2" android:centerY="0.1" android:endColor="#FF13729e" android:angle="270" /> </shape> </clip> </item> <item> <clip> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/stripe_bg" android:tileMode="repeat" android:antialias="true" android:dither="false" android:filter="false" android:gravity="left" /> </clip> </item> </layer-list> |
The above XML first draws a semi-transparent, blue gradient, then layers the semi-transparent stripe image on top of the gradient. The highlighted line of code (line 20) refers to the stripe (semi-transparent) image inside your drawable folder, created in Step 1.
For more information on creating custom shapes via XML, check out the Android drawable resources docs, specifically the bitmap and shape sections.
Step 3: SeekBar Background Drawable
Next create the main seekbar progress drawable; it’ll assign a drawable to the seekbar progress and secondaryProgress actions inside your seekbar. Name your drawable something like seekbar_progress.xml, place it inside your /res/drawable/ folder:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 |
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/seekbar_background" android:dither="true" /> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <gradient android:startColor="#80028ac8" android:centerColor="#80127fb1" android:centerY="0.75" android:endColor="#a004638f" android:angle="270" /> </shape> </clip> </item> <item android:id="@android:id/progress" android:drawable="@drawable/seekbar_progress_bg" /> </layer-list> |
The first bit of highlighted code above (line 8) is referring to the seekbar background image (9-patch drawable) created in Step 1 and (line 29) is referring to the drawable you created above in Step 2.
Step 4: Bringing it all together…
At this point, all you need to do is call your seekbar_progress drawable when declaring your seekbar:
|
01
02
03
04
05
06
07
08
09
10 |
<SeekBar android:id="@+id/frequency_slider" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="20" android:progress="0" android:secondaryProgress="0" android:progressDrawable="@drawable/seekbar_progress" android:thumb="@drawable/seek_thumb"/> |
The two lines of highlighted code are setting the progress and thumb drawables for the SeekBar item. The @drawable/seekbar_progress refers to the XML drawable created in the previous step.
See it in action!
For a “live demo” of the seekbar bar being used, download our Call Your Folks! app.
For more information on the Android SeekBar, check out the Android docs.