Adding Seekbar to Your App with Example

On Android, SeekBar is a ProgressBar extension that adds a sliding slider that can be moved from left to right. The user can touch the thumb and drag left or right to set the current value of the progress.

Seek Bar is one of the very useful UI elements in Android, which allows you to select integer values through a natural UI.

Methods That Must Be Used:
Three abstract methods must be implemented in the seek bar to get changes in progress. The following is a detailed description of these three methods:

override fun onProgressChanged(seekBar: Seek Bar?,progress: Int, fromUser: Boolean)–> This listener method will be called whenever the SeekBar is changed.

override fun onStartTrackingTouch(seekBar: Seek Bar?) –> This listener method will be called when the user’s touch event begins. This method will be called whenever a user touches the thumb for dragging.

override fun onStopTrackingTouch(seekBar: Seek Bar?)–> At the end of the user touch event, this listener method will be called.When the user stops dragging the hit, this condition will be called automatically in the method.

Preview:

<– Seekbar Example

Seek bar code:

  <SeekBar
        android:id="@+id/VolumeSeekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:min="0"
        android:max="100"
        android:progress="25"
        />

File: MainActivity.kt

–>In MainActivity.kt file initialize variable and implement methods of seek bar.

package com.example.seekbar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.SeekBar
import android.widget.TextView
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    var StartOn=0
    var OverOn=0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        findViewById<SeekBar>(R.id.VolumeSeekBar).setOnSeekBarChangeListener(object:SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(seekBar: SeekBar?,progress: Int, fromUser: Boolean) {
                 findViewById<TextView>(R.id.Volume).text = progress.toString()
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
                if (seekBar != null) {
                    StartOn=seekBar.progress
                }
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                if (seekBar != null) {
                    OverOn=seekBar.progress
                }
                Toast.makeText(this@MainActivity," On $OverOn \n\n Changed by ${OverOn-StartOn}",Toast.LENGTH_SHORT).show()
            }

        })
    }
}

File: activity_main.xml

–>In the activity_main.xml file add the text view and seek bar.

<?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">

    <TextView
        android:id="@+id/Volume"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="25"
        android:background="@color/teal_200"
        android:textSize="42sp"
        android:textColor="@color/black"
        android:textCursorDrawable="@color/purple_700"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <SeekBar
        android:id="@+id/VolumeSeekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:min="0"
        android:max="100"
        android:progress="25"
        android:layout_margin="30dp"
        app:layout_constraintTop_toBottomOf="@id/Volume"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

We hope that this guide will assist you in quickly creating a simple seek bar Android app. If you have any problems, please post them in the comments section and we will gladly assist you.

http://theudaipurstore.com