如何修改Android Material Design RangeSlider的滑块、滑轨颜色及尺寸

实现方案 #

你之前样式不生效大概率是没有正确继承Material Components提供的Slider基础样式，按以下步骤修改即可： #

步骤1：自定义专属样式

在res/values/styles.xml中添加自定义样式，所有样式配置都在这里统一声明：

<style name="CustomRangeSliderStyle" parent="Widget.MaterialComponents.Slider">
    <!-- 滑轨样式配置 -->
    <item name="trackColorActive">@color/你要的激活状态滑轨颜色</item>
    <item name="trackColorInactive">@color/你要的未激活状态滑轨颜色</item>
    <item name="trackHeight">5dp</item>

    <!-- 滑块thumb样式配置 -->
    <item name="thumbColor">@color/你要的滑块颜色</item>
    <item name="thumbRadius">8dp</item> <!-- 调整此数值即可缩小滑块，默认值通常为12dp -->
</style>

如果需要适配滑块按下、禁用等状态，可以额外添加thumbColorPressed、thumbColorDisabled、trackColorInactiveDisabled等属性。 #

步骤2：给布局中的RangeSlider绑定样式

注意要使用style属性绑定，不要用android:theme，同时调整layout_height避免滑块被裁剪：

<com.google.android.material.slider.RangeSlider
    android:id="@+id/dataSlider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:valueFrom="0.0"
    android:valueTo="100.0"
    android:visibility="visible"
    app:values="@array/initial_slider_values"
    style="@style/CustomRangeSliderStyle"
/>

常见注意事项

• 不要把android:layout_height设置为小于滑块直径的数值，否则滑块会被父布局裁切，看起来尺寸不符合预期
• 如果已经在App全局主题中覆盖了Slider的默认样式，需要确认自定义样式的属性优先级更高，没有被全局样式覆盖

内容的提问来源于stack exchange，提问作者Malo