androidkotlinmaterial-components-androidrangesliderandroid-slider

Add a custom label to material range slider


I'm using Android material components library's latest (1.3.0-alpha01) version to display a range slider (slider with two thumbs). Now need to customize the labels and always show each thumb's value over the thumbs in TextView (without any drawables or default flags, see attached picture). How can I make labelBehavior always visible and show the thumb values in custom view when user drags them? enter image description here


Solution

  • To change the background color of the label you can use a custom style:

        <com.google.android.material.slider.RangeSlider
            style="@style/Myslider"
            ...>
    

    with:

    <style name="Myslider" parent="@style/Widget.MaterialComponents.Slider">
        <item name="labelStyle">@style/My_Tooltip</item>
        <item name="materialThemeOverlay">@style/ThemeOverlay.Slider</item>
    </style>
    
    <style name="My_Tooltip" parent="Widget.MaterialComponents.Tooltip">
        <!-- background color of the Tooltip -->
        <item name="backgroundTint">@color/...</item>
    </style>
    
    <style name="ThemeOverlay.Slider" parent="">
        <!-- color used by the text in the Tooltip -->
        <item name="colorOnPrimary">@color/...</item>
    </style>
    

    To customize the value in the label you can a LabelFormatter.
    Something like:

    RangeSlider slider = findViewById(R.id.slider);
    slider.setLabelFormatter(new LabelFormatter() {
      @NonNull
      @Override
      public String getFormattedValue(float value) {
        //It is just an example
        if (value == 3.0f)
          return "TEST";
        return String.format(Locale.US, "%.0f", value);
      }
    });
    

    enter image description here

    About the behavior of the label there are only these values (with 1.2.0-beta01 and 1.3.0-alpha01):

    Currently it seems impossible to show always the label.

    You can set the label behavior using the setLabelBehavior method or the labelBehavior in the layout or in a style.

    <com.google.android.material.slider.RangeSlider
            app:labelBehavior="withinBounds"/>
    

    If you want to change the shape of the label you can check this answer.