设置buttonTint后Checkbox涟漪与勾选动画异常问题求助

未设置buttonTint属性时，Checkbox的涟漪效果和勾选动画显示正常、位置准确；但一旦通过buttonTint设置颜色，所有动画出现错乱。

效果对比：

• 默认颜色效果：涟漪和勾选动画位置准确，显示正常
• 设置buttonTint后的效果：动画位置偏移、显示错乱

对应的布局代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginEnd="25dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="3dp"
        style="@style/Widget.Material3.CardView.Elevated">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/card_gradient"
            android:padding="10dp">

            <CheckBox
                android:id="@+id/checkbox2"
                android:buttonTint="@color/green_300_org"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_centerInParent="true"
                android:layout_marginStart="0dp"
                android:layout_marginEnd="10dp"
                android:layout_toStartOf="@+id/TEXT"
                android:checked="false"
                android:clickable="true"
                android:focusable="true" />

            <TextView
                android:id="@+id/TEXT"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/edit_Image"
                android:layout_alignBottom="@+id/edit_Image"
                android:layout_marginTop="-3.5dp"
                android:layout_marginEnd="20dp"
                android:layout_marginBottom="-3.5dp"
                android:layout_toStartOf="@+id/edit_Image"
                android:gravity="center_vertical"
                android:text="@string/lorem_ipsum_dolor_sit_amet_consectetur"
                android:textSize="20sp" />

            <ImageView
                android:id="@+id/done_Image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/checkbox2"
                android:layout_alignBottom="@+id/checkbox2"
                android:layout_alignParentEnd="true"
                android:layout_marginTop="0dp"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="0dp"
                android:clickable="true"
                android:contentDescription="@string/done"
                android:focusable="true"
                app:srcCompat="@drawable/ic_baseline_check_24"
                tools:ignore="TouchTargetSizeCheck" />

            <ImageView
                android:id="@+id/edit_Image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/done_Image"
                android:layout_alignBottom="@+id/done_Image"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="0dp"
                android:layout_toStartOf="@+id/done_Image"
                android:clickable="true"
                android:contentDescription="@string/edit"
                android:focusable="true"
                android:foregroundTint="#F65454"
                app:srcCompat="@drawable/ic_baseline_edit_24"
                tools:ignore="TouchTargetSizeCheck" />
        </RelativeLayout>
    </com.google.android.material.card.MaterialCardView>
</RelativeLayout>

解决方案 #

方案1：替换为MaterialCheckBox #

原生CheckBox设置buttonTint时易出现动画偏移，改用Material库的MaterialCheckBox可解决：

<com.google.android.material.checkbox.MaterialCheckBox
    android:id="@+id/checkbox2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_centerInParent="true"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="10dp"
    android:layout_toStartOf="@+id/TEXT"
    android:checked="false"
    android:clickable="true"
    android:focusable="true"
    app:buttonTint="@color/green_300_org" />

方案2：通过主题样式设置颜色 #

在styles.xml中定义自定义样式：

<style name="CustomCheckBoxStyle" parent="Widget.Material3.CompoundButton.CheckBox">
    <item name="buttonTint">@color/green_300_org</item>
</style>

布局中引用该样式：

<CheckBox
    android:id="@+id/checkbox2"
    style="@style/CustomCheckBoxStyle"
    <!-- 其他属性保持不变 -->
    />

方案3：调整布局定位方式 #

移除android:layout_centerInParent="true"属性，改用其他布局方式实现居中，比如用LinearLayout配合gravity，或通过layout_margin手动调整位置，避免该属性与buttonTint的渲染逻辑冲突。

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