Android Seekbar Example

This tutorial will help you understand android SeekBar. Here in my example, I am customizing the SeekBar with different color and layout.  SeekBar is one of the useful user interface element in android applications. SeekBar is an extension of ProgressBar that allows the selection of integer values using a natural user interface. Basically SeekBar has a thumb that you can slide to choose a value between 0 and some maximum that you set.

We can add a SeekBar widget using element. android:max property is basically used to set a maximum integer value for selection using SeekBar. android:progress property is basically used to set a integer value for SeekBar progress.

activity_seekbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/default_screen_bg"
    android:orientation="vertical" >

    <SeekBar
        android:id="@+id/seek1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:progress="20"
        android:secondaryProgress="20" />

    <LinearLayout
        android:id="@+id/refresh_match_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/background_view_rounded_single"
        android:orientation="vertical"
        android:visibility="visible" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="Volume Control"
            android:textColor="#ffffff"
            android:textSize="20sp" />

        <SeekBar
            android:id="@+id/volume_bar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:progress="0"
            android:max="100"
            android:progressDrawable="@drawable/progressbar"
            android:secondaryProgress="0" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:orientation="horizontal"
            android:visibility="visible"
            android:weightSum="12" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="0"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="20"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="40"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="60"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="80"
                android:textColor="@android:color/white"
                android:textStyle="bold" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center_horizontal"
                android:text="100"
                android:textColor="@android:color/white"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Here in my above layout i have customized my screen using some color and gradients

background_view_rounded_single.xml

<?xml version="1.0" encoding="UTF-8"?>
<inset android:insetLeft="1.0px" android:insetRight="1.0px" android:insetTop="0.0px" android:insetBottom="1.0px"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <selector>
        <item android:state_pressed="true">
            <shape>
                <gradient android:startColor="@color/rounded_container_bg" android:endColor="@color/rounded_container_bg" android:angle="270.0" />
                <corners android:radius="11.0dip" />
            </shape>
        </item>
        <item>
            <shape>
            	<stroke android:width="1.0px" android:color="@color/rounded_container_border" />
                <gradient android:startColor="@color/rounded_container_bg" android:endColor="@color/rounded_container_bg" android:angle="270.0" />
                <corners android:radius="10.0dip" />

            </shape>
        </item>
    </selector>
</inset>

progressbar.xml

<?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/light_gray_header_color"
                android:startColor="@color/light_gray_header_color" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />

                <gradient
                    android:angle="270"
                    android:endColor="#00996a"
                    android:startColor="#00d190" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />

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

</layer-list>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="default_screen_bg">#20324a</color>
    <color name="rounded_container_bg">#80000000</color>
    <color name="rounded_container_border">#3b3f44</color>
    <color name="light_gray_header_color">#646663</color>

</resources>

We are enough with UI design, Now lets move a bit into Java coding. Below is my activity code

public class SeekbarActivity extends Activity {

	private SeekBar volumeControl = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_seekbar);

		volumeControl = (SeekBar) findViewById(R.id.volume_bar);

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

			public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser){
				progressChanged = progress;
			}

			public void onStartTrackingTouch(SeekBar seekBar) {
				// TODO Auto-generated method stub
			}

			public void onStopTrackingTouch(SeekBar seekBar) {
				Toast.makeText(SeekbarActivity.this,"seek bar progress:"+progressChanged, 
						Toast.LENGTH_SHORT).show();
			}
		});

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.seekbar, menu);
		return true;
	}

}

Our activity implements SeekBar.OnSeekBarChangeListener; Basically SeekBar.OnSeekBarChangeListener is a public static interface that is used to listen the SeekBar events. The SeekBar.OnSeekBarChangeListener interface allows us to override the below methods.

onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) – Used to notify that the progress level has changed.
onStartTrackingTouch(SeekBar seekBar) – Used to notify that the user has started a touch gesture.
onStopTrackingTouch(SeekBar seekBar) – Used to notify that the user has finished a touch gesture.

Output of the above code is


Android Seekbar Example

About 

A blogger, bit of a tech freak and a software developer. He is working around smart phone arena with technologies like android, blackberry, PhoneGap and Sencha Touch.

  • googleplus
  • facebook
  • twitter

Share this post:

PinIt
  • ranjithstar256

    hi thanks for useful example :) where can i download the codes?

  • http://javatechig.com/ javatechig

    All the code files are shown in the example above. Pls have a look into them. thanks

  • Vlad Palamarchuk

    thank you GREAT!

  • @danny117

    Thanks for the seekbar and thanks more for all the xml. I lifted the xml dropped it into a fragment and bam I have a really cool seek that overlays my main screen when I activate the fragment.

  • Cpt.Thomas

    Thx man

  • Karim

    Thanks a lot for this example

  • jorsey

    nice example.

Fork me on GitHub