How to change background of Android checkBox?

Question

I have android checkBox and the default background is transparent, I want it to be white so I use style:

<style name="BrandedCheckBox" parent="AppTheme">
    <item name="colorAccent">@color/cyan</item>
    <item name="colorControlNormal">@color/text_gray</item>
    <item name="colorControlActivated">@color/cyan</item>
</style>

and set checkBox theme:

<CheckBox
    android:id="@+id/check_payable"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_gravity="center"
    android:theme="@style/BrandedCheckBox"/>

But the result is this: But I want it to to be like this:

Can any one help me on this?

Answer 1

you can use android:button

   <CheckBox
       android:id="@+id/check_box"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:button="@drawable/checkbox_background" />

checkbox_background.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/checkbox_checked" />
<item android:state_checked="false"
    android:drawable="@drawable/checkbox_unchecked" />
</selector>

I'm Using these two images in drawable

Answer 2

Just use a selector drawable defining the exact look you want for each state (the drawables listed in the selector can have transparencies if you need it). Then also ensure you set this in the xml of your checkbox:

android:background="@drawable/checkbox_background"
android:button="@null"

And to avoid some recent bugs of AppCompat Checkbox I recommend you to stick with the good old android.widget.CheckBox (you should use full path to ensure you will not use AppCompat one).

In a short future you will be able to migrate to AppCompatCheckBox from androidX. However at this moment (while I am writing this) it still have bugs with custom backgrounds when running in old api levels. I already reported one here: https://issuetracker.google.com/issues/120865686

I hope my answer is useful for you.

Answer 3

white color code #FFFFFF in your color.xml

<style name="BrandedCheckBox" parent="AppTheme">
    <item name="colorAccent">@color/cyan</item>
    <item name="colorControlNormal">@color/text_gray</item>
    <item name="colorControlActivated">@color/white</item>
</style>