Material Design Components Sliders in Android

27 Sep, 2021
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.
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.
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:
Continuous sliders: These types of sliders allow the users to select a value within the specified range.Discrete sliders: These types of sliders allow the users to select a specific adjusted value within a specified range by referencing its value indicator.
Continuous sliders: These types of sliders allow the users to select a value within the specified range.
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:
Track: Track shows that the range that is available for a user to select from.Thumb: The Thumb is a position indicator that can be moved along the track, displaying the selected value of its position.Value Label: This however is optional, shows the numeric value that corresponds with the thumb’s placement.Tick Mark: This however is optional, Tick marks along a track represent predetermined values that the user can move the sliders to.
Track: Track shows that the range that is available for a user to select from.
Thumb: The Thumb is a position indicator that can be moved along the track, displaying the selected value of its position.
Value Label: This however is optional, shows the numeric value that corresponds with the thumb’s placement.
Tick Mark: This however is optional, Tick marks along a track represent predetermined values that the user can move the sliders to.
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.Bundleimport android.widget.TextViewimport androidx.appcompat.app.AppCompatActivityimport com.google.android.material.slider.RangeSliderimport 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:
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.