Implementation of Google design guidelines for Sliders

Question

Yesterday I was looking for sliders in Android and found this website with the Google search: https://material.io/guidelines/components/sliders.html#sliders-discrete-slider

I know that I can use a SeekBar in Android to implement sliders. However, Google seems to have very nice examples of discrete sliders but I cannot find any code examples.

I already implemented a normal SeekBar that is looking like this:

How can I make it look like this?

(Difference: When I move my slider, there is no big drop that shows the current value)

I think I might just have missed the code documentation for these design guidelines. Does anyone know where to find it? Or is the design difference because I got Android 5.0.2 on my phone?

Misname

Answer 1

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>

Horatius

How did you customized the slider's tooltip? – Townsville

@SumitShukla Updated the answer with a custom tooltip. – Horatius

Answer 2

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...

Scarf

I have the same question after one year ... Does google provide now class to implement this google material design slider ? – Cultural

I have the same question after two more years. – Duran

The Slider is still in the "Planned" state as of right now. See material.io/design/components/sliders.html#implementation – Paediatrician

the RangedSlider is in the code repo, but is not in the library as of 1.2.0-alpha06. – Gossipry

Answer 3

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.

Yorke

Answer 4

Continuous slider Continuous sliders allow users to make meaningful selections that don’t require a specific value.

<com.google.android.material.slider.Slider
                    android:id="@+id/slider"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="32dp"
                    android:layout_gravity="center"
                    android:value="8.09"
                    android:valueFrom="0.0"
                    android:valueTo="11.0" />

Discrete slider Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to input an exact value.

<com.google.android.material.slider.RangeSlider
                    android:id="@+id/range_slider"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="32dp"
                    android:layout_gravity="center"
                    app:values="@array/initial_slider_values"
                    android:valueFrom="0.0"
                    android:valueTo="10.0"
                  />
 
   <!--array.xml-->
   <array name="initial_slider_values">
      <item>4.0</item>
      <item>8.0</item>
   </array>

Palgrave

Note that the sliders are only available in v1.2 and above. v1.2 is still in beta. implementation 'com.google.android.material:material:1.2.0-beta01' – Weintraub

1.2.0 is released now – Fearnought