30

CheckBox

As you can see in the image above. There are three views on this screenshot.
- The first item is CheckBox with text and having state off.
- The second item is CheckBox without text and having state on.
- The last item is ImageView with src pointing to the drawable image.

The CheckBoxes were customized using android:button.

small checkbox

As I tried using smaller images, all of the checkbox is left-aligned.

Comparing these two images tell me that the default size of the CheckBox seems fixed to certain size until text attribute is large enough to require extending.

There is nothing special in the file as well. See following.

custom_cb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/creditcard_selected" android:state_checked="true" />
    <item android:drawable="@drawable/creditcard"/>

</selector>

layout.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <CheckBox android:id="@+id/cbFalse"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:button="@drawable/custom_cb"
              android:text="" />
    <CheckBox android:id="@+id/cbTrue"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:button="@drawable/custom_cb"
              android:focusable="false"
              android:checked="true"
              android:layout_toRightOf="@id/cbFalse" />
    <ImageView android:id="@+id/imvTrue"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/creditcard"
              android:layout_toRightOf="@id/cbTrue" />
</RelativeLayout>

Is there anyway I can use bigger image for CheckBox while keeping the size as wrap_content? If I set CheckBox layout_width to actual pixel or dp then it display full image but that mean I have to manually check for the size every time it change.

1
  • 2
    Not sure if this is the solution to your problem, but I think it should be android:button="@null" and use the background attribute instead: android:background="@drawable/custom_cb" Apr 18, 2013 at 11:32

6 Answers 6

62

Today I had the same problem (my custom image was cutted on the left side). I fixed it putting:

android:button="@null"
android:background="@drawable/my_custom_checkbox_state.xml"
3
  • 1
    This worked for me, although it does feel like a bug that the CheckBox doesn't respect the size of the android:button drawable when the layout width and height are set to wrap_content..
    – baske
    Dec 3, 2013 at 11:30
  • 2
    Possibly this solution will work differently on different devices Jan 29, 2014 at 9:14
  • 1
    Thx, a lot. I've tried a lot of solutions with custom button drawable, scaledrawable for button and etc, but your soluton works for me! Buggy android( Jul 25, 2014 at 8:46
16

Just use

android:button="@null"
android:background="@null"
android:drawableLeft="your custom selector"
android:drawablePadding="as you need"
android:text="your text"

Thats it.. Its working fine..

0
4

You only have to change your drawable from android:button to android:drawableLeft or android:drawableRight. And set the button to null to not show the default checkbox.

My checkbox looks like this:

<CheckBox
   android:id="@+id/cb_toggle_switch"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:button="@null"
   android:drawableLeft="@drawable/livescore_btn_check" />
2

CheckBox drawables did not work for me at all, android:button and android:background gave completely erratic results and nothing could fix it.

So I wrote my own "custom checkbox".

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Parcel;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import org.apache.commons.lang3.StringUtils;

import butterknife.Bind;
import butterknife.ButterKnife;
import com.example.myapp.R;

/**
 * Created by Zhuinden on 2015.12.02..
 */
public class CustomCheckbox
        extends LinearLayout
        implements View.OnClickListener {
    public CustomCheckbox(Context context) {
        super(context);
        init(null, -1);
    }

    public CustomCheckbox(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, -1);
    }

    @TargetApi(11)
    public CustomCheckbox(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs, defStyleAttr);
    }

    @TargetApi(21)
    public CustomCheckbox(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(attrs, defStyleAttr);
    }

    private void init(AttributeSet attributeSet, int defStyle) {
        TypedArray a = null;
        if(defStyle != -1) {
            a = getContext().obtainStyledAttributes(attributeSet, R.styleable.CustomCheckbox, defStyle, 0);
        } else {
            a = getContext().obtainStyledAttributes(attributeSet, R.styleable.CustomCheckbox);
        }
        defImageRes = a.getResourceId(0, 0);
        checkedImageRes = a.getResourceId(1, 0);
        checked = a.getBoolean(2, false);
        typeface = a.getString(3);
        if(StringUtils.isEmpty(typeface)) {
            typeface = "Oswald-Book.otf";
        }
        text = a.getString(4);
        inactiveTextcolor = a.getInteger(5, android.R.color.black);
        activeTextcolor = a.getInteger(6, android.R.color.red);
        textsize = a.getDimensionPixelSize(7, 0);
        a.recycle();
        setOnClickListener(this);
        if(!isInEditMode()) {
            LayoutInflater.from(getContext()).inflate(R.layout.view_custom_checkbox, this, true);
            ButterKnife.bind(this);
            imageView.setImageResource(checked ? checkedImageRes : defImageRes);
            typefaceTextView.setTypeface(typeface);
            if(!StringUtils.isEmpty(text)) {
                typefaceTextView.setText(text);
            }
            if(textsize != 0) {
                typefaceTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, textsize);
            } else {
                typefaceTextView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 12);
            }
        }
    }

    boolean checked;
    int defImageRes;
    int checkedImageRes;
    String typeface;
    String text;
    int inactiveTextcolor;
    int activeTextcolor;
    int textsize;

    OnCheckedChangeListener onCheckedChangeListener;

    @Bind(R.id.custom_checkbox_imageview)
    ImageView imageView;

    @Bind(R.id.custom_checkbox_text)
    TypefaceTextView typefaceTextView;

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
    }

    @Override
    public void onClick(View v) {
        checked = !checked;
        imageView.setImageResource(checked ? checkedImageRes : defImageRes);
        typefaceTextView.setTextColor(checked ? activeTextcolor : inactiveTextcolor);
        onCheckedChangeListener.onCheckedChanged(this, checked);
    }

    public void setOnCheckedChangeListener(OnCheckedChangeListener onCheckedChangeListener) {
        this.onCheckedChangeListener = onCheckedChangeListener;
    }

    public static interface OnCheckedChangeListener {
        void onCheckedChanged(View buttonView, boolean isChecked);
    }

    public boolean isChecked() {
        return checked;
    }

    public void setChecked(boolean checked) {
        this.checked = checked;
        imageView.setImageResource(checked ? checkedImageRes : defImageRes);
        typefaceTextView.setTextColor(checked ? activeTextcolor : inactiveTextcolor);
    }

    public void setTextColor(int color) {
        typefaceTextView.setTextColor(color);
    }



    @Override
    public Parcelable onSaveInstanceState() {
        //begin boilerplate code that allows parent classes to save state
        Parcelable superState = super.onSaveInstanceState();

        SavedState ss = new SavedState(superState);
        //end

        ss.checked = this.checked;
        ss.defImageRes = this.defImageRes;
        ss.checkedImageRes = this.checkedImageRes;
        ss.typeface = this.typeface;
        ss.text = this.text;
        ss.inactiveTextcolor = this.inactiveTextcolor;
        ss.activeTextcolor = this.activeTextcolor;
        ss.textsize = this.textsize;

        return ss;
    }

    @Override
    public void onRestoreInstanceState(Parcelable state) {
        //begin boilerplate code so parent classes can restore state
        if(!(state instanceof SavedState)) {
            super.onRestoreInstanceState(state);
            return;
        }

        SavedState ss = (SavedState) state;
        super.onRestoreInstanceState(ss.getSuperState());
        //end

        this.checked = ss.checked;
        this.defImageRes = ss.defImageRes;
        this.checkedImageRes = ss.checkedImageRes;
        this.typeface = ss.typeface;
        this.text = ss.text;
        this.inactiveTextcolor = ss.inactiveTextcolor;
        this.activeTextcolor = ss.activeTextcolor;
        this.textsize = ss.textsize;
    }

    static class SavedState
            extends BaseSavedState {
        boolean checked;
        int defImageRes;
        int checkedImageRes;
        String typeface;
        String text;
        int inactiveTextcolor;
        int activeTextcolor;
        int textsize;

        SavedState(Parcelable superState) {
            super(superState);
        }

        private SavedState(Parcel in) {
            super(in);
            this.checked = in.readByte() > 0;
            this.defImageRes = in.readInt();
            this.checkedImageRes = in.readInt();
            this.typeface = in.readString();
            this.text = in.readString();
            this.inactiveTextcolor = in.readInt();
            this.activeTextcolor = in.readInt();
            this.textsize = in.readInt();
        }

        @Override
        public void writeToParcel(Parcel out, int flags) {
            super.writeToParcel(out, flags);
            out.writeByte(this.checked ? (byte) 0x01 : (byte) 0x00);
            out.writeInt(this.defImageRes);
            out.writeInt(this.checkedImageRes);
            out.writeString(this.typeface);
            out.writeString(this.text);
            out.writeInt(this.inactiveTextcolor);
            out.writeInt(this.activeTextcolor);
            out.writeInt(this.textsize);
        }

        //required field that makes Parcelables from a Parcel
        public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {
            public SavedState createFromParcel(Parcel in) {
                return new SavedState(in);
            }

            public SavedState[] newArray(int size) {
                return new SavedState[size];
            }
        };
    }
}

Using the following attrs.xml

<resources
    <declare-styleable name="CustomCheckbox">
        <attr name="default_img" format="integer"/>
        <attr name="checked_img" format="integer"/>
        <attr name="checked" format="boolean"/>
        <attr name="chx_typeface" format="string"/>
        <attr name="text" format="string"/>
        <attr name="inactive_textcolor" format="integer"/>
        <attr name="active_textcolor" format="integer"/>
        <attr name="textsize" format="dimension"/>
    </declare-styleable>
</resources>

With following view_custom_checkbox.xml layout:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:id="@+id/custom_checkbox_imageview"
        android:layout_width="@dimen/_15sdp"
        android:layout_height="@dimen/_15sdp"
        />

    <com.example.TypefaceTextView
        android:id="@+id/custom_checkbox_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</merge>

And example:

                        <com.example.CustomCheckbox
                            android:id="@+id/program_info_record_button"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_centerHorizontal="true"
                            android:clickable="true"
                            android:gravity="center"
                            app:default_img="@drawable/ic_recording_off"
                            app:checked_img="@drawable/ic_recording_on"
                            app:text="@string/record"
                            app:inactive_textcolor="@color/program_info_buttons_inactive"
                            app:active_textcolor="@color/active_color"
                            app:textsize="@dimen/programInfoButtonTextSize"
                            app:chx_typeface="SomeTypeface.otf"/>

Modify where necessary.

0

Try using a Linearlayout with horizontal orientation instead of RelativeLayout.Also use weight in every layout to force views to use same width.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
<CheckBox android:id="@+id/cbFalse"
          android:weight="1"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:button="@drawable/custom_cb"
          android:text="" />
<CheckBox android:id="@+id/cbTrue"
          android:weight="1"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:button="@drawable/custom_cb"
          android:focusable="false"
          android:checked="true"
          android:layout_toRightOf="@id/cbFalse" />
<ImageView android:id="@+id/imvTrue"
          android:weight="1"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/creditcard"
          android:layout_toRightOf="@id/cbTrue" />

0

Maybe it will be useful to someone, setting gravity attribute to center helped me to avoid image cropping:

<CheckBox
    android:id="@+id/cb_accept_agreement"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:button="@drawable/checkbox_selector"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.