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

Answer 1

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