CODEWITHSUNDEEP
androidmaterial-designandroid-seekbar
akstavrh
akstavrh

Reputation: 63

How to add tickmark with selected value for Discrete Sliders?

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

Upvotes: 0

Views: 2366

Answers (3)

Trang Đỗ
Trang Đỗ

Reputation: 180

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

app:tickVisible="false"

Upvotes: 0

akstavrh
akstavrh

Reputation: 63

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

Upvotes: 1

Bhuvanesh BS
Bhuvanesh BS

Reputation: 13617

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" />

Upvotes: 1

Related Questions