如何在Android Studio中创建带图标变色效果的自定义ToggleButton

不需要自定义View、不需要引入第三方重型库，用原生+Material组件就能1:1还原效果，同时完整保留ToggleButton所有基础功能。

核心实现思路 #

参考图的控件是胶囊形圆角切换按钮，核心特征是：

• 高度1/2的圆角实现完全胶囊轮廓
• 选中/未选中状态自动切换背景色、文字颜色、图标颜色
• 支持点击切换、状态监听、代码控制选中状态，和原生ToggleButton行为完全一致

具体实现步骤 #

1. 前置依赖 #

确保模块的build.gradle中引入了Material组件库（目前绝大多数Android项目默认已经集成）：

implementation 'com.google.android.material:material:1.9.0'

2. 编写状态选择器资源 #

首先在res/color目录下新建文字/图标颜色选择器toggle_color_selector.xml，实现选中/未选中的颜色自动切换：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FFFFFF" android:state_checked="true" />
    <item android:color="#666666" android:state_checked="false" />
</selector>

再在res/color目录下新建背景颜色选择器toggle_bg_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2196F3" android:state_checked="true" />
    <item android:color="#F5F5F5" android:state_checked="false" />
</selector>

如果需要未选中状态带描边，直接把背景选择器替换为drawable类型的selector，给未选中状态的shape添加stroke属性配置描边宽度和颜色即可。

3. 布局中引入控件 #

直接使用MaterialButton开启checkable模式即可，不需要写任何自定义控件逻辑：

<com.google.android.material.button.MaterialButton
    android:id="@+id/toggle_button"
    android:layout_width="wrap_content"
    android:layout_height="36dp"
    android:paddingHorizontal="16dp"
    android:text="标签文字"
    android:textSize="14sp"
    app:icon="@drawable/your_icon" <!-- 替换为你自己的图标资源 -->
    app:iconPadding="6dp"
    app:cornerRadius="18dp" <!-- 数值设为控件高度的1/2，实现完美胶囊效果 -->
    app:backgroundTint="@color/toggle_bg_selector"
    android:textColor="@color/toggle_color_selector"
    app:iconTint="@color/toggle_color_selector"
    android:checkable="true"
    app:rippleColor="@android:color/transparent" />

4. 代码中使用 #

控件完全兼容原生ToggleButton的所有API，用法和原生控件没有区别：

// 设置选中状态
toggle_button.isChecked = true
// 获取当前选中状态
val isChecked = toggle_button.isChecked
// 监听状态变化
toggle_button.setOnCheckedChangeListener { buttonView, isChecked ->
    // 处理状态切换后的逻辑
}

效果调整说明 #

• 调整cornerRadius、paddingHorizontal、iconPadding、textSize参数，可以1:1匹配参考图的尺寸比例
• 如果不想依赖Material组件，可以继承原生AppCompatToggleButton，手动在onDraw方法中绘制圆角背景、同步图标和文字的状态颜色，只是实现成本更高，效果和上述方案完全一致

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