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:
onStartTrackingTouch
– Gets called as the user starts draggingonProgressChanged
– This is called as the progress changesonStopTrackingTouch
– 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