How to change default images of CheckBox

I am using ListView and for every row I have row_item.xml and I inflate that in code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <CheckBox
        android:id="@+id/chk"
        android:layout_alignParentLeft="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/txtChoice"
        android:textColor="#FF0000"
        android:text="TEST"
        android:layout_toRightOf="@id/chk"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" /> 
</RelativeLayout>

How to change that checkBox use another custom_1 image when is checked and another custom_2 image when is unchecked ?

Solution 1:

Drawable customdrawablecheckbox.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/unchecked_drawable" />
     <item android:state_checked="true" android:drawable="@drawable/checked_drawable" />
     <item android:drawable="@drawable/unchecked_drawable" /> <!-- default state -->
</selector>

yourcheckbox xml:

<CheckBox
    android:id="@+id/chk"
    android:button="@drawable/customdrawablecheckbox"
    android:layout_alignParentLeft="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Solution 2:

checkbox is a button, so you can provide your own drawable with check uncheck state and it as checkbox background. For instance

<?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/yourdrawable1" />
<item android:state_checked="true" android:drawable="@drawable/yourdrawable2" />
<item android:drawable="@drawable/yourdrawable1" /> <!-- default -->
 </selector>

and put this in a file.xml in your drawable folder. In your checkbox:

  <CheckBox
    android:button="@drawable/file"
    android:id="@+id/chk"
    android:layout_alignParentLeft="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Solution 3:

Its pretty easy :) First you need to create a CustomCheckBox class which will extend CheckBox and override the onDraw(Canvas canvas) method:

public class CustomCheckBox extends CheckBox {
private final Drawable buttonDrawable;

public CustomCheckBox(Context context, AttributeSet set) {
    super(context, set);
    buttonDrawable = getResources().getDrawable(R.drawable.custom_check_box);
    try {
        setButtonDrawable(android.R.color.transparent);
    } catch (Exception e) {
        // DO NOTHING
    }
    setPadding(10, 5, 50, 5);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    buttonDrawable.setState(getDrawableState());

    final int verticalGravity = getGravity() & Gravity.VERTICAL_GRAVITY_MASK;
    final int height = buttonDrawable.getIntrinsicHeight();
    if (buttonDrawable != null) {
        int y = 0;

        switch (verticalGravity) {
        case Gravity.BOTTOM:
            y = getHeight() - height;
            break;
        case Gravity.CENTER_VERTICAL:
            y = (getHeight() - height) / 2;
            break;
        }

        int buttonWidth = buttonDrawable.getIntrinsicWidth();
        int buttonLeft = getWidth() - buttonWidth - 5;
        buttonDrawable.setBounds(buttonLeft, y, buttonLeft + buttonWidth, y + height);
        buttonDrawable.draw(canvas);
    }
}
}

Also create your selector named custom_check_box in your drawable folder:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_window_focused="false" 
        android:drawable="@drawable/btn_check_on" />
    <item android:state_checked="false" android:state_window_focused="false"
        android:drawable="@drawable/btn_check_off" />
    <item android:state_checked="true" android:state_pressed="true"
        android:drawable="@drawable/btn_check_on" />    
    <item android:state_checked="false" android:state_focused="true"
        android:drawable="@drawable/btn_check_off" />
    <item android:state_checked="false" android:drawable="@drawable/btn_check_off" />
    <item android:state_checked="true" android:drawable="@drawable/btn_check_on" />
</selector>

And use your custom icons/imgs in the XML above for all three states (focused/pressed/default)

Use the custom component in your XML like this :

<*package + class path*.CustomCheckBox   // example com.mypackage.ui.CustomCheckBox if your project is named "mypackage" and the class is in the "ui" folder
            android:text="@string/text"
            android:checked="false" android:layout_width="fill_parent"
            android:id="@+id/myCheckbox" android:layout_height="wrap_content"/>

and java :

private CustomCheckBox mCheckbox;
mCheckbox = (CustomCheckBox) findviewbyid(R.id.myCheckbox);

It works because I used it both ways :) And with some tweaks it works for RadioButtons too the same way. Happy coding!