Skip to content
Related Articles

Related Articles

Improve Article

How to Add a Range Slider in Android?

  • Last Updated : 26 Feb, 2021

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. 

 Add a Range Slider in Android Sample GIF

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

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :