Android: How to change default color of custom checkboxes?

I am setting up a custom checkbox, but I can't seem to find a way to change its default/system color.

Here is the code of my checkbox:

<CheckBox
            android:id="@+id/item_checkbox"
            android:layout_width="30dp"
            android:layout_height="86dp"
            android:layout_marginStart="8dp"
            android:button="@drawable/custom_checkbox"
            android:checked="true"
            app:backgroundTint="@null"
            app:buttonTint="@null"
            android:scaleX="0.6"
            android:scaleY="0.6"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

And this is the code of custom_checkbox.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="false"
        android:drawable="@drawable/unchecked" />
</selector>

And this is the code for checked.xml:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <corners android:radius="1dp" />
                    <stroke
                        android:width="1dp"
                        android:color="#777" />
                    <gradient
                        android:startColor="#990000"
                        android:centerColor="#990000"
                        android:endColor="#990000"
                        android:angle="270" />
                    <size
                        android:width="30dp"
                        android:height="30dp" />
                </shape>
            </item>

            <item
                android:width="8dp"
                android:height="2dp"
                android:top="20dp"
                android:left="6dp">
                <rotate
                    android:fromDegrees="45">
                    <shape android:shape="rectangle">
                        <solid android:color="#fff"/>
                    </shape>
                </rotate>
            </item>

            <item
                android:width="19dp"
                android:height="2dp"
                android:top="16dp"
                android:left="9dp">
                <rotate
                    android:fromDegrees="-45">
                    <shape android:shape="rectangle">
                        <solid android:color="#fff"/>
                    </shape>
                </rotate>
            </item>
        </layer-list>
    </item>

</selector>

And finally, this is the code of unchecked.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <corners android:radius="1dp" />
    <stroke
        android:width="1dp"
        android:color="#777" />
    <gradient
        android:startColor="#990000"
        android:centerColor="#990000"
        android:endColor="#990000"
        android:angle="270" />
    <size
        android:width="30dp"
        android:height="30dp" />
</shape>

But instead of using the custom red color, I always get them displayed with the default colors as shown below (despite the shape appears to be correctly displayed as a circle):

Checked:

Unchecked:

Any ideas?