How to change material slider font

Question

How to change material slider bubble typeface programmatically?

Answer 1

Currently (1.3.0) the only way to define the textAppearance and the font used by the Tooltip in the Slider is with a style:

<style name="App.Slider" parent="@style/Widget.MaterialComponents.Slider">
    <item name="labelStyle">@style/App.Tooltip</item>
</style>

<style name="App.Tooltip" parent="Widget.MaterialComponents.Tooltip">
    <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Tooltip</item>
</style>

If you would like to use a reflection (I discourage it) you have to access to List<TooltipDrawable> labels defined in the BaseSlider class.
Then you can use the methods setTextAppearance or setTextAppearanceResource defined in the TooltipDrawable class

Answer 2

I found this link; what it describes is creating the font in xml and using it programmatically in layouts and widgets.

fonts in xml

The stupid slider does not expose a type face property. Added a slider to the test project, it is a combination of the first answer with code that allows adding a custom slider to a view programmatically.

Any suggestions are welcome. Right now even if I add a slider to a view programmatically the typeface only changes if the style is applied to all sliders. Bummer. My best guess is that the parent view is overriding the custom typeface property.

The method seems to work for other widgets though. I think it would be cool to do it on the fly. Many applications for this type of thing.

style programmatically

sample has a slider that almost works

Answer 3

you must override the material theme for yourslider.

    <style name="Myslider" parent="@style/Widget.MaterialComponents.Slider">
        <item name="labelStyle">@style/My_Tooltip</item>
        <item name="materialThemeOverlay">@style/ThemeOverlay.Slider</item>
        <item name="android:fontFamily">@font/iransans</item>
    </style>

    <style name="My_Tooltip" parent="Widget.MaterialComponents.Tooltip">
        <!-- font for your slider  tooltip -->
        <item name="android:fontFamily">//font</item>
    </style>

    <style name="ThemeOverlay.Slider" parent="">
        <item name="android:fontFamily">@font/iransans</item>
    </style>

Answer 4

According to Gabriele Mariotti answer you can change the Slider Typeface programmatically using a Reflection. You have to access the private field "labels" on BaseSlider to get access to the List of "TooltipDrawable" where you can change each TooltipDrawable using a custom Tooltip TextAppearance.

I have implemented a helper function for that:

    @SuppressLint("RestrictedApi")
    public static void changeSliderTypeFace(Slider slider, @StyleRes int textAppearanceStyleResId){

        try
        {
            Class baseSliderCls = Slider.class.getSuperclass();
            if (baseSliderCls != null) {
                Field privateLabelsField = baseSliderCls.getDeclaredField("labels");
                privateLabelsField.setAccessible(true);
                List<TooltipDrawable> tooltipDrawableList = (List<TooltipDrawable>) privateLabelsField.get(slider);
                if(tooltipDrawableList!=null && tooltipDrawableList.size()>0)
                {
                    for(TooltipDrawable tooltipDrawable : tooltipDrawableList){
                        tooltipDrawable.setTextAppearance(new TextAppearance(slider.getContext(), textAppearanceStyleResId));
                    }
                }
            }
        }
        catch (NoSuchFieldException | IllegalAccessException e) {
            e.printStackTrace();
        }
    }

and you can use it like below:

Slider slider = findViewById(R.id.slider);
changeSliderTypeFace(slider, R.style.CustomTooltipTextAppearance);

where R.style.CustomTooltipTextAppearance is your custom Tooltip TextAppearance style defined in your styles.xml like below:

<style name="CustomTooltipTextAppearance" parent="TextAppearance.MaterialComponents.Tooltip">
        <item name="android:textColor">@android:color/white</item>
        <item name="fontFamily">@font/roboto_mono</item>
        <item name="android:fontFamily">@font/roboto_mono</item>
</style>

Result: