1

I have android material range slider to select price range between two values. But I encountered a design issue that whenever two thumbs are brought closer to select a closer range of value, its label-text located at top of thumb overlaps. Problem statement

  <com.google.android.material.slider.RangeSlider
                android:id="@+id/range_slider_price"
                style="@style/Widget.App.Slider"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/dimen_114dp"
                android:stepSize="5000"
                android:valueFrom="0"
                android:valueTo="100000"
                app:haloRadius="0dp"
                app:labelBehavior="visible"
                app:layout_constraintEnd_toStartOf="@+id/guidelineEnd"
                app:layout_constraintStart_toStartOf="@+id/guidelineStart"
                app:layout_constraintTop_toBottomOf="@+id/tv_title"
                app:thumbColor="@color/white"
                app:thumbRadius="@dimen/dimen_12dp"
                app:thumbStrokeColor="@color/contact_us_text_color"
                app:thumbStrokeWidth="2dp"
                app:tickVisible="false"
                app:trackColorActive="@color/contact_us_text_color"
                app:trackColorInactive="@color/grey_200"
                app:trackHeight="@dimen/dimen_4dp"
                app:values="@array/initial_price_range_value" />

I have tried to set custom styles, override material design xml but couldn't find solution. How do I prevent label text from overlapping? Minimum Separation is not what i am looking for as it doesn't fit project requirement

Sheershak
  • 39
  • 6

1 Answers1

0

Adjust the distance of two ranges by setting the value for minimum separation using RangeSlider.setMinSeparation method dynamically depending on the range digits.

Or you can set it in the xml in dp for example for 40dp set it as following.

<com.google.android.material.slider.RangeSlider
    android:id="@+id/range_slider_price"
    style="@style/Widget.App.Slider"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/dimen_114dp"
    android:stepSize="5000"
    android:valueFrom="0"
    android:valueTo="100000"
    app:minimumSeparation="40dp" />

If you want to set it dynamically using setMinSeparation, consider using setMinSeparationValue instead since you define the stepSize. Using first in this case may throw an illegal state exception.

Kozmotronik
  • 2,080
  • 3
  • 10
  • 25
  • It doesn't solve my problem because the requirement doesnot allow minimum separated to be enabled. So i need it without any separation restriction – Sheershak Jul 27 '22 at 10:01
  • You should've mentioned about that in your question. – Kozmotronik Jul 27 '22 at 10:03
  • I forgot that to mention. I have updated now. If you have any solutions or approach, Kindly help this out. – Sheershak Jul 27 '22 at 10:04
  • Well, in this case you either customize the `Tooltip` style or implement your own custom slider. Have you tried anything with tooltip customization? – Kozmotronik Jul 27 '22 at 10:28
  • Tooltip customization only provides with text appearance and background. It doesn't provide anything with what i expect. – Sheershak Jul 27 '22 at 11:05
  • Yes you're right. I thought of rotating the text so that it seems vertical but does not seem to be possible with styling the tooltip. Does your requirement allow to show the values without using the tooltip? – Kozmotronik Jul 27 '22 at 11:18
  • Yes, i dont specifically want a tooltip. I just want text to be shown at top of those two slider thumbs. – Sheershak Jul 27 '22 at 15:11