How to Add RangeSeekbar in Android Using Kotlin?

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.

Approach

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

filter_none

edit
close

play_arrow

link
brightness_4
code

      
allprojects {         
   repositories {         
      maven { url 'https://jitpack.io' }         
  }
}         

chevron_right


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



filter_none

edit
close

play_arrow

link
brightness_4
code

       
dependencies {         
         implementation 'com.github.Jay-Goo:RangeSeekBar:v3.0.0'         
}

chevron_right


Step 3: Create a string-array in strings.xml file present in the values folder.

strings.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

    
<string-array name="levelArray">
        <item>Lv1</item>
        <item>Lv2</item>
        <item>Lv3</item>
        <item>Lv4</item>
        <item>Lv5</item>
    </string-array>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

    
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

package org.geeksforgeeks.rangeseekbar
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.jaygoo.widget.OnRangeChangedListener
import com.jaygoo.widget.RangeSeekBar
import 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) {
            }
        })
    }
}

chevron_right


Output:

Refer to the official documentation for more information. 
 




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.