How to Add a Range Slider in Android?

In this article, we will be adding a Range Slider in Android. A Range Slider is used to select a value from a range of numbers. Mostly we see a Range Slider in the audio volume controller and screen brightness adjuster in Android devices. To add a range slider in our activity we will be using a third-party range slider. You can choose a Range Slider from Github or any other resource and implement a similar method. There will be a single activity in this app. A sample GIF is given below to get an idea about what we are going to do in this article. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Add Dependency to build.gradle file

dependencies {

   compile ‘com.github.channguyen:rsv:1.0.1’

}

Step 3: Working with the activity_main.xml file

The XML codes are used to build the structure of the activity as well as its styling part. We will add the range slider either the small one or the large one. You can also change the color and size of the slider. This is a single activity application. Below is the code for the activity_main.xml file.

XML

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:rsv="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--small range slider-->
    <com.github.channguyen.rsv.RangeSliderView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="100dp"
        android:layout_marginRight="40dp"
        rsv:filledColor="#4CAF50" />

    <!--large range slider-->
    <com.github.channguyen.rsv.RangeSliderView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="100dp"
        android:layout_marginRight="20dp"
        rsv:filledColor="#3F51B5" />

</RelativeLayout>

Output: