如何在Java/Kotlin中缩小Android Switch的Thumb尺寸？

问题说明 #

我制作了4个SVG文件，2个作为Switch的Thumb（滑块），另外2个对应ON/OFF状态的Track（轨道）。应用到Switch组件后，Track原本显示正常，但Thumb会迫使Track适配自身尺寸（比如Thumb高度设为20dp时，Track高度也变成20dp），导致两个问题：

• SVG轨道的形状被破坏
• 显示效果不符合预期

我需要Thumb尺寸更小，能适配在Track内部，目标效果是滑块在轨道内有合适的留白，而非撑满轨道。当前实际效果为轨道被滑块拉伸变形。

当前实现代码 #

Switch布局代码 #

<Switch
    android:id="@+id/nightLight"
    android:layout_centerHorizontal="true"
    android:track="@drawable/night_light_track"
    android:thumb="@drawable/night_light_thumb"
    android:checked="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

相关Drawable文件 #

night_light_thumb（滑块选择器）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false">

        <shape android:shape="oval">
            <solid android:color="@color/C"/>
            <size android:height="32dp" android:width="32dp"/>
        </shape>

    </item>

    <item android:state_checked="true">

        <shape android:shape="oval">
            <solid android:color="#4E505F"/>
            <size android:height="32dp" android:width="32dp"/>
        </shape>

    </item>
</selector>

night_light_track（轨道选择器）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false"
        android:drawable="@drawable/light_track"/>

    <item android:state_checked="true"
        android:drawable="@drawable/night_track"/>
</selector>

night_track（夜间模式轨道SVG）

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="72dp"
    android:height="32dp"
    android:viewportWidth="72"
    android:viewportHeight="32">
  <group>
    <clip-path
        android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"/>
    <path
        android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"
        android:fillColor="#2E2F38"/>
  </group>
  <group>
    <clip-path
        android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"/>
    <path
        android:pathData="M16.5,10.2c-1.8,1.3 -3,3.4 -3,5.8c0,3.9 3.1,7 7,7c2.4,0 4.5,-1.2 5.8,-3c-0.3,0 -0.5,0 -0.8,0c-5,0 -9,-4 -9,-9C16.5,10.7 16.5,10.5 16.5,10.2zM11.5,16c0,-4 2.6,-7.3 6.1,-8.5l1.3,1.3c-0.2,0.7 -0.4,1.5 -0.4,2.3c0,3.9 3.1,7 7,7c0.8,0 1.5,-0.1 2.3,-0.4l1.3,1.3c-1.2,3.5 -4.6,6.1 -8.5,6.1C15.5,25 11.5,21 11.5,16z"
        android:strokeAlpha="0.7"
        android:fillColor="#4B5EFC"
        android:fillType="evenOdd"
        android:fillAlpha="0.7"/>
  </group>
</vector>

light_track（日间模式轨道SVG）

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="72dp"
    android:height="32dp"
    android:viewportWidth="72"
    android:viewportHeight="32">
  <group>
    <clip-path
        android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"/>
    <path
        android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"
        android:fillColor="#FFFFFF"/>
  </group>
  <group>
    <clip-path
        android:pathData="M56,0H16C7.2,0 0,7.2 0,16l0,0c0,8.8 7.2,16 16,16h40c8.8,0 16,-7.2 16,-16l0,0C72,7.2 64.8,0 56,0z"/>
    <path
        android:pathData="M51,6v1v2v1h2V9V7V6H51zM62,15h-1h-2h-1v2h1h2h1V15zM45,15h1v2h-1h-2h-1v-2h1H45zM51,22v1v2v1h2v-1v-2v-1H51zM46.3,23.1l-0.7,0.7l-1.4,-1.4l0.7,-0.7l1.4,-1.4l0.7,-0.7l1.4,1.4l-0.7,0.7L46.3,23.1zM56.9,12.5l0.7,-0.7l1.4,-1.4l0.7,-0.7l-1.4,-1.4l-0.7,0.7l-1.4,1.4l-0.7,0.7L56.9,12.5zM44.9,10.3l-0.7,-0.7l1.4,-1.4l0.7,0.7l1.4,1.4l0.7,0.7l-1.4,1.4l-0.7,-0.7L44.9,10.3zM55.5,20.9l0.7,0.7l1.4,1.4l0.7,0.7l1.4,-1.4l-0.7,-0.7l-1.4,-1.4l-0.7,-0.7L55.5,20.9zM54,16c0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2s0.9,2 2,2S54,17.1 54,16zM52,12c2.2,0 4,1.8 4,4s-1.8,4 -4,4s-4,-1.8 -4,-4S49.8,12 52,12z"
        android:strokeAlpha="0.7"
        android:fillColor="#4B5EFC"
        android:fillType="evenOdd"
        android:fillAlpha="0.7"/>
  </group>
</vector>

尝试过的方案 #

我曾尝试将Thumb尺寸修改为与Track一致，避免轨道形状被破坏，但仍无法实现Thumb在Track内缩小显示的效果。

解决方法 #

1. 固定Switch的宽高为Track的尺寸 #

Switch默认会取Thumb和Track中较大的尺寸作为自身大小，直接指定Switch的宽高为Track的实际尺寸（72dp宽，32dp高），强制轨道保持原形状：

<Switch
    android:id="@+id/nightLight"
    android:layout_centerHorizontal="true"
    android:track="@drawable/night_light_track"
    android:thumb="@drawable/night_light_thumb"
    android:checked="true"
    android:layout_width="72dp"
    android:layout_height="32dp"/>

2. 调整Thumb的尺寸并添加内边距 #

将Thumb的尺寸改小（比如24dp×24dp），同时在Thumb的shape中添加padding，让滑块在轨道内居中且有合适的留白：
修改night_light_thumb：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape android:shape="oval">
            <solid android:color="@color/C"/>
            <size android:height="24dp" android:width="24dp"/>
            <!-- 添加内边距，让滑块在轨道内居中 -->
            <padding android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp"/>
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="oval">
            <solid android:color="#4E505F"/>
            <size android:height="24dp" android:width="24dp"/>
            <padding android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp"/>
        </shape>
    </item>
</selector>

3. 使用android:thumbOffset调整滑块位置（可选） #

如果滑块位置不对，可通过android:thumbOffset属性调整滑块的偏移量，确保在ON/OFF状态下都能正确对齐轨道：

<Switch
    ...
    android:thumbOffset="8dp"/>

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