androidandroid-layoutandroid-drawableandroid-stylesandroid-checkbox

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


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

enter image description here

And in the actual app

enter image description here

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


Solution

  • 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" />