Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Customise MDC Sliders in Android?

  • Last Updated : 27 Sep, 2021

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.

Customise MDC Sliders in Android

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: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: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 valueandroid:valueFrom
Max valueandroid:valueTo
Step size (discrete)android:stepSize
Initial selected value (Slider)android:value
Initial selected values (RangeSlider)app:values
Heightapp:trackHeight
Colorapp:trackColor
Color for track’s active part app:trackColorActive
Color for track’s inactive partapp:trackColorInactive
Minimum separation for adjacent thumbsapp: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: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:

ElementAttribute
Colorapp:thumbColor
Radiusapp:thumbRadius
Elevationapp:thumbElevation
Halo colorapp:haloColor
Halo radiusapp:haloRadius
Stroke colorapp:thumbStrokeColor
Stroke widthapp: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: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

Colorapp:tickColor
Color for track’s active partapp:tickColorActive
Color for track’s inactive partapp:tickColorInactive
Tick visibleapp:tickVisible

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!