[Android] Custom style and use of CheckBox

need

on the login page. We need to have a checkbox for the user to tick, agree to our rogue policy and agreement, or not be allowed to use it.

achieve effect

not selected

chosen

We know that the default style of this CheckBox is a square, if it is now changed to a circle, two patterns need to be prepared first.

Create a file
baseline_checked_circle_24.xml
that looks like this

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FFFFFF"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        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>

Create another picture like this
baseline_uncheck_circle_outline_24.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#382D2D"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M16.59,7.58L10,14.17l-3.59,-3.58L5,12l5,5 8,-8zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z" />
</vector>

Create a selector file checkbox_circle.xml

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

We can also create this selector file
checkbox_color_selector.xml
which is the color transform outside the circle

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态下的颜色 -->
    <item android:color="#FFFFFF" android:state_checked="true" />
    <!-- 未选中状态下的颜色 -->
    <item android:color="#382D2D" android:state_checked="false" />
</selector>

in the layout file

        <CheckBox
            android:id="@+id/login_cb"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/dp_20"
            android:background="#00FFFFFF"
            android:button="@drawable/checkbox_circle"
            android:buttonTint="@color/checkbox_color_selector"
            android:checked="true"
            android:paddingStart="@dimen/dp_5"
            android:text="勾选即同意"
            android:textColor="#FFFFFF"
            android:textSize="@dimen/sp_12" />

Inside the Activity

loginCb.setOnCheckedChangeListener {
    
     _, isChecked ->
     if(isChecked){
    
    
     //选中
     }else{
    
    
     //未选中
     }
}