Android Material Design Component - How to Use Sliders in Your App
Hi and welcome to another tutorial from CodingDemos :)
In this tutorial, you will learn about one of the Android Material Design component called Slider. I will explain to you what is Slider and Range Slider, and how you can customize to your needs.
Here are the steps:
1- Open up Android Studio.
2- Add Android Material Design component library dependency inside Build.Gradle module file.
implementation 'com.google.android.material:material:1.2.1'
3- Add Google Maven repository inside Build.Gradle project file.
google()
4- Now Click on the Sync button to sync your project.
5- Open activity_main.xml file, and add the Slider view.
com.google.android.material.slider.Slider
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:value="20"
android:valueFrom="0"
android:valueTo="100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:value="20" means that the slider value will be set as 20, while android:valueFrom="0" and android:valueTo="100" means that the slider initial value will be set 0 and the final value will be set as 100.
6- Build and run the app to see the result.
7- Now let's customize the appearance of the slider by changing its colors.
8- You can change the color of the circle that surrounds the slider control like this.
app:haloColor="@color/colorAccent"
9- You can change the color of the slider control like this.
app:thumbColor="@color/colorPrimaryDark"
10- You can change the color of the slider track like this.
app:trackColor="@color/colorAccent"
11- You can customize the slider so that the slider can move 5 points at a time like this.
android:stepSize="5"
12- Now build and run the app to see the output.
13- You can also change the color of the slider dots like this.
app:tickColor="@color/colorPrimary"
14- Build and run the app to see the changes.
15- Now you can add the other type of slider called RangeSlider. This slider allows you to add multiple slider controls on the same slider track.
16- Open strings.xml file and add the following code.
string-array name="rangeSliderValues"
item20/item
item70/item
string-array
17- The string-array that you have created in step 15 represents the number of slider controls that appear on the slider track. You can use it in the slider like this.
com.google.android.material.slider.RangeSlider
android:id="@+id/sliderRange"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="5"
android:value="20"
android:valueFrom="0"
android:valueTo="100"
app:values="@array/rangeSliderValues"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/slider"
18- Now build and run the app to see the result.
19- You can also customize the appearance of the slider tooltip by changing the text style and background color.
20- Open styles.xml file and add the following code.
style name="Widget.App.Tooltip" parent="Widget.MaterialComponents.Tooltip"
item name="android:textAppearance"@style/TextAppearance.App.Tooltip/item
item name="backgroundTint"@color/colorPrimaryDark/item
/style
style name="TextAppearance.App.Tooltip" parent="TextAppearance.MaterialComponents.Tooltip"
item name="android:textColor"@android:color/white/item
/style
21- You can use the styles that you've created in step 19 inside the RangeSlider like this.
app:labelStyle="@style/Widget.App.Tooltip"
22- Now build and run the app to see the final result.
#androiddevelopment #androidprogramming #androidtutorial #androidstudio #androidstudiotutorial #java #codingdemos
Links:
Android Material Design Slider documentation: https://www.material.io/develop/andro...
Android Material Design Component library: https://github.com/material-component...
Website: https://www.codingdemos.com
FaceBook: / codingdemos
Introduction 00:00
Final output 00:32
Add Slider dependency library 02:00
Type of Sliders 05:00
Continues Slider 05:30
Customize the Slider 08:25
Increment Slider points 08:50
Change Slider points to integer 09:55
Remove Slider tooltip 11:30
Change Slider color 12:45
Range Slider 17:25
Add currency icon to Slider 23:45
Customize Slider tooltip 28:40
Conclusion 33:45