Home > OS >  How to style android studio material slider
How to style android studio material slider

Time:11-07

How can I style the slider, for example change colors for its track and thumb etc using xml?

slider.xml:

    <com.google.android.material.slider.Slider
        android:id="@ id/settingsMission_changeShakeDif_slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:stepSize="20.0"
        android:theme="@style/SliderTheme"
        android:valueFrom="0.0"
        android:valueTo="40.0"
        app:labelBehavior="gone" />

themes.xml

    <style name="SliderTheme" parent="Widget.MaterialComponents.Slider">
        <!-- Add attributes here -->

        <item name="trackColorActive">#238ae6</item>
        <item name="trackColorInactive">#a7bada</item>
        <item name="tickColor">#13161d</item>
        <item name="thumbColor">#238ae6</item>

    </style>

When I do it like this, the color of my slider did not change (it remained the default purple color)

And when I try to run the app and open the bottom sheet dialog that has the slider, the app crashes. I am getting this runtime error too:

Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.AppCompat (or a descendant).

CodePudding user response:

Found this useful article that solved my problem:

https://github.com/material-components/material-components-android/issues/1145

changes made to code:

slider.xml

    <com.google.android.material.slider.Slider
        android:id="@ id/settingsMission_changeShakeDif_slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:stepSize="20.0"
        android:theme="@style/AppTheme"
        android:valueFrom="0.0"
        android:valueTo="40.0"
        app:labelBehavior="gone"
        app:thumbColor="#238ae6"
        app:tickColor="#13161d"
        app:trackColorActive="#238ae6"
        app:trackColorInactive="#a7bada" />


themes.xml

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
  • Related