SeekBar Customization for Android Development

If you want some customization in the seekbar which you use while developing android apps, there are several ways of doing this. You can customize seek bar with the help of the xml or you can make it impressive even programmatically.

Let’s have a look if you want to change its appearance with the help of xml

First of all the progress Drawable attribute of the seekbar should be set as the xml file in the drawables folder as


The overall seek bar implementation in the layout xml should look something like this

        android:thumb="@drawable/thumbler_small" />

and the progress_seekbar.xml file should contain a layer list with the two layers 

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

    <layer-list xmlns:android="" >



progress_cyan.png in the drawable folder

progress cyan

progress cyan




progress_red.png in the drawable folder

progress red

progress red



in the drawable folder

this image is for the thumb of the seekbar which is defined in the layout xml file in the android:thumb attribute of the seekbar as android:thumb=”@drawable/thumbler_small”

and if you want multiple colors of the seekbar which should keep on changing as per the progress of the seek bar then in that case a listener has to be set on the seek bar in the activity class and a different kind of layer-list would be used and the color would be changed dynamically by changing the value of RGB colors according to the progress of the seekbar.


humbler small

humbler small




multiple colors seekbar

multiple colors seekbar

Code snippet from the activity class:


mSeekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			int progressChanged = 0;

			public void onProgressChanged(SeekBar seekBar, int progress,
					boolean fromUser) {
				progressChanged = progress;
				if (progress <= 50) {
					setProgressBarColor(mSeekBar, Color.rgb(
							255 - (255 / 100 * (100 - progress * 2)),
												255, 0));

				} else {
					setProgressBarColor(mSeekBar, Color.rgb(255,
							255 - (255 / 100 * (progress - 50) * 2), 0));


and the setProgressBarColor method is:

	 * this method is used to change the color of the seek bar
	 * @param seakBar
	 *            the seekbar whose color has to be changed
	 * @param newColor
	 *            the color which has to be changed
	public void setProgressBarColor(SeekBar seakBar, int newColor) {
		LayerDrawable ld = (LayerDrawable) seakBar.getProgressDrawable();
		ClipDrawable d1 = (ClipDrawable) ld
		d1.setColorFilter(newColor, PorterDuff.Mode.SRC_IN);


the xml prgress_seekbar.xml would look something like this, this is just for showing making up of the changes in the look of the seekbar making it a little thicker and different from the default one:


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="" >

    <item android:id="@android:id/background">
        <shape android:shape="rectangle" >
            <corners android:radius="5dp" />

                android:startColor="@color/white" />
    <item android:id="@+id/progressshape">
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />

                    android:startColor="#00ff00" />


And it would be set as android:progressDrawable=”@drawable/progress_seekbar”. Attribute in the layout xml of the seekbar. Some of the screenshots showing the effect.

android progress bar

android progress bar2

android progress bar3


Thank you for reading 🙂

Written By: Trayambak Mishra, Software Developer, Mindfire Solutions

One thought on “SeekBar Customization for Android Development

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s