SeekBar Tutorial With Example

SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch thumb and drag left or right to set the SeekBar progress level.

SeekBar and RatingBar are the subclasses of AbsSeekBar. Users can attach a SeekBar.OnSeekBarChangeListener to be notified of the user’s movements.

These are the three methods inside OnSeekBarChangeListener

  • onProgressChanged(SeekBar seekBar, int progress, boolean fromUser): It is used to tell any change in the level of SeekBar and we can pass the value from progress. 
  • onStartTrackingTouch(SeekBar seekBar): It is used to tell the user has started a touch gesture.
  • onStopTrackingTouch(SeekBar seekBar): It is used to tell that the user has finished a touch gesture and we can show that value on the screen.

Read More: How to implement Android Splash Screen

SeekBar Tutorial With Example

Step 1 – Create a new project and give the desired name

Step 2 – You have to open an activity_main.xml file and copy the below code.

<?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"
    tools:context=".MainActivity">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="13dp"
        android:layout_marginTop="64dp"
        android:progress="20"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        tools:layout_editor_absoluteX="0dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="64dp"
        android:layout_marginEnd="8dp"
        android:fontFamily="sans-serif-black"
        android:text="ANDROIDHIRE"
        android:textAlignment="center"
        android:textSize="30sp"
        android:typeface="monospace"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

We have set the default value of SeekBar to 20, to set the default value use this tag android:progress="20"

Even you can do drag and drop the Seekbar and text from the Palette. Where you can find SeekBar? It is in the Widget section

Seekbar in Android Studio

Step 3 – Open the activitymain.java file, copy and paste the below code.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    SeekBar seekBar;
    TextView textView;
    private int progressChangedValue;


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

        seekBar = findViewById(R.id.seekBar);
        textView =findViewById(R.id.textView);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

                textView.setTextSize(progress);
                progressChangedValue = progress;

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {


            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

                Toast.makeText(MainActivity.this, "Seek bar progress is :" + progressChangedValue,
                        Toast.LENGTH_SHORT).show();

            }
        });
    }
}

In this java code, we are saving the SeekBar Progress in the progressChangedValue and then we show showing that value when the user Stop Touch the SeekBar and using Toast the value will pop up on the screen.

When you drag the SeekBar the size of the text will change.

Output

If are facing any problem in this Android SeekBar Tutorial With Example then you can comment below and we will help to resolve your query.

Recent Articles

How to Implement Text To Speech in Android Studio

Text-to-speech (TTS) technology reads clearly digital manual - the words on computers, smartphones, and tablets. This tutorial explains how to implement text to speech in android...

[Updated] Temporarily Free Games and Apps on Google Play Store

Every week there are free games and apps on the Google Play store. Here is the list of free games and apps on the Play Store you...

OnePlus 7T vs iPhone 11 | Specs Comparison

The OnePlus 7T and iPhone 11 are the two best phones if you looking for a price of less than $1000. Both the phone...

Elon Musk unveils Tesla’s Cybertruck

Are you into gaming or love watching sci-fi movies?  What about those back to the future movies which gave us a glimpse of the...

7 Best Hiking Apps you Must Try in 2020

Having the best hiking apps always gives you an advantage if you are going for adventurous trips. These apps can track your workout and activities...

Stay on Top - Get the daily news in your inbox

Related Stories