Material Design Components Sliders in Android

Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android applications. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. Material design in Android is one of the key features that attracts and engages the customer towards the application. This is a special type of design, which is guided by Google. So in this article, it has been demonstrated how to use Sliders and Range Sliders in android. Have a look at the following image to get an overview of the discussion.

Step by Step Implementation

Create an empty activity project

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

Add Required Dependency

Include google material design components dependency in the build.gradle file. After adding the dependencies don’t forget to click on the “Sync Now” button present at the top right corner.

implementation ‘com.google.android.material:material:1.4.0’

Note that while syncing your project you need to be connected to the network and make sure that you are adding the dependency to the app-level Gradle file as shown below.

Understanding the Sliders

Where it is used?

Sliders are used to view and select a particular value from the range along the bar. These are ideally used in adjusting the screen brightness, volume or applying the image filters. The icons also can be used at the start and at the end or the selected value can be shown, providing elegance and hence increasing the user experience.

Types of Sliders

There are majorly two types of sliders:

1. Continuous sliders: These types of sliders allow the users to select a value within the specified range.
2. Discrete sliders: These types of sliders allow the users to select a specific adjusted value within a specified range by referencing its value indicator.

Anatomy of Sliders

The Slider contains the following elements:

1. Track: Track shows that the range that is available for a user to select from.
2. Thumb: The Thumb is a position indicator that can be moved along the track, displaying the selected value of its position.
3. Value Label: This however is optional, shows the numeric value that corresponds with the thumb’s placement.
4. Tick Mark: This however is optional, Tick marks along a track represent predetermined values that the user can move the sliders to.

Adding Material Design Component Slider (Normal)

Step 1: Working with activity_main.xml file

The main layout of the project contains 4 types of sliders. One is the normal continuous slider, the second is the continuous range slider, the third is the discrete slider, and the fourth is a range discrete slider. To implement the same invoke the following code inside the activity_main.xml file.

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

    <com.google.android.material.slider.Slider
        android:id="@+id/normalContinuousSlider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.slider.RangeSlider
        android:id="@+id/continuousRangeSlider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/normalContinuousSlider"
        app:values="@array/slider_values" />

    <com.google.android.material.slider.Slider
        android:id="@+id/discreteSlider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:stepSize="10.0"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/continuousRangeSlider" />

    <com.google.android.material.slider.RangeSlider
        android:id="@+id/discreteRangeSlider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="32dp"
        android:stepSize="10.0"
        android:valueFrom="0.0"
        android:valueTo="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/discreteSlider"
        app:values="@array/slider_values" />

</androidx.constraintlayout.widget.ConstraintLayout>

Now add the following array inside the arrays.xml file and give the array name as slider_values.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="slider_values">
        <item>20.0</item>
        <item>70.0</item>
    </array>
</resources>

Output UI: 

Step 2: Working with MainActivity.kt file

The changes to sliders are observed in the MainActivity.kt file and the result is shown to the user. To implement the same, invoke the following code in the MainActivity.kt file

Kotlin

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.slider.RangeSlider
import com.google.android.material.slider.Slider

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // sample text view to show the result
        val tvResult: TextView = findViewById(R.id.tvResult)

        // observe for first type of slider
        val normalContinuousSlider: Slider = findViewById(R.id.normalContinuousSlider)
        normalContinuousSlider.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = value.toString()
        }

        // observe for second type of slider
        val continuousRangeSlider: RangeSlider = findViewById(R.id.continuousRangeSlider)
        continuousRangeSlider.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = "${slider.values[0]} to ${slider.values[1]}"
        }

        // observe for third type of slider
        val discreteSlider: Slider = findViewById(R.id.discreteSlider)
        discreteSlider.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = value.toString()
        }

        // observe for fourth type of slider
        val discreteRangeSlider: RangeSlider = findViewById(R.id.discreteRangeSlider)
        discreteRangeSlider.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = "${slider.values[0]} to ${slider.values[1]}"
        }
    }
}

Output: