Android SeekBar allows user to select a value from the given range of values by providing draggable thumb. SeekBar is a subclass of ProgressBar which is used to show progress of user initiated or backend operations.
In this post, details on how to use android seek bar, material styles, custom material styles, SeekBar event handling, custom seek bar, and seek bar custom track, thumb and tickMark are covered.
SeekBar can be added to layout using SeekBar element. The important attributes that need to be set are max, progress and layout_width. Using max attribute of SeekBar, you can set maximum value so that user can select a value from the range starting from 0 to the maximum value by dragging seek bar thumb. You can set default selected value by setting value for progress attribute which gets changed as user drags the thumb.
Below example layout xml contains SeekBar.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:id="@+id/seekBar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:max="200"
android:progress="70"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout> 
Above screen shot shows SeekBar when application theme is set to Theme.AppCompat.Light. SeekBar can be customized at application level to show different colors for seekbar background and progress by defining custom colors for colorControlNormal and colorControlActivate.
<style name="AppThemeTwo" parent="Theme.AppCompat.Light">
<item name="android:colorControlActivated">#1a237e</item>
<item name="android:colorControlNormal">#00b0ff</item>
</style>
Android platform provides Widget.Material.SeekBar (App compact version of it is Widget.AppCompat.SeekBar) and Widget.Material.SeekBar.Discrete material styles for SeekBar.
Below screen shot shows the appearance of seek bar with Widget.Material.SeekBar.Discrete theme. Widget.Material.SeekBar.Discrete is available from API level 24.
<SeekBar
android:id="@+id/seekBar4"
. . .
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:max="16"
android:progress="6"/>SeekBar discrete material style output.
You can define custom material style for seekbar by inheriting Widget.AppCompat.SeekBar and setting custom values for attributes such as progressBackgroundTint, progressTint, and colorControlActivated.
Below material style for seekbar customizes seekbar color by setting background, progress, and thumb colors.
<style name="MySeekBar" parent="Widget.AppCompat.SeekBar">
<item name="android:progressBackgroundTint">#f4511e</item>
<item name="android:progressTint">#388e3c</item>
<item name="android:colorControlActivated">#c51162</item>
</style>
SeekBar events can be handled by implementing SeekBar.OnSeekBarChangeListener and setting it to seek bar by calling setOnSeekBarChangeListener method.
You can implement behavior for three types of events such as progress change, seek bar touch start and touch stop events using SeekBar.OnSeekBarChangeListener by implementing onProgressChanged, onStartTrackingTouch, and onStopTrackingTouch methods.
SeekBar current value or seek bar progress can be obtained in onProgressChanged, as seekbar current value is passed as parameter to this method.
SeekBar seekBar = (SeekBar)findViewById(R.id.seekBar2);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener(){
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
Toast.makeText(ToggleButtonActivity.this,
"Seekbar vale "+i, Toast.LENGTH_SHORT).show();
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
Toast.makeText(ToggleButtonActivity.this,
"Seekbar touch started", Toast.LENGTH_SHORT).show();
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
Toast.makeText(ToggleButtonActivity.this,
"Seekbar touch stopped", Toast.LENGTH_SHORT).show();
}
});
Android seekbar can be customized by providing your own drawable for seek bar track (seek bar progress), seek bar thumb and seek bar tick mark.
Below drawable xml can be used as drawable for seekbar progress.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
android:gravity="center_vertical|fill_horizontal">
<shape android:shape="rectangle"
android:tint="#ffd600">
<corners android:radius="8dp"/>
<size android:height="30dp" />
<solid android:color="#ffd600" />
</shape>
</item>
<item android:id="@android:id/progress"
android:gravity="center_vertical|fill_horizontal">
<scale android:scaleWidth="100%">
<selector>
<item android:state_enabled="false"
android:drawable="@android:color/transparent" />
<item>
<shape android:shape="rectangle"
android:tint="#f50057">
<corners android:radius="8dp"/>
<size android:height="30dp" />
<solid android:color="#f50057" />
</shape>
</item>
</selector>
</scale>
</item>
</layer-list>
You can apply the custom drawable to seek bar using progressDrawable attribute.
<SeekBar
android:id="@+id/seekBar3"
. . .
android:theme = "@style/MySeekBar"
android:progressDrawable="@drawable/custom_seekbar_progress"/> SeekBar custom track output.
Below drawable xml can be used as seek bar thumb.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:thickness="4dp"
android:useLevel="false"
android:tint="#ad1457">
<solid
android:color="#ad1457" />
<size
android:width="32dp"
android:height="32dp" />
</shape>
Apply the above thumb drawable to seek bar by setting thumb attribute.
<SeekBar
android:id="@+id/seekBar3"
. . .
android:thumb="@drawable/custom_seekbar_thumb"
android:progressDrawable="@drawable/custom_seekbar_progress" />
Seekbar custom thumb output.
SeekBar tick mark can be customized by defining a drawable xml and applying it to seek bar using tickMark attribute.
Below xml is a drawable xml for customizing seek bar tickMark.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:tint="#304ffe">
<corners android:radius="4dp"/>
<size android:width="16dp"
android:height="16dp" />
<solid android:color="#304ffe" />
</shape>Applying seekbar custom tickMark drawable.
<SeekBar
android:id="@+id/seekBar3"
. . .
android:max="20"
android:progress="12"
android:progressDrawable="@drawable/custom_seekbar_progress"
android:thumb="@drawable/custom_seekbar_thumb"
android:tickMark="@drawable/seekbar_custom_tick"/>Seekbar custom tickMark output
