Android Range Slider Label Overlaps with one another

Question

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.

  <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

Answer 1

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.