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.
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:
- 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.
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.
Now add the following array inside the arrays.xml file and give the array name as slider_values.
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