使用自定义复选框选择器时，如何消除复选框按钮和文本之间的多余空间？

Question

I have a very simple custom checkbox selector:

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

that I'm setting using the following code:

<CheckBox android:id="@+id/checkbox1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:button="@drawable/checkbox_selector"
   android:textSize="12dp"
   android:text="checkbox 1"
   />

The custom checkbox image is smaller than the standard image that comes with Android, but the text is still in exactly the same spot, as if the larger image were still being used.

So instead of looking like [X]_checkbox 1 it looks like [X]____checkbox 1 with a big space between the box and the text. How can I fix this?

Answer 1

One potential solution is to set the checkBox to have no text. Then make yourself a TextView and use android:layout_toRightOf="@+id/checkbox1"

Probably is non-ideal since it means using an additional View, but this is how I've solved the problem that you currently face in the past.

Answer 2

one of this link should work for you:

http://www.anddev.org/tutorial_change_look_of_checkbox-t4553.html

Android - Spacing between CheckBox and text

Answer 3

Size of control depends on foreground and background sizes. When you customize checkbox - you make custom foreground, but background is left from android. If your custom foreground is larger then android's background there is no problem. If you use smaller custom foregraund then size of checkbox is calculated from size of system background (which isn't good). Try to use small transparent .png as background: android:background="@drawable/small_bg" (or make experiments with some .9.png)

Answer 4

You can set android:paddingLeft attribute to avoid extra space between image and text view Example

 <CheckBox android:id="@+id/checkbox1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"

   android:textSize="12dp"
   android:text="checkbox 1"
   android:paddingLeft="0dip"
   />