如何修改Checkbox的勾选标记颜色与边框颜色

核心需求 #

需要实现4种不同样式的Checkbox，重点解决两个问题：

• 修改Checkbox的勾选标记颜色
• 修改Checkbox的边框颜色

之前尝试用android:buttonTint="#ffffff"仅能修改背景色，无法满足样式需求。

实现方案 #

方法1：通过Drawable资源自定义样式 #

步骤1：创建Checkbox状态选择器

在res/drawable目录下新建checkbox_selector.xml，定义勾选/未勾选状态的边框、背景样式：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 勾选状态 -->
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#FF4081" />
            <solid android:color="#FFE8F5" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <!-- 未勾选状态 -->
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#9E9E9E" />
            <solid android:color="#FFFFFF" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</selector>

步骤2：创建自定义勾选标记

在res/drawable目录下新建check_mark.xml，定义勾选标记的颜色和形状：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FF4081"
        android:pathData="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
</vector>

步骤3：布局中关联资源

在布局文件中配置Checkbox，隐藏默认按钮并绑定自定义资源：

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@null"
    android:background="@drawable/checkbox_selector"
    android:drawableEnd="@drawable/check_mark"
    android:drawablePadding="8dp"
    android:padding="8dp" />

方法2：使用Material Components Checkbox（推荐） #

如果项目基于Material Design，可直接通过属性快速配置：

<com.google.android.material.checkbox.MaterialCheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:strokeColor="@color/checkbox_stroke"
    app:checkedIconTint="@color/checkbox_check_color"
    app:uncheckedIconTint="@color/checkbox_uncheck_stroke" />

在res/values/colors.xml中定义对应颜色：

<color name="checkbox_stroke">#FF4081</color>
<color name="checkbox_check_color">#FFFFFF</color>
<color name="checkbox_uncheck_stroke">#9E9E9E</color>

多样式扩展 #

要实现4种不同样式，只需复制上述Drawable文件，修改颜色、圆角、线条粗细等属性，再为不同Checkbox分别引用对应资源即可。

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