How to apply custom image to checkbox in android

Question

I\'m trying to apply custom image to checkbox in android, for this I create an check_custom.xml file in which I define custom image for different states of chec

Answer 1

<item android:drawable="@drawable/ON" android:state_checked="false"/>
<item android:drawable="@drawable/OFF" android:state_checked="true"/>
<item android:drawable="@drawable/ON"/>

Answer 2

Custom checkbox in android Suppose there are two image resources that draw check and uncheck states: and with the names drawable / checkbox_empty and drawable / checkbox_check, we can create a selector as follows: drawable/checkbox_custome.xml

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

layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="example.javatpoint.com.customcheckbox.MainActivity">
 <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New CheckBox"
        android:id="@+id/checkBox"
  android:button="@drawable/checkbox_custome"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="46dp" />
  </RelativeLayout>

Answer 3

Salman, set android:button instead of android:background. See also Custom checkbox image android

Answer 4

I didn´t like the appearance of the checkbox default image when the background layout was dark, so I changed it using a xml selector in order to have a white background in the button.

The selector is needed in android:button="@drawable/selector_check"

                 <CheckBox
                            android:id="@+id/checkBox1"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:gravity="left"
                            android:text="Show password"
                            android:textColor="@color/white"
                            android:button="@drawable/selector_check"
                            >

And the following is the content of "drawable/selector_check.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="@android:drawable/checkbox_on_background" /> <!-- checked --> 
          <item android:state_checked="false" 
             android:drawable="@android:drawable/checkbox_off_background" /> <!-- unchecked-->
          </selector>

And this is the result:

Answer 5

Copy the btn_check.xml from android-sdk/platforms/android-#/data/res/drawable to your project's drawable folder and change the 'on' and 'off' image states to your custom images.

Then your xml will just need android:button="@drawable/btn_check"

<CheckBox
    android:button="@drawable/btn_check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true" />

If you want to use different default android icons, you can use android:button="@android:drawable/..."