SeekBar Tutorial With Example

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.

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here