How to Customise MDC Sliders in Android?

In the article of Material Design Components Sliders in Android, it’s been discussed how to implement the Material Design Component sliders in android and also handled the click listener for all types of sliders. In this article, it’s been discussed how to customize the Material Design Component sliders in Android. Have look at the following image for an overview of the discussion. Before proceeding knowing the anatomy of the slider is important which is discussed in the previous article.

Create a project

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

Adding the 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.

Step 1: Working with the activity_main.xml file

The main layout of the application contains two sliders one is a continuous slider and another is a discrete slider and one TextView to show the slider result. for demonstration purposes. To implement the same layout 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/slider1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintTop_toBottomOf="@+id/slider1"
        tools:layout_editor_absoluteX="64dp" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:text="Result Appears Here!"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/slider2" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output UI

Setting Label Format for the Sliders

In the MainActivity.kt file we have to override the default toolTipText of the slider using slider instance with setLabelFormat{}. To implement the same invoke the following code inside MainActivity.kt file.

Kotlin

import android.annotation.SuppressLint
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.slider.Slider
import java.text.NumberFormat
import java.util.*

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

        // register all UI elements with their appropriate IDs
        val tvResult: TextView = findViewById(R.id.tvResult)
        val slider1: Slider = findViewById(R.id.slider1)
        val slider2: Slider = findViewById(R.id.slider2)

        // create instance of current format of INR
        val formatINR = NumberFormat.getCurrencyInstance()
        formatINR.maximumFractionDigits = 0
        formatINR.currency = Currency.getInstance("INR")

        // create instance of current format of USD
        val formatUSD = NumberFormat.getCurrencyInstance()
        formatUSD.maximumFractionDigits = 0
        formatUSD.currency = Currency.getInstance("USD")

        // set the custom label for slider1 as INR
        slider1.setLabelFormatter {
            formatINR.format(it.toDouble())
        }

        // set the custom label for slider1 as USD
        slider2.setLabelFormatter {
            formatUSD.format(it.toDouble())
        }

        // add Change Listener for slider1 to show the result on TextView
        slider1.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = formatINR.format(value.toDouble())
        }

        // add Change Listener for slider2 to show the result on TextView
        slider2.addOnChangeListener { slider, value, fromUser ->
            tvResult.text = formatUSD.format(value.toDouble())
        }
    }
}

Output:

Changing Height and Color of the Track:

XML attributes for track height:

app:trackHeight=”valueInDp”

XML attributes for track color:

app:trackColor=”CustomColorValue”

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/slider1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:trackColor="@color/black"
        app:trackHeight="2dp" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintTop_toBottomOf="@+id/slider1"
        app:trackColor="@android:color/holo_orange_dark"
        app:trackHeight="10dp"
        tools:layout_editor_absoluteX="64dp" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:text="Result Appears Here!"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/slider2" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output UI:

Some other Attributes of Track are:

Element	Attribute
Min value	android:valueFrom
Max value	android:valueTo
Step size (discrete)	android:stepSize
Initial selected value (Slider)	android:value
Initial selected values (RangeSlider)	app:values
Height	app:trackHeight
Color	app:trackColor
Color for track’s active part	app:trackColorActive
Color for track’s inactive part	app:trackColorInactive
Minimum separation for adjacent thumbs	app:minSeparation

Changing Color and Radius color of the Thumb:

XML attributes for Thumb color:

app:trackHeight=”valueInDp”

XML attributes for Thumb radius:

app:trackColor=”CustomColorValue”

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/slider1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:thumbColor="@android:color/holo_purple" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintTop_toBottomOf="@+id/slider1"
        app:thumbColor="@android:color/holo_blue_bright"
        tools:layout_editor_absoluteX="64dp" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:text="Result Appears Here!"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/slider2" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output UI

Some other Attributes of Thumb are:

Element	Attribute
Color	app:thumbColor
Radius	app:thumbRadius
Elevation	app:thumbElevation
Halo color	app:haloColor
Halo radius	app:haloRadius
Stroke color	app:thumbStrokeColor
Stroke width	app:thumbStrokeWidth

Changing color of Tick marks and making them visible and invisible:

These changes are only seen in the discrete sliders as continuous sliders won’t have the tick marks on the track.

Attribute for Tick mark visibility:

app:tickVisible=”booleanValue”

Attribute for Tick mark color:

app:tickColor=”@android:color/black”

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/slider1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tickVisible="false" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:stepSize="10"
        android:valueFrom="0"
        android:valueTo="100"
        app:layout_constraintTop_toBottomOf="@+id/slider1"
        app:tickColor="@android:color/black"
        tools:layout_editor_absoluteX="64dp" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="64dp"
        android:text="Result Appears Here!"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/slider2" />

</androidx.constraintlayout.widget.ConstraintLayout>

Output:

Some other attributes of the Tick mark are:

Element	Attribute
Color	app:tickColor
Color for track’s active part	app:tickColorActive
Color for track’s inactive part	app:tickColorInactive
Tick visible	app:tickVisible