Center CheckBox drawable within itself

android android-layout checkbox drawable padding

30,780

Solution 1

I believe the problem is that the Checkbox widget uses a regular TextView with the drawableLeft attribute, because it expects text to be shown as well. (This is why you see it centered vertically, but offset slightly to the left.)

If you simply want an image button with multiple states, I suggest using a ToggleButton with your custom images in a state list selector. Or you could create a custom class that extends ImageView and implements Checkable.

Solution 2

I'm using MaterialCheckBox from material-components-android(or AppCompatCheckBox. They're similar).

I find that if a CheckBox doesn't have any text, setting its android:minWidth="0dp" and android:minHeight="0dp" can remove all paddings and center the drawable.

Solution 3

You can use a parent layout to achieve this :

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center">

    <CheckBox
        android:id="@+id/checkbox_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Check box text" />
</LinearLayout>

Solution 4

The only proper solution is to add insets to the image. Most of the solutions with "foreground" won't work below API 23.

btn_favorite_inset.xml in drawable dir

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/btn_favorite"
    android:insetLeft="6dp"
    android:insetTop="6dp"
    android:insetRight="6dp"
    android:insetBottom="6dp" />

Your layout file

<CheckBox
    android:id="@+id/checkbox_star"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:button="@drawable/btn_favorite_inset"
    android:layout_gravity="center"
    android:minWidth="48dp" />

Solution 5

android:button="@null"
android:foreground="@drawable/btn_favorite" 
android:foregroundGravity="center"

View more solutions

30,780

davidcesarino

Ubuntu and Dart. Quality over quantity, please! Keep your SNR high.

Updated on July 09, 2022

Comments

davidcesarino almost 2 years
I have a CheckBox that I want centered within its own boundaries, not pushed to the side. Probably easier demonstrated than explained:

Note that it isn't centered. Currently defined as:
```
<CheckBox
    android:id="@+id/checkbox_star"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:button="@drawable/btn_favorite"

    android:layout_gravity="center"
    android:minWidth="48dp" />
```
Nevermind the custom button drawable. It behaves the same with a vanilla CheckBox as well (the small check box behaves the same).
davidcesarino over 11 years

Thanks for your reply, but that's exactly why I said "center [...] in itself" and not "center [...] in something else" ;-) , otherwise I think I'd have done that already. This issue is very relevant when you consider the clicking area of the widget.
Eldhose M Babu over 11 years

Then seperate the checkbox button and checkbox text as two controls if clicking area is your issue. Use checkbox along with a textview side by side.
davidcesarino over 11 years

I don't have (or want) any text, nor it solves the problem at hand. This is about creating a CheckBox larger than its drawable while positioning said drawable in the center and not in the left of the widget boundaries. What you said does not do that.
davidcesarino over 11 years

Bingo! Oh wow, thanks a bunch... easy and simple... I didn't think of ToggleButton!
Yura Shinkarev almost 10 years

How ToggleButton can help with centering of image, if button size larger than image size?
jhauberg over 6 years

This works perfectly for my use case. Coupled with a drawable state selector for android:background this achieves a fully customized checkbox.
pptaszni about 6 years

This answer is not really clear. Besides, problem is already solved.
HendraWD almost 6 years

For the last statement: "Or you could create a custom class that extends ImageView and implements Checkable.", you guys don't need to make it by yourself, just copy it directly from my answer here stackoverflow.com/a/37986765/3940133
Alex Fu over 5 years

Just for clarification, CheckBox doesn't use TextView drawableLeft for its button. It draws the button on its own and only supports Gravity.BOTTOM or Gravity.CENTER_VERTICAL. android.googlesource.com/platform/frameworks/base/+/master/c‌ore/…
Parth Patel almost 5 years

@MayankSharma How did you handle the drawable change while click on CheckableImageView?
Mayank Sharma over 4 years

@parthpatel we define it in xml selector.
Parth Patel over 4 years

@HendraWD is was the issue in handling OnClickListener from my code, latter it has been resolved. Thanks for suggestion
Jeff Padgett over 4 years

You will also lose the animation effects associated with the Checkbox if you do it this way.
Leo almost 4 years

Holy hell, this is what I was looking for for hours! Thank you!
Aloha over 3 years

Why this works I have no idea, but you just saved me a bunch of time. Thanks! Is this documented anywhere?
Dewey Reed over 3 years

@PNDA I didn't find any docs. I simply tried every combination.
Dewey Reed over 3 years

@SamChen I verify the solution with AS 4.1 and MDC 1.2.1, and it works.
Marcell about 3 years

This helps to center a CheckBox in the area of a parent Layout. I didn't even have to set the gravity for the CheckBox itself. Probably not the answer for the question asked, but it helped me to achieve what I was looking for.
Erik almost 3 years

While this answer works well, it has an issue: the view actually becomes smaller, and therefore the touch box becomes smaller as well. Material Design guidelines recommend touch targets to be no smaller than 48x48 dp (material.io/design/usability/…). The default material checkbox is exactly that size, so it should likely not be made smaller.