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>