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

Question

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

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

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.

Answer 1

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.

Answer 2

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.