Share via

Adding Ticks & Labels To A com.google.android.material.slider.Slider

Nathan Sokalski 4,126 Reputation points
2022-07-18T17:30:32.133+00:00

I currently have a com.google.android.material.slider.Slider using the following code and creates the following screenshot: 

<com.google.android.material.slider.Slider android:id="@+id/sldPlayersPerTeam"  
	android:layout_width="0dp" android:layout_height="wrap_content"  
	android:layout_column="1" android:layout_row="2" android:layout_columnWeight="1"  
	android:valueFrom="2" android:valueTo="5" android:stepSize="1" app:thumbColor="@color/Black"  
	app:trackColor="@color/Black" app:haloColor="@color/Transparent" app:labelBehavior="gone" app:tickColor="@color/Black"/>

221915-slider1.png

I want to add vertical tick marks that have numeric labels. Here is an edited screenshot of what I am looking for:

221957-slider2.png

Is there any way to add the tick marks? No matter what color I use or what settings I change, the tick marks seem very small and hard to see, making them almost pointless.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,347 questions
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,121 Reputation points Microsoft Vendor
    2022-07-19T07:50:02.997+00:00

    Hello,​

    If you want to make tick marks bigger, I create a custom drawable and set it by android:tickMark="@drawable/tickmark", But it is not working in com.google.android.material.slider.Slider, if I set it to SeekBar, it is working. And seek bar closer to your needs. 

       <SeekBar  
           android:id="@+id/seekBar1"  
       android:layout_width="match_parent"  
       android:layout_height="50dp"  
       android:max="3"  
       android: progress="1"   
       android:progressTint="@color/Black"  
       android:progressBackgroundTint="@color/Black"  
       android:thumbTint="@color/Black"  
       android:tickMark="@drawable/tickmark"/>

    If you want to custom SeekBar in Android with labels in bottom. You can use <RelativeLayout> layout and several <TextView> in <LinearLayout>

    Best Regards,

    Leon Lu

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments
  2. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,121 Reputation points Microsoft Vendor
    2022-07-19T07:50:03.16+00:00

    Hello,​

    If you want to make tick marks bigger, I create a custom drawable and set it by android:tickMark="@drawable/tickmark", But it is not working in com.google.android.material.slider.Slider, if I set it to SeekBar, it is working. And seek bar closer to your needs. 

       <SeekBar  
           android:id="@+id/seekBar1"  
       android:layout_width="match_parent"  
       android:layout_height="50dp"  
       android:max="3"  
       android: progress="1"   
       android:progressTint="@color/Black"  
       android:progressBackgroundTint="@color/Black"  
       android:thumbTint="@color/Black"  
       android:tickMark="@drawable/tickmark"/>

    If you want to custom SeekBar in Android with labels in bottom. You can use <RelativeLayout> layout and several <TextView> in <LinearLayout>

    Best Regards,

    Leon Lu

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.