Android kotlin - SeekBar example

Last updated Feb 14, 2020

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

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

-->

Article Contributed By :

1533 Views

Projects By category