Android kotlin - SeekBar example

Last updated Feb 14, 2020

Android kotlin - SeekBar example

Android  SeekBar is a modified version of progressBar that have draggable thumb in which a user can drag the thumb back and forth to set current progress value. We can use this seekbar to set the Range Values in Any application.

Properties of SeekBar

 XML ATTRIBUTE   Description  

android:id

 Uniquely identify the control
ndroid:thumb Set drawable to be used as thumb that can be moved back and forth
android:thumbTint Set tint to apply to the thumb
android:min Specify the minimum value.
android:max Specify the maximum value
android:progress Specify the default progress value between 0 and 100
android:progressDrawable Specify drawable mode of the progress
android:background Set background of the specified view
android:padding Set the padding from left, right, top and bottom

 

Step 1: Create Android Project in Android Studio

Step 2: Updated activity_main.xmla file with below code 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="https://schemas.android.com/apk/res/android"
        xmlns:tools="https://schemas.android.com/tools"
        xmlns:app="https://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="16dp"
    >
        <SeekBar
                android:id="@+id/seek_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:max="50"
                android:layout_margin="25dp"
        />
        <TextView
                android:id="@+id/text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
                android:layout_marginTop="20dp"
                android:layout_gravity="center_horizontal"
        />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: UPdate MainActivity.kt with below code

package com.rrtutors.kotlinprograms

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.SeekBar
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        seek_bar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {

            override fun onProgressChanged(seekBar: SeekBar, i: Int, b: Boolean) {
                // Display the current progress of SeekBar
                text_view.text = "Progress : $i"
            }

            override fun onStartTrackingTouch(seekBar: SeekBar) {
                // Do something
                Toast.makeText(applicationContext,"start tracking",Toast.LENGTH_SHORT).show()
            }

            override fun onStopTrackingTouch(seekBar: SeekBar) {
                // Do something
                Toast.makeText(applicationContext,"stop tracking",Toast.LENGTH_SHORT).show()
            }
        })
    }
}

 

Let's run the application and play with SeekBar