ZOFTINO.COM

Android SeekBar and Custom SeekBar Examples

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.

Using Android SeekBar

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> 

android seekbar example

Android SeekBar Style Application Level

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 seekbar material style custom colors example

Android SeekBar Style Individual

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.

android seekbar descret material style example

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>
 

android seekbar custom material style colors for seekbar progress, background and thumb

Android SeekBar Event Listener

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 Custom SeekBar

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.

SeekBar custom track or progress drawable

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.

android custom seekbar with custom progress or track

Seek bar custom thumb

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.

android custom seekbar with custom thumb

SeekBar custom tickMark

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

android custom seekbar with custom tickMark example