What's brewing in the mobile world?

Create a Custom-Styled UI Slider (SeekBar) in Android

MokaSocial-Blog-Headers-Slider

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:

<?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:

<?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:

<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.

4 Comments

Have something to say? Feel free, we want to hear from you! Leave a Comment

  1. evelyne says:

    Nice tutorial, thanks!

  2. Gonzalo says:

    This was really helpful. Except that I’m trying to change the background and I’m doing a gradient from one color to another yet on the app it comes out as a vertical gradient. Now of any way to make the gradient horizontal or do I have to use an image for that?

  3. Gonzalo says:

    Nevermind. Its the android:angle attribute. Was at 270 and turned it to 0 to get the gradient to go horizontal.

  4. navneet says:

    thnx its help me alot……

Comments are now closed for this article.