Implementation of Google design guidelines for Sliders
sadly google just provided how it should look like, but there seems to be no class provided by the android support libraries :(
but for now you can try this library: https://github.com/AnderWeb/discreteSeekBar
or this for even more material elements: https://github.com/navasmdc/MaterialDesignLibrary
hopefully google adds this in later releases...
AnderWeb's discrete seekbar has a few problems. And for the other one(MDL), you may not want to compile the entire material design library just for a descrete seekbar/slider.
But there is a nice github repository you may find useful: BubbleSeekBar
I tried to find a nice solution for the same problem. In my case I was also trying to find a seekbar that will always show the bubble. After two hours of research I found BubbleSeekBar library, which provides every single attribute you can think of. It was hard to find this library since the readme file doesn't even use the word "material".
EDIT: After six months, now there is another good Discrete Seek Bar repo that you may find useful. IndicatorSeekBar seems to have everything covered, except a few Issues. You can check it here.
Now you can use the official Slider
in Material Components Library.
Just use something like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false">
<com.google.android.material.slider.Slider
android:id="@+id/slider"
android:layout_gravity="center"
app:labelBehavior="withinBounds"
android:value="60"
android:valueFrom="0"
android:valueTo="100"
..../>
</LinearLayout>
NOTE: it requires the version 1.2.0 (currently 1.2.0-beta01
) of the library.
If you want to customize the tooltip shape with a circle marker instead of the default label you can use the labelStyle
attribute:
<com.google.android.material.slider.Slider
app:labelStyle="@style/tooltip"
with:
<style name="tooltip" parent="Widget.MaterialComponents.Tooltip">
<item name="shapeAppearanceOverlay">@style/tooltipShOverylay</item>
<item name="backgroundTint">@color/....</item>
</style>
<style name="tooltipShOverylay">
<item name="cornerSize">50%</item>
</style>