May 8, 2011

Android: Seek Bar with Two Thumb

Seek bar with two thumb control is badly required by some developer, including my self, When I start looking this control I was tired and frustrated.  and finally I have decided to create my own seek bar control with two thumb. I have used my control in one of the my android project. Initially I tried to extend SeekBar control but I am unable to extend it. so finally I decided to extend ImageView control and I got succes.

Here I am publishing my own seek bar control with two thumb.

1. Seek bar Background Image
2. Seek bar Thumb Image.

Let's Create Seek bar with two thumb.

Step 1 : Create Android Project
Step 2 : Copy Background and Thumb image in Drawable folter
Step 3 : Copy "" in your  package ( My Package Name is "com.kpbird")
(You can find class from source code)

private Bitmap thumb = BitmapFactory.decodeResource(getResources(),R.drawable.leftthumb);

Find above line in source,  replace "R.drawable.leftthumb" with your thumb image drawable name.

Step 4: Open your Layout XML file (My Xml file name is "main.xml")
Step 5: Add following link in layout file,

<com.kpbird.SeekBarWithTwoThumb android:id="@+id/myseekbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitXY" android:src="@drawable/bgh" android:layout_marginTop="50dip"/>

Change package name in above line, Set background image in src attribute.

Step 6: Open your Activity Class file.  

package com.kpbird;

import android.os.Bundle;
import android.widget.TextView;

import com.kpbird.SeekBarWithTwoThumb.SeekBarChangeListener;

public class MySeekBar extends Activity implements SeekBarChangeListener{

TextView tv1,tv2;
SeekBarWithTwoThumb swtt;
    public void onCreate(Bundle savedInstanceState) {
        tv1 = (TextView) findViewById(;
        tv2 = (TextView) findViewById(;
        swtt = (SeekBarWithTwoThumb) findViewById(;
public void SeekBarValueChanged(int Thumb1Value, int Thumb2Value) {
tv1.setText("Thumb 1 Value :" +Thumb1Value + " %" );
tv2.setText("Thumb 2 Value :"+Thumb2Value + " %") ;


Here I took three object 1 SeekBarWithTwoThumb 2 TextView. TextView is used to display percentage (%).  Seekbar control has interface to fire event when user move thumb. To take event you need to implement "SeekBarChangeListener". SeekBarChangeListener has one event "SeekBarValueChanged". Write any action that you want to do when user move thumb. For demonstration, I am printing thumb value. 

Step 7: Now execute our application and enjoy

 Download Source Code : Click Here