How to Add RangeSeekbar in Android Using Kotlin? - GeeksforGeeks

23 Feb, 2021
In this article,  RangeSeekbar is implemented in an application in android. Android Seekbar is a type of progress bar. We can drag the seekbar from left to right and vice versa and hence changes the current progress. Here we use the RangeSeekbar library to add custom seekbar in our app. This library provides us various features like steps, mode, thumbDrawable, etc which makes it way better than seekbar provided by android.
Step 1: Add the support Library in your root build.gradle file (not your module build.gradle file). This library jitpack is a novel package repository. It is made for JVM so that any library which is present in github and bigbucket can be directly used in the application.
XML
      allprojects {            repositories {               maven { url 'https://jitpack.io' }           }}         
Step 2: Add the support library in build.gradle file and add the dependency in the dependencies section. Through this directly RangeSeekbar will be used in the XML.
XML
       dependencies {                  implementation 'com.github.Jay-Goo:RangeSeekBar:v3.0.0'         }
Step 3: Create a string-array in strings.xml file present in the values folder.
strings.xml
    <string-array name="levelArray">        <item>Lv1</item>        <item>Lv2</item>        <item>Lv3</item>        <item>Lv4</item>        <item>Lv5</item>    </string-array>
Step 4: Add the following code in the activity_main.xml file. In this file, seekbar is added to the layout and the important tag like steps, thumbDrawable, mode, and many more are added according to the requirement.
activity_main.xml
    <?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/textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="228dp"        android:textSize="18sp"        android:text="Set difficulty for problem:-"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.498"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent" />      <com.jaygoo.widget.RangeSeekBar        android:id="@+id/range_seekbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:rsb_gravity="bottom"        app:rsb_indicator_background_color="@color/colorProgress"        app:rsb_indicator_height="30dp"        app:rsb_indicator_width="50dp"        app:rsb_mode="single"        app:rsb_progress_color="@color/colorProgress"        app:rsb_step_auto_bonding="true"        app:rsb_step_color="@color/colorProgress"        app:rsb_step_height="10dp"        app:rsb_step_width="5dp"        app:rsb_steps="4"        app:rsb_thumb_drawable="@drawable/ic_baseline_brightness"        app:rsb_tick_mark_layout_gravity="bottom"        app:rsb_tick_mark_mode="other"        app:rsb_tick_mark_text_array="@array/levelArray"        app:rsb_tick_mark_text_margin="20dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent" />  </androidx.constraintlayout.widget.ConstraintLayout>
Step 5: Add the following code in MainActivity.kt file.  Here setOnRangeChangedListener is added with the seekbar. It is invoked when the user changes the seekbar bar and shows the percentage of progress to which it is changed.
MainActivity.kt
package org.geeksforgeeks.rangeseekbar  import androidx.appcompat.app.AppCompatActivityimport android.os.Bundleimport android.widget.Toastimport com.jaygoo.widget.OnRangeChangedListenerimport com.jaygoo.widget.RangeSeekBarimport kotlinx.android.synthetic.main.activity_main.*  class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)          //whenever we change progress of seekbar this function         //get invoked automatically.        range_seekbar?.setOnRangeChangedListener(object :             OnRangeChangedListener {            override fun onRangeChanged(                     rangeSeekBar: RangeSeekBar, leftValue: Float,                     rightValue: Float, isFromUser: Boolean) {                Toast.makeText(this@MainActivity,                    leftValue.toString(),Toast.LENGTH_LONG).show()            }              override fun onStartTrackingTouch(view: RangeSeekBar?,                         isLeft: Boolean) {            }              override fun onStopTrackingTouch(view: RangeSeekBar?,                          isLeft: Boolean) {            }        })    }}
Output:
Refer to the official documentation for more information.  
Android-Bars
Kotlin Android
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Android UI Layouts
Kotlin Array
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Kotlin Setters and Getters