Checkbox ripple and check issues after changing buttonTint

Issue

I'm facing a really weird issue and there seems to be no solution on the web. Hope you can help me :). When there is no buttonTint present on the checkbox the animation is fine; the ripple is in the right place and the check is in the correct position. However, if I try to color the checkbox using buttonTint everything is messed up.

Default color Colored with 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>

Solution

Ended up changing buttonTint from:

android:buttonTint="@color/green_300_org"

to:

app:buttonTint="@color/green_300_org"

Answered By - Fog