Add margin between a RadioButton and its label in Android?

Question

Is it possible to add a little bit of space between a RadioButton and the label while still using Android's built-in components? By default the text looks a little scrunched.

<RadioButton android:id="@+id/rb1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:text="My Text"/>

I've tried a couple of things:

1. Specifying margin and padding seem to add space around the entire element (button and text, together). That makes sense, but doesn't do what I need.

2. Creating a custom drawable via XML specifying images for the checked and unchecked states, then adding a few extra pixels to the right side of each image. This should work, but now you are stepping outside the default UI. (Not the end of the world, but not ideal)

3. Add extra whitespace to the beginning of each label. Android seems to trim a leading space character, as in " My String", but specifying unicode U+00A0, as in "\u00A0My String" does the trick. This works, but it seems kinda dirty.

Any better solutions?

Invigilate

Answer 1

For anyone reading this now, the accepted answer will lead to some layout problems on newer APIs causing too much padding.

On API <= 16 you can set paddingLeft on the radio button to set the padding relative to the radio button's view bounds. Additionally, a patch nine background also changes the view bounds relative to the view.

On API >= 17 the paddingLeft (or paddingStart) is in relation to the radio button drawable. Same applies to the about a patch nine. To better illustrate padding differences see the attached screenshot.

If you dig through the code you will find a new method in API 17 called getHorizontalOffsetForDrawables. This method is called when calculating the left padding for a radio button(hence the additional space illustrated in the picture).

TL;DR Just use paddingLeft if your minSdkVersion is >= 17. If you support API <= 16, you should have radio button style for the min SDK you are supporting and another style for API 17+.

Hann

api 17 is android.os.Build.VERSION_CODES.JELLY_BEAN_MR1 – Oddball

The best way to do this is with a "values-v17" directory; put your API 17+ dimension in a resources xml there and the standard one for 16 and below in just plain "values". – Hounding

Amazing how Google developers / management are treating us usual devs. They do whatever they want, whenever they want. Consistency and integrity mean nothing to them. – Tade

Is there also a way to set a padding left to the radiobutton drawable? So how to set a padding between the left side of the sceen and the radiobutton drawable (NOT THE ENTIRE RADIOBUTTON). – Sulfonation

Answer 2

Not sure if this will fix your problem, but have you tried Radio Button's "Padding left" property with a value of 50dip or more

Alda

This works, and 50dip is needed to cover the width of the default drawable. At first I used 20dip and the text moved left! That's because the anchoring point is not the right edge of the drawable; it is the left edge of the drawable. – Chalmers

Answer 3

i tried several ways and finished with this one working correctly on both emulator and devices:

    <RadioButton
        android:background="@android:color/transparent"
        android:button="@null"
        android:drawableLeft="@drawable/your_own_selector"
        android:drawablePadding="@dimen/your_spacing" />

• android:background needs to be transparent as it seems on api10 there is a background with intrinsic paddings (not tried with other apis but the solution works on others too)
• android:button needs to be null as paddings will not work correctly otherwise
• android:drawableLeft needs to be specified instead of android:button
• android:drawablePadding is the space that will be between your drawable and your text

Kellby

The best answer! You can also set android:background="@null" and will look as you stated with no padding. – Devitrify

when i'm setting android:button="@null" , the radio button is not getting checked(clicked). Im i doing something wrong. please help #28053320 – Hognut

@Shirish this solution has nothing to do with your button not being clicked. I just implemented it and it is clicked. – Tade

Thanks for the solution! – Aglow

Answer 4

Add margin between a radiobutton its label by paddingLeft:

android:paddingLeft="10dip"

Just set your custom padding.

RadioButton's xml property.

<RadioButton
    android:id="@+id/radHighest"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/YourImageResource"
    android:drawablePadding="50dp"
    android:paddingLeft="10dip"
    android:text="@string/txt_my_text"
    android:textSize="12sp" />

Done

Markup

Answer 5

Use the following XML attributes. It worked for me

For API <= 16 use

android:paddingLeft="16dp"

For API >= 17 use

android:paddingStart="@16dp"

Eg:

<android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/popularityRadioButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="true"
        android:paddingEnd="@dimen/radio_button_text"
        android:paddingLeft="@dimen/radio_button_text"
        android:paddingRight="@dimen/radio_button_text"
        android:paddingStart="@dimen/radio_button_text"
        android:text="Popularity"
        android:textSize="@dimen/sort_dialog_text_size"
        android:theme="@style/AppTheme.RadioButton" />

Further More: drawablePadding attribute doesn't work. It only works if you added a drawable in your radio button. For Eg:

<RadioButton
    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:button="@null"
    android:drawableEnd="@android:drawable/btn_radio"
    android:drawablePadding="56dp"
    android:drawableRight="@android:drawable/btn_radio"
    android:text="New RadioButton" />

Degrading

Answer 6

Can't try this right now to verify, but have you tried to see if the attribute android:drawablePadding does what you need?

Bisutun

Hm. Gave it a try and it doesn't seem to have any effect in this situation. Thanks for the suggestion, it certainly sounds right from the description: "The padding between the drawables and the text". – Invigilate

Answer 7

final float scale = this.getResources().getDisplayMetrics().density;
checkBox.setPadding(checkBox.getPaddingLeft() + (int)(10.0f * scale + 0.5f),

    checkBox.getPaddingTop(),
    checkBox.getPaddingRight(),
    checkBox.getPaddingBottom());

Traceable

Answer 8

The padding between the drawables and the text. It will be achieved by adding line below in xml file. android:drawablePadding="@dimen/10dp"

Biebel

i was looking exactly for this... helped me a lot – Hognut

@dimen/10dp bad practise – Warrior

Answer 9

jusst use padding start for API above 16

Clayclaybank

Answer 10

I have tried, "android:paddingLeft" will works. paddingLeft will only impact the text while keep the radio image stay at the original position.

Beaulieu

Answer 11

The "android:paddingLeft" only seems to work correctly under android 4.2.2

i have tried almost all versions of android and it only works on the 4.2.2 version.

Fortuitous

Answer 12

I'm using different approach that I think should work on all API versions. Instead of applying padding I'm adding an empty view between to RadioButtons:

<View
        android:layout_width="20dp"
        android:layout_height="1dp" />

This should give you 20dp padding.

Pesek

Answer 13

I came here looking for an answer and the simplest way (after some thinking) was add spacing at the beginning of the label itself like so

<RadioGroup
     android:orientation="horizontal"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignRight="@+id/btnChangeMode"
     android:layout_marginTop="10dp"
     android:layout_marginBottom="10dp"
     android:layout_below="@+id/view3"
     android:gravity="center|left"
     android:id="@+id/ledRadioGroup">
<RadioButton
         android:button="@drawable/custom_radio_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text=" On"
         android:layout_marginRight="6dp"
         android:id="@+id/ledon"
         android:textColor="@color/white" />
<RadioButton
         android:button="@drawable/custom_radio_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text=" Off"
         android:layout_marginLeft="6dp"
         android:id="@+id/ledoff"
         android:textColor="@color/white" />

Hamster

Answer 14

for me works:

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true">
            <layer-list>
                <item android:right="5dp">
                    <shape android:paddingLeft="5dp" android:shape="oval">
                     <size android:width="20dp" android:height="20dp" />
                     <solid android:color="@color/blue" />
            </shape>
        </item>
    </layer-list>
</item>
<item android:paddingLeft="5dp" android:state_checked="false">
    <layer-list>
        <item android:right="5dp">
            <shape android:paddingLeft="5dp" android:shape="oval">
                <size android:width="20dp" android:height="20dp" />
                <solid android:color="@color/grey" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Objective

Answer 15

<RadioButton
                android:id="@+id/rb1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:background="@null"
                android:paddingLeft="20dp"
                android:text="1"
                android:textColor="@color/text2"
                android:textSize="16sp"
                android:textStyle="bold" />

Rostand

Consider adding some comments to explain how this solve the problem ;) – Phillip

Answer 16

You could try using the gravity attribute of radio button .

<RadioButton
                        android:id="@+id/rb_all"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:checked="true"
                        android:gravity="right|center_vertical"
                        android:padding="@dimen/padding_30dp"
                        android:text="@string/filter_inv_all"
                        android:textColor="@color/black"
                        android:textSize="@dimen/text_size_18" />

This will align the text to the right most end . Check out the first radio in the image.

Enthronement

Answer 17

You can this code on your XML file

<RadioButton
android:id="@+id/rButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="50dp"
android:paddingLeft="10dip"
android:text="@string/your_text" />

or use this on Activity class

radioButton.setPadding(12, 10, 0, 10);

Peggiepeggir

Answer 18

Create a style in style.xml like this

<style name="Button.Radio">

    <item name="android:paddingLeft">@dimen/spacing_large</item>
    <item name="android:textSize">16sp</item>
</style>

Put that style in radio button

 <RadioButton
                android:id="@+id/rb_guest_busy"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:text="@string/guest_is_waiting"
                android:textSize="@dimen/font_size_3x_medium"
                android:drawablePadding="@dimen/spacing_large"
                android:textColor="@color/color_text_heading_dark"
                style="@style/Button.Radio"/>

You can change any attribute same as button as it RadioButton indirectly inherits button.

Pentadactyl

Answer 19

I know it is an old question, but with this solution, I finally got peace of mind and forget about API level.

Left side vertical RadioGroup with right side vertical text view.

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">
        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </RadioGroup>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center_vertical"
            android:text="Radio 1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center_vertical"
            android:text="Radio 2"/>
    </LinearLayout>
</LinearLayout>

Redstone

@Mark Buikema, Absolutely it is not label, but it does works like label here! If you want click labels, you can add click listeners to TextViews. My point is, does we need to implement layout for e-v-e-r-y version of android os? I think, no. – Redstone