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

android:progressDrawable=”@drawable/progress_seekbar”

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

<SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10"
        android:progressDrawable="@drawable/progress_seekbar"
        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="http://schemas.android.com/apk/res/android" >

        <item
            android:id="@+android:id/SecondaryProgress"
            android:drawable="@drawable/progress_cyan"/>

        <item
            android:id="@+android:id/progress"
            android:drawable="@drawable/progress_red"/>
    </layer-list>

progress_cyan.png in the drawable folder

progress cyan

progress cyan

 

 

 

progress_red.png in the drawable folder

progress red

progress red

 

 


humbler_small.png
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
				.findDrawableByLayerId(R.id.progressshape);
		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="http://schemas.android.com/apk/res/android" >

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

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

                <gradient
                    android:angle="270"
                    android:endColor="#00ff00"
                    android:startColor="#00ff00" />
            </shape>
        </clip>
    </item>

</layer-list>

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

Advertisements

One thought on “SeekBar Customization for Android Development

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s