How to change default images of CheckBox

Question

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 ?

score 146 · Accepted Answer · edited Mar 02 '16 at 22:50

146

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

edited Mar 02 '16 at 22:50

Ads

6,681
12
47
72

answered Oct 16 '11 at 11:12

A.Quiroga

5,704
6
37
58

I have to programmatically gen checkbox how do I use custom checkBox anyone has an idea? – UmAnusorn May 13 '14 at 06:01
If I do on the Checkbox : android:state_checked="false" by default it doesn't work – Laurent Russier Mar 03 '15 at 14:48
How to set padding for this drawable? – Ulphat Jun 05 '15 at 14:49
how to give padding to this image? – Rasel Jun 25 '15 at 08:54
1

Nice and clean, +1. Could someone by any chance provide an answer that would include the transition flashing effect that android default checkboxes have? I thought maybe the "android:state_pressed" or "android:state_focused" attributes could be used so I played around with them, but without any luck. – Fat Shogun Dec 06 '15 at 13:03

Blackbelt · Answer 2 · 2011-10-16T11:14:20.900

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

android:background doesn't run with the checkbutton image , it puts another image on the background view . — A.Quiroga, Oct 16 '11 at 11:13

score 4 · Answer 3 · answered Oct 16 '11 at 12:29

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!

score 0 · Answer 4 · answered Feb 05 '18 at 15:25

You can use selector in xml, which is used to change the image of checkbox dynamically according to its checked state.

For example:

<item android:drawable="@drawable/ic_linkedin" android:state_checked="true" />
<item android:drawable="@drawable/ic_linkedin_disabled" android:state_checked="false" />

In the following file, if the checkbox is checked, it will set the ic_linkedin icon and if the checkbox is unchecked, it will set the ic_linkedin_disabled icon.

How to change default images of CheckBox

4 Answers4

Linked

Related