Android SeekBar Tutorial

View more Tutorials:

Android Programming Tutorials

What is SeekBar?
SeekBar example
Customize SeekBar
Appendix: Interface design

1- What is SeekBar?

A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress or use the arrow keys. Placing focusable widgets to the left or right of a SeekBar is discouraged.

Here are some samples seekbar:

2- SeekBar example

Create a Project named SeekBarDemo.

File > New > New Project > Empty Activity
- Name: SeekBarDemo
- Package name: org.o7planning.seekbardemo
- Language: Java

The interface of the application is quite simple, it is similar to the illustration below, if you are interested in the interface design steps, please see the appendix at the end of the article.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="0dp"
        android:layout_height="27dp"
        android:layout_marginStart="19dp"
        android:layout_marginLeft="19dp"
        android:layout_marginTop="43dp"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="24dp"
        android:layout_marginStart="22dp"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="34dp"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/seekBar" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="1dp"
        android:layout_marginRight="1dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView">

        <Button
            android:id="@+id/button_decrease"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="-" />

        <Button
            android:id="@+id/button_increase"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="+" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package org.o7planning.seekbardemo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private SeekBar seekBar;
    private TextView textView;
    private Button buttonDecrease;
    private Button buttonIncrease;

    private static int DELTA_VALUE = 5;

    private static final String LOGTAG = "SeekBarDemo";


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //
        this.seekBar = (SeekBar) findViewById(R.id.seekBar );
        this.textView = (TextView) findViewById(R.id.textView);


        this.buttonDecrease= (Button) findViewById(R.id.button_decrease);
        this.buttonIncrease= (Button) findViewById(R.id.button_increase);

        this.seekBar.setMax(100);
        this.seekBar.setProgress(15);

        this.textView.setText("Progress: " + seekBar.getProgress() + "/" + seekBar.getMax());
        //
        this.seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            int progress = 0;

            // When Progress value changed.
            @Override
            public void onProgressChanged(SeekBar seekBar, int progressValue, boolean fromUser) {
                progress = progressValue;
                textView.setText("Progress: " + progressValue + "/" + seekBar.getMax());
                Log.i(LOGTAG, "Changing seekbar's progress");
                Toast.makeText(getApplicationContext(), "Changing seekbar's progress", Toast.LENGTH_SHORT).show();
            }

            // Notification that the user has started a touch gesture.
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Log.i(LOGTAG, "Started tracking seekbar");
                Toast.makeText(getApplicationContext(), "Started tracking seekbar", Toast.LENGTH_SHORT).show();
            }

            // Notification that the user has finished a touch gesture
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                textView.setText("Progress: " + progress + "/" + seekBar.getMax());
                Log.i(LOGTAG, "Stopped tracking seekbar");
                Toast.makeText(getApplicationContext(), "Stopped tracking seekbar", Toast.LENGTH_SHORT).show();

            }
        });

        this.buttonDecrease.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                decreateProgress();
            }
        });

        this.buttonIncrease.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                increateProgress();
            }
        });
    }


    private void decreateProgress()  {
        int progress= this.seekBar.getProgress();
        if(progress - DELTA_VALUE < 0)  {
            this.seekBar.setProgress(0);
        } else  {
            this.seekBar.setProgress(progress - DELTA_VALUE);
        }
        textView.setText("Progress: " + seekBar.getProgress()+ "/" + seekBar.getMax());
    }

    private void increateProgress()  {
        int progress= this.seekBar.getProgress();
        if(progress + DELTA_VALUE > this.seekBar.getMax())  {
            this.seekBar.setProgress(0);
        }else {
            this.seekBar.setProgress(progress + DELTA_VALUE);
        }
        textView.setText("Progress: " + seekBar.getProgress()+ "/" + seekBar.getMax());
    }

}

Running apps: