How to add tickmark with selected value for Discrete Sliders?

Question

I'm trying to style a discrete seekbar like the Focused Seekbar showed in the Material design website and I can't figure out how add the tickmark over the bar that shows the selected value

Material Design discrete sliders

I have a seekbar with 100 positions and this is my current xml code:

<SeekBar
    android:id="@+id/seekBar"
    style="@style/Widget.AppCompat.SeekBar.Discrete"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/mod_quantity_text"
    android:clickable="true"
    android:max="100"
    android:progress="1" />

Thanks for help

https://stackoverflow.com/questions/35370671/how-to-show-tick-marks-for-discrete-slider — Raghunandan, Sep 13 '17 at 08:20

score 1 · Answer 1 · answered Sep 13 '17 at 08:22

You have to add tickmark drable to your XML

<SeekBar
    android:id="@+id/seekBar"
    style="@style/Widget.AppCompat.SeekBar.Discrete"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/mod_quantity_text"
    android:clickable="true"
    android:tickMark="@drawable/your_tickmark_drawable"  // this line you have to add
    android:max="100"
    android:progress="1" />

score 1 · Accepted Answer · answered Sep 14 '17 at 10:56

I've got solution creating a new drawable called "thumb.xml" that contains the reference to png file and a parameter android:bottom set to an appropriate level to guarantee a perfect alignment of the thumb over the seekbar (50dp in my case):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:bottom="50dp"
    android:drawable="@drawable/seekbar_thumb"/>
</layer-list>

After this I changed the SeekBar parameters in layout xml file adding a custom thumb (and the related color):

<SeekBar
        android:id="@+id/seekBar"
        style="@style/Widget.AppCompat.SeekBar"
        android:layout_width="match_parent"
        android:layout_height="95dp"
        android:minHeight="20dp"
        android:clickable="true"
        android:progressBackgroundTint="@color/colorPrimary"
        android:max="100"
        android:thumb="@drawable/thumb"
        android:thumbTint="@color/colorAccent"
        android:progress="1"/>

Adding the tickmark drawable didn't work for me because I needed to change and move the thumb. Hoping that this will help

score 0 · Answer 3 · answered Oct 31 '22 at 06:50

0

For com.google.android.material.slider.Slider

app:tickVisible="false"

answered Oct 31 '22 at 06:50

Trang Đỗ

160
1
9

How to add tickmark with selected value for Discrete Sliders?

3 Answers3