Android SeekBar Example

In this article, I will show you an example of Android’s SeekBar. It extends ProgressBar and adds a draggable thumb to it.

User can touch the thumb and drag left or right or use the arrow keys.

As you drag the progress value changes from 0 and can reach the maximum value as the bar reaches the right end.

The maximum value can be set either in the XML or programatically.

SeekBar

Main Layout

In our layout, we have a SeekBar, user will drag it to set the percentage value. The android:max attribute is set to 100. We also have a text field that will shows the percentage set.

welcome.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.javarticles.android.DatePickerExample" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="18dp"
        android:text="@string/welcome"
        android:textColor="@color/welcome_text_color"
        android:textSize="20sp" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/percent" />

        <TextView
            android:id="@+id/percent_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/percent_value" />
    </LinearLayout>

</LinearLayout>

Main Activity

Our main activity is very simple, we will first set the content view. Next, we will get the SeekBar widget and the percentage text field.
We set the current seek bar’s progress to the text field. We also want the progress to be updated continuously as the seek bar is dragged (left or right).
To do this, we need to implement OnSeekBarChangeListener listener. Create an anonymous OnSeekBarChangeListener object and set it to the seek bar using seekBar.setOnSeekBarChangeListener. The listener has three callback methods:

1. onStartTrackingTouch – Gets called as the user starts dragging
2. onProgressChanged – This is called as the progress changes
3. onStopTrackingTouch – This is called when the dragging stops

In onProgressChanged and onStopTrackingTouch, we will update the percentage value. In onStartTrackingTouch and onStopTrackingTouch, we will also show a Toast message just to indicate the events.

SeekBarExampleActivity:

package com.javarticles.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;

public class SeekBarExampleActivity extends Activity {
	private SeekBar seekBar;
	private TextView percentValue;
	public void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);	
		setContentView(R.layout.welcome);
		seekBar = (SeekBar)findViewById(R.id.seekBar);
		percentValue = (TextView) findViewById(R.id.percent_value);
		updatePercentValue(seekBar.getProgress());
		seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			
			@Override
			public void onStopTrackingTouch(SeekBar seekBar) {
				updatePercentValue(seekBar.getProgress());
				Toast.makeText(SeekBarExampleActivity.this, "stopped", Toast.LENGTH_SHORT).show();				
			}
			
			@Override
			public void onStartTrackingTouch(SeekBar seekBar) {
				Toast.makeText(SeekBarExampleActivity.this, "started...", Toast.LENGTH_SHORT).show();				
			}
			
			@Override
			public void onProgressChanged(SeekBar seekBar, int progress,
					boolean fromUser) {
				updatePercentValue(seekBar.getProgress());
			}
		});
		
	}
	
	private void updatePercentValue(int progressValue) {
		percentValue.setText(progressValue + "%");
	}
}

Run the application

The main screen.

Start Dragging.

Stop Dragging.

Download the source code

This was an example Android SeekBar. You can download the source code here: seekBarExample.zip