Android CheckBox gets filled in with solid color when setting button attribute

Question

rather simple situation. I have a checkbox, I set the button attribute to my selector with two drawables for checked and unchecked. It looks proper in the editor but when I actually launch the app it gets filled in with solid color.

In the editor

And in the actual app

This is the XML

     <CheckBox
            android:id="@+id/selected_checkBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:button="@drawable/checkbox_states"
            android:clickable="false"
            android:checked="false"
            android:visibility="invisible" />

This is the checkbox_states drawable

<?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_checkbox_checked"/>
    <item android:state_checked="false" android:drawable="@drawable/ic_checkbox_outline" />
</selector>

The checked

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    >
  <path
      android:pathData="M2,1L22,1A1,1 0,0 1,23 2L23,22A1,1 0,0 1,22 23L2,23A1,1 0,0 1,1 22L1,2A1,1 0,0 1,2 1z"
      android:strokeWidth="2"
      android:fillColor="#EAC752"
      android:strokeColor="#EAC752"/>
  <path
      android:pathData="M6,13L10,17L20,7"
      android:strokeLineJoin="round"
      android:strokeWidth="2"
      android:fillColor="#00000000"
      android:strokeColor="#0E4DA4"
      android:strokeLineCap="round"/>
</vector>

And the unchecked is just a square. I don't have a style or anything of sorts that could cause this issue. But it seems that this is color secondary. So something with AppTheme could be causing this. I am just not sure what

Answer 1

The CheckBox component inherits from a Button View so you can use the android:background attribute to change the checkbox state with a drawable state selector instead of android:button. Example is like below:

 <CheckBox
   android:id="@+id/selected_checkBox"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/checkbox_states"
   android:button="@null"
   app:buttonCompat="@null"
   android:checked="true" />

Answer 2

There was the same problem, but I solved it.
You can use AppCompatCheckBox instead of CheckBox.

<androidx.appcompat.widget.AppCompatCheckBox
            android:id="@+id/selected_checkBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:button="@drawable/checkbox_states"
            android:clickable="false"
            android:checked="false"
            android:visibility="invisible" />

Answer 3

A few features do not work while using simple checkbox or switch. Instead, when we use:

<androidx.appcompat.widget.AppCompatCheckBox>

or

<androidx.appcompat.widget.SwitchCompat> 

all the features do work related to style and visuals.