How to show tick marks for Discrete Slider?
Asked Answered
T

3

13

enter image description here

I'm trying to style a seekbar/slider like the one labeled Discrete Slider - Click (that has the little tick mark indicators) in the Material Design Guidelines. I can't figure out the magical incantation to have the tickmarks show up, does anyone know how to do this?

I have a seekbar with 5 positions (0-4)

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="4" />
Towel answered 12/2, 2016 at 19:25 Comment(0)
J
22

Add tick marks with the style attribute:

<SeekBar
    android:id="@+id/seekBar"
    style="@style/Widget.AppCompat.SeekBar.Discrete"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="10"
    />

Or add them manually by setting the tickMark drawable:

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="10"
    android:tickMark="@drawable/tickmark"
    />

tickmark.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size android:width="4dp"
          android:height="4dp"/>
    <solid android:color="@android:color/white"/>
</shape>
Jopa answered 14/9, 2016 at 10:13 Comment(4)
Ahh looks like this was recently added in the 24.x.x support lib (does not appear to be available in 23.4.0)Towel
@Jopa I'm not getting ticker indicator on seekbar, Can you please help me ?Jordison
@Jopa how does the seek bar know the step size to place the tickmarkPeeved
It knows it from the "max" value. When max is 10, it will divide the SeekBar into 10 segments, and put a tickmark between each.Atrocious
A
3

Now you can use the Slider in the Material Components Library.
The tick marks are displayed by default in the discrete sliders.

    <com.google.android.material.slider.Slider
        android:valueFrom="0"
        android:valueTo="10"
        android:stepSize="1"
        .../>

enter image description here

Ammonic answered 1/8, 2020 at 7:31 Comment(0)
M
0

use com.google.android.material.slider.Slider

app:tickVisible="true" // false
Multicolored answered 31/10, 2022 at 6:51 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.