Material 3：如何在style.xml中调整带Selector的Switch图标尺寸

我尝试通过thumbIcon给MaterialSwitch控件添加图标时遇到了尺寸异常问题：使用不带selector的单个drawable时，图标显示正常尺寸；但使用带selector的drawable（如default_switch_icon）时，图标尺寸会过大（超过16dp）。我在style.xml中尝试设置checkedIconSize、iconSize等多个属性均无效，希望实现Switch选中和未选中状态显示不同图标且尺寸适配16dp的效果。

相关代码 #

Material Switch 布局代码

<com.google.android.material.materialswitch.MaterialSwitch
    android:id="@+id/SFilter_WorldWideValue"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:checked="true"
    android:fontFamily="@font/roboto_medium"
    android:text="@string/search"
    android:textAllCaps="true"
    android:textColor="@color/Text_Base_White"
    android:textIsSelectable="false"
    android:textSize="16sp"
    <!-- 使用单个drawable时尺寸正常 -->
    <!-- app:thumbIcon="@drawable/icon_check" -->
    <!-- 使用selector drawable时尺寸异常 -->
    app:thumbIcon="@drawable/default_switch_icon"
    tools:ignore="TouchTargetSizeCheck" />

style.xml 代码

<style name="Theme.Default" parent="Theme.Material3.Light.NoActionBar">
    ...
    <item name="materialSwitchStyle">@style/Switch.Default</item>
</style>
    
<style name="Switch.Default" parent="Widget.Material3.CompoundButton.MaterialSwitch">
    <item name="thumbIcon">@drawable/default_switch_icon</item>
    <!-- 以下设置均无效 -->
    <item name="checkedIconSize">16dp</item>
    <item name="selectorSize">16dp</item>
    <item name="iconSize">16dp</item>
    <item name="drawableSize">16dp</item>
    <item name="itemIconSize">16dp</item>
    <item name="maxImageSize">16dp</item>
    <item name="materialThemeOverlay">@style/Switch.Colors.Default</item>
</style>

<style name="Switch.Colors.Default" parent="">
    ...
    ...
</style>

drawable/default_switch_icon.xml 代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:state_checked="true"
        android:drawable="@drawable/icon_check"/>
    <item
        android:state_checked="false"
        android:drawable="@drawable/icon_close"/>
</selector>

解决方案 #

1. 使用正确的尺寸控制属性

Material3的MaterialSwitch控制拇指图标的正确属性是thumbIconSize，替换style中无效的属性：

<style name="Switch.Default" parent="Widget.Material3.CompoundButton.MaterialSwitch">
    <item name="thumbIcon">@drawable/default_switch_icon</item>
    <!-- 正确设置图标尺寸 -->
    <item name="thumbIconSize">16dp</item>
    <item name="materialThemeOverlay">@style/Switch.Colors.Default</item>
</style>

2. 强制约束Selector中Drawable的尺寸

如果设置thumbIconSize后仍无效，可在Selector的每个Item中用<scale>标签包裹Drawable，强制指定目标尺寸：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <scale
            android:drawable="@drawable/icon_check"
            android:scaleHeight="100%"
            android:scaleWidth="100%"
            android:targetHeight="16dp"
            android:targetWidth="16dp"/>
    </item>
    <item android:state_checked="false">
        <scale
            android:drawable="@drawable/icon_close"
            android:scaleHeight="100%"
            android:scaleWidth="100%"
            android:targetHeight="16dp"
            android:targetWidth="16dp"/>
    </item>
</selector>

3. 确保Drawable本身尺寸适配

如果使用的是矢量图（VectorDrawable），直接在图标文件中设置宽高为16dp：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <!-- 矢量路径内容 -->
</vector>

如果是位图，建议转换为矢量图，或使用<bitmap>标签指定尺寸：

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/icon_check"
    android:width="16dp"
    android:height="16dp"
    android:gravity="center"/>

4. 更新Material Components库版本

确保项目依赖的Material Components库为最新稳定版，旧版本可能存在属性不生效的bug：

implementation 'com.google.android.material:material:1.11.0' // 替换为最新版本

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