Using the SeekBar Control in Android Apps

In this tutorial we will work through the process of using the SeekBar control in an Android app. The SeekBar control allows users to select a numerical amount using a slider control. Using the SeekBar is straightforward, you can add one to an XML layout file and retrieve the user input in your Java Activity classes.

To demonstrate the process of using the SeekBar, we will add one to a Dialog control launched on clicking a user interface item. Here is the end result:

Add the SeekBar to an XML layout in your app as follows:

<SeekBar
android:id="@+id/level_seek"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" />

To include this in a basic layout you could use the following, saved as "level_layout.xml" for use with the below Java code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView android:id="@+id/level_txt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="5dp"
android:textStyle="bold"
android:text="100%"/>
<SeekBar android:id="@+id/level_seek"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" />
<Button android:id="@+id/level_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK"/>
</LinearLayout>

The user selection can be retrieved when they click the button and the TextView can update as they move the slider control, to reflect the current amount selected, which in this tutorial will be a percentage value.

Now in an Android Activity class, you can set the initial value and retrieve the chosen user value. To use it in a Dialog, which is a typical usage of the slider control in many application UIs, add the following to a click listener onClick block in an Activity class for a button or other control you want the SeekBar to appear for:

final Dialog levelDialog = new Dialog(this);
levelDialog.setTitle("Select level:");
levelDialog.setContentView(R.layout.level_layout);

Retrieve references to the TextView and SeekBar items in the layout defined above:

final TextView levelTxt = (TextView)levelDialog.findViewById(R.id.level_txt);
final SeekBar levelSeek = (SeekBar)levelDialog.findViewById(R.id.level_seek);

Set the maximum value for the SeekBar:

levelSeek.setMax(100);
levelSeek.setProgress(100);

We are using 100 as the maximum since the SeekBar is going to set a percentage. Next set up a listener for changes on the SeekBar control:

levelSeek.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
//change to progress
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
levelTxt.setText(Integer.toString(progress)+"%");
}
//methods to implement but not necessary to amend
@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});

You can of course implement the start and stop tracking methods to tailor user interaction with the SeekBar in your app. All we do here is update the TextView with the current level as the user slides the control up or down. Next retrieve a reference to the "OK" button we added to the layout:

Button okBtn = (Button)levelDialog.findViewById(R.id.level_ok);

Set up a click listener for the button:

okBtn.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
//respond to level
int chosenLevel = levelSeek.getProgress();
levelDialog.dismiss();
}
});

In this onClick method you can add whatever code you need to respond to the user's chosen level using the retrieved integer value. The method also dismisses the Dialog. Finally, still inside the onClick method, show the Dialog:

levelDialog.show();

Your app should now have the ability to let users set levels using this intuitive control, which almost all smartphone users are well accustomed to.

Further Resources:
Android Developers: SeekBar Class
TechRepublic: Android's SeekBar your way