How to customize MaterialCheckBox in android?-CodePudding

I want to make a circular MaterialCheckBox it works perfectly as circular but the color of the circle is changed this is not the color which I set in ic_checked and ic_unchecked. Here is my code. why this is not picking the vector color

XML layout

 <com.google.android.material.checkbox.MaterialCheckBox
            android:id="@ id/selection_box"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:button="@drawable/custom_checkbox"
            />

drawable/custom_checkbox

<?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/ic_checked"/>
    <item
        android:state_pressed="true"
        android:drawable="@drawable/ic_checked"/>
    <item
        android:state_pressed="false"
        android:drawable="@drawable/ic_unchecked"/>
</selector>

drawable/ic_checked

<vector android:height="20dp" android:tint="#F44336"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="20dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ffffff" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>
</vector>

drawable/ic_unchecked

<vector android:height="20dp" android:tint="#FFFFFF"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="20dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M12,2C6.47,2 2,6.47 2,12s4.47,10 10,10 10,-4.47 10,-10S17.53,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
</vector>

CodePudding user response：

The color of the checkbox defaults to ?attr/colorOnSurface (unchecked) and ?attr/colorSecondary (checked) defined in your app theme. If you want to override this behavior, as you might with a custom drawable that should not be tinted, set app:useMaterialThemeColors to false

Try adding this to your checkbox code :

app:useMaterialThemeColors="false"

If that doesn't work then use this :

You have to set a button tint in the Checkbox style. create a new resource file in the color directory and name it button_tint.

button_tint.xml : (set colors of your choice)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#F44336" android:state_checked="true"/>
<item android:alpha="0.38" android:color="@color/white" android:state_enabled="false"/>
<item android:color="@color/white"/>
</selector>

Now in theme.xml add this :

<style name="Widget.App.CheckBox" parent="Widget.MaterialComponents.CompoundButton.CheckBox">
    <item name="buttonTint">@color/button_tint</item>
</style>

At last add this style to your checkbox :

style="@style/Widget.App.CheckBox"

This will apply your custom color on the checkbox.