Search code examples
androidmaterial-uislidermaterial-design

material Slider tooltip color not changing com.google.android.material.slider.Slider


i'm using material Slider https://material.io/components/sliders/android https://developer.android.com/reference/com/google/android/material/slider/Slider

        <com.google.android.material.slider.Slider
        android:id="@+id/range_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stepSize="0.1"
        android:value="0.7"
        android:valueFrom="0.3"
        android:valueTo="1"
        app:labelStyle="@style/Tooltip"
        app:layout_constraintTop_toBottomOf="@id/textView9"
        app:thumbColor="@color/colorAccent"
        app:thumbRadius="8dp"
        app:trackColorActive="@color/colorAccent"
        app:trackColorInactive="#60478FE3" />

and my @style/Tooltip

    <style name="Tooltip" parent="Widget.MaterialComponents.Tooltip">
        <item name="android:background">@color/colorAccent</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorPrimary">@color/colorAccent</item>
        <item name="colorOnPrimary">@color/colorAccent</item>
    </style>

but my tooltip color remains unchanged screenshot attachment


Solution

  • To change the Tooltip background color you have to use the backgroundTint property and to change the Tooltip text color you have to use a custom android:textAppearance style like in the below example:

    <style name="Tooltip" parent="Widget.MaterialComponents.Tooltip">
        <!--This is the Tooltip textAppearance -->
        <item name="android:textAppearance">@style/TextAppearance.Tooltip</item>
        <!--This is the Tooltip Background Color -->
        <item name="backgroundTint">@android:color/holo_orange_light</item>
    </style>
    
    <style name="TextAppearance.Tooltip" parent="TextAppearance.MaterialComponents.Tooltip">
        <!--This is the Tooltip Text Color -->
        <item name="android:textColor">@android:color/holo_blue_light</item>
    </style>
    

    and you can use the above custom Tooltip Style like below:

    <com.google.android.material.slider.Slider
       app:labelStyle="@style/Tooltip"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
    

    Result:

    tooltip_slider_color