Android - Spacing between CheckBox and text

Question

Is there an easy way to add padding between the checkbox in a CheckBox control  and the associated text   I cannot just add leading spaces  because my label is multi-line   As-is  the text is way too close to the checkbox

User · Answer

Maybe it is to late  but I ve created utility methods to manage this issue   Just add this methods to your utils   public static void setCheckBoxOffset  NonNull  CheckBox checkBox   DimenRes int offsetRes        float offset   checkBox getResources   getDimension offsetRes       setCheckBoxOffsetPx checkBox  offset      public static void setCheckBoxOffsetPx  NonNull CheckBox checkBox  float offsetInPx        int leftPadding      if  Build VERSION SDK INT  lt   Build VERSION CODES JELLY BEAN            leftPadding   checkBox getPaddingLeft      int   offsetInPx   0 5f         else           leftPadding    int   offsetInPx   0 5f             checkBox setPadding leftPadding              checkBox getPaddingTop                checkBox getPaddingRight                checkBox getPaddingBottom         And use like this       ViewUtils setCheckBoxOffset mAgreeTerms  R dimen space medium     or like this          Be careful with this usage  because it sets padding in pixels  not in dp      ViewUtils setCheckBoxOffsetPx mAgreeTerms  100f

User · Answer

I end up with this issue by changing the images   Just added extra transparent background in png files  This solution works excellent on all the APIs

User · Answer

Use attribute android drawableLeft instead of android button  In order to set padding between drawable and text use android drawablePadding  To position drawable use android paddingLeft    lt CheckBox         android layout width  wrap content          android layout height  wrap content          android button   null          android drawableLeft   drawable check selector          android drawablePadding  -50dp          android paddingLeft  40dp            gt

User · Answer

As you probably use a drawable selector for your android button property you need to add android constantSize  true  and or specify a default drawable like this    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  android constantSize  true  gt     lt item android drawable   drawable check on  android state checked  true   gt     lt item android drawable   drawable check off   gt   lt  selector gt    After that you need to specify android paddingLeft attribute in your checkbox xml   Cons   In the layout editor you will the text going under the checkbox with api 16 and below  in that case you can fix it by creating you custom checkbox class like suggested but for api level 16   Rationale   it is a bug as StateListDrawable getIntrinsicWidth   call is used internally in CompoundButton but it may return  lt  0 value if there is no current state and no constant size is used

User · Answer

only you need to have one parameter in xml file  android paddingLeft  20dp

User · Answer

lt CheckBox         android paddingRight  12dip    gt

User · Answer

Why not just extend the Android CheckBox to have better padding instead  That way instead of having to fix it in code every time you use the CheckBox you can just use the fixed CheckBox instead    First Extend CheckBox   package com whatever   import android content Context  import android util AttributeSet  import android widget CheckBox          This extends the Android CheckBox to add some more padding so the text is not on top of the    CheckBox      public class CheckBoxWithPaddingFix extends CheckBox        public CheckBoxWithPaddingFix Context context            super context              public CheckBoxWithPaddingFix Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle              public CheckBoxWithPaddingFix Context context  AttributeSet attrs            super context  attrs               Override     public int getCompoundPaddingLeft             final float scale   this getResources   getDisplayMetrics   density          return  super getCompoundPaddingLeft      int   10 0f   scale   0 5f              Second in your xml instead of creating a normal CheckBox create your extended one    lt com whatever CheckBoxWithPaddingFix     android layout width  wrap content      android layout height  wrap content      android text  Hello there    gt

User · Answer

You need to get the size of the image that you are using in order to add your padding to this size  On the Android internals  they get the drawable you specify on src and use its size afterwards  Since it s a private variable and there are no getters you cannot access to it  Also you cannot get the com android internal R styleable CompoundButton and get the drawable from there   So you need to create your own styleable  i e  custom src  or you can add it directly in your implementation of the RadioButton   public class CustomRadioButton extends RadioButton        private Drawable mButtonDrawable   null       public CustomRadioButton Context context            this context  null              public CustomRadioButton Context context  AttributeSet attrs            this context  attrs  0              public CustomRadioButton Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle           mButtonDrawable   context getResources   getDrawable R drawable rbtn green           setButtonDrawable mButtonDrawable               Override     public int getCompoundPaddingLeft             if  Util getAPILevel    lt   Build VERSION CODES JELLY BEAN MR1                if  drawable    null                    paddingLeft    drawable getIntrinsicWidth                                    return paddingLeft

User · Answer

I don t know guys  but I tested    lt CheckBox android paddingLeft  8mm  and only moves the text to the right  not entire control    It suits me fine

User · Answer

This behavior appears to have changed in Jelly Bean  The paddingLeft trick adds additional padding  making the text look too far right  Any one else notice that

User · Answer

In my case I solved this problem using this following CheckBox attribute in the XML         android paddingLeft   dimen activity horizontal margin

User · Answer

Given  DougW response  what I do to manage version is simpler  I add to my checkbox view   android paddingLeft   dimen padding checkbox    where the dimen is found in two values folders   values   lt resources gt        lt dimen name  padding checkbox  gt 0dp lt  dimen gt    lt  resources gt    values-v17  4 2 JellyBean    lt resources gt        lt dimen name  padding checkbox  gt 10dp lt  dimen gt    lt  resources gt    I have a custom check  use the dps to your best choice

User · Answer

I hate to answer my own question  but in this case I think I need to   After checking it out   Falmarri was on the right track with his answer   The problem is that Android s CheckBox control already uses the android paddingLeft property to get the text where it is   The red line shows the paddingLeft offset value of the entire CheckBox    If I just override that padding in my XML layout  it messes up the layout   Here s what setting paddingLeft  0  does     Turns out you can t fix this in XML   You have do it in code   Here s my snippet with a hardcoded padding increase of 10dp   final float scale   this getResources   getDisplayMetrics   density  checkBox setPadding checkBox getPaddingLeft      int  10 0f   scale   0 5f           checkBox getPaddingTop            checkBox getPaddingRight            checkBox getPaddingBottom       This gives you the following  where the green line is the increase in padding   This is safer than hardcoding a value  since different devices could use different drawables for the checkbox     UPDATE - As people have recently mentioned in answers below  this behavior has apparently changed in Jelly Bean  4 2    Your app will need to check which version its running on  and use the appropriate method   For 4 3  it is simply setting padding left  See htafoya s answer for details

User · Answer

If you have custom image selector for checkbox or radiobutton you must set same button and background property such as this                lt CheckBox                 android id    id filter checkbox text                  android layout width  wrap content                  android layout height  wrap content                  android button   drawable selector checkbox filter                  android background   drawable selector checkbox filter    gt    You can control size of checkbox or radio button padding with background property

User · Answer

If you are creating custom buttons  e g  see change look of checkbox tutorial  Then simply increase the width of btn check label background 9 png by adding one or two more columns of transparent pixels in the center of the image  leave the 9-patch markers as they are

User · Answer

All you have to do to overcome this problem is to add android singleLine  true  to the checkBox in your android xml layout    lt CheckBox     android id    id your check box     android layout width  match parent     android layout height  wrap content     android singleLine  true     android background   android color transparent     android text   string your string   gt    and nothing special will be added programmatically

User · Answer

Checkbox image was overlapping when I used my own drawables from selector  I have solve this using below code    CheckBox cb   new CheckBox mActivity   cb setText  Hi    cb setButtonDrawable R drawable check box selector   cb setChecked true   cb setPadding cb getPaddingLeft    padding  padding  padding    Thanks to Alex Semeniuk

User · Answer

Simple solution  add this line in the CheckBox properties  replace 10dp with your desired spacing value  android paddingLeft  10dp

User · Answer

For space between the check mark and the text use   android paddingLeft  10dp    But it becomes more than 10dp  because the check mark contains padding  about 5dp  around  If you want to remove padding  see How to remove padding around Android CheckBox   android paddingLeft  -5dp  android layout marginStart  -5dp  android layout marginLeft  -5dp     or android translationX  -5dp  instead of layout marginLeft

User · Answer

API 17 and above  you can use      android paddingStart  24dp    API 16 and below  you can use      android paddingLeft  24dp

User · Answer

lt CheckBox android drawablePadding  16dip  - The padding between the drawables and the text

User · Answer

Instead of adjusting the text for Checkbox  I have done following thing and it worked for me for all the devices  1  In XML  add checkbox and a textview to adjacent to one after another  keeping some distance  2  Set checkbox text size to 0sp  3  Add relative text to that textview next to the checkbox

User · Answer

I just concluded on this    Override CheckBox and add this method if you have a custom drawable    Override public int getCompoundPaddingLeft             Workarround for version codes  lt  Jelly bean 4 2        The system does not apply the same padding  Explantion         http   stackoverflow com questions 4037795 android-spacing-between-checkbox-and-text 4038195 4038195      int compoundPaddingLeft   super getCompoundPaddingLeft         if  Build VERSION SDK INT  lt  Build VERSION CODES JELLY BEAN MR1            Drawable drawable   getResources   getDrawable  YOUR CUSTOM DRAWABLE            return compoundPaddingLeft    drawable    null   drawable getIntrinsicWidth     0         else           return compoundPaddingLeft             or this if you use the system drawable    Override public int getCompoundPaddingLeft             Workarround for version codes  lt  Jelly bean 4 2        The system does not apply the same padding  Explantion         http   stackoverflow com questions 4037795 android-spacing-between-checkbox-and-text 4038195 4038195      int compoundPaddingLeft   super getCompoundPaddingLeft         if  Build VERSION SDK INT  lt  Build VERSION CODES JELLY BEAN MR1            final float scale   this getResources   getDisplayMetrics   density          return compoundPaddingLeft    drawable    null    int  10 0f   scale   0 5f    0         else           return compoundPaddingLeft             Thanks for the answer

User · Answer

Setting minHeight and minWidth to 0dp was the cleanest and directest solution for me on Android 9 API 28    lt CheckBox         android id    id checkbox          android layout width  wrap content          android layout height  wrap content          android minHeight  0dp          android minWidth  0dp    gt

User · Answer

I had the same problem with a Galaxy S3 mini  android 4 1 2  and I simply made my custom checkbox extend AppCompatCheckBox  instead of CheckBox  Now it works perfectly

User · Answer

What I did  is having a TextView and a CheckBox inside a  Relative Layout  The TextView displays the text that I want the user to see  and the CheckBox doesn t have any text  That way  I can set the position   padding of the CheckBox wherever I want

User · Answer

If you want a clean design without codes  use    lt CheckBox    android id    id checkBox1     android layout height  wrap content     android layout width  wrap content     android drawableLeft   android color transparent     android drawablePadding  10dp     android text  CheckBox   gt    The trick is to set colour to transparent for android drawableLeft and assign a value for android drawablePadding  Also  transparency allows you to use this technique on any background colour without the side effect - like colour mismatch

User · Answer

Android 4 2 Jelly Bean  API 17  puts the text paddingLeft from the buttonDrawable  ints right edge   It also works for RTL mode    Before 4 2 paddingLeft was ignoring the buttonDrawable - it was taken from the left edge of the CompoundButton view   You can solve it via XML - set paddingLeft to buttonDrawable width   requiredSpace on older androids  Set it to requiredSpace only on API 17 up  For example use dimension resources and override in values-v17 resource folder   The change was introduced via android widget CompoundButton getCompoundPaddingLeft

User · Answer

Yes  you can add padding by adding padding   android padding 5dp

[android] Android - Spacing between CheckBox and text

Examples related to android

Examples related to checkbox

Examples related to padding