Radio button spaces of leftDrawable & rightDrawable

Question

I have a RadioGroup with radio buttons:

  <RadioGroup 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:id="@+id/radioGroup1" 
     >


        <RadioButton 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:checked="true" 
            android:text="AAA" 
            android:button="@null"
            android:drawableLeft="@drawable/flag_icon"
            android:drawableRight="@android:drawable/btn_radio"
            android:drawablePadding="60dp"
            android:id="@+id/radio2"/>

        <RadioButton.../>
    </RadioGroup>

As you see above, for the RadioButton I defined the following attributes:

...
android:button="@null"
 android:drawableLeft="@drawable/flag_icon"
 android:drawableRight="@android:drawable/btn_radio"
 ...

So that the radio button is located on the right side of the radio button text. The left side of button text is a flag icon.

In order to have spaces between button text and flag icon and button icon, I use android:drawablePadding="60dp" to space them.

However, with above code, the 60dp padding space is applied to both left drawable (flag icon) and right drawable (radio button), which ends up with radio text located in the middle between the two drawables.

I would like to have radio button text and left drawable(flag icon) has smaller space between, while radio button text and right drawable (radio button) has larger space between. How to define the different spaces for left drawable and right drawable of radio button ?

score 4 · Answer 1 · answered Jun 15 '12 at 15:20

Simply check this:

            <RadioButton
                android:id="@+id/radio0"
                style="@style/my_recording_title_text"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                android:button="@null"
                android:checked="true"
                android:drawableRight="@drawable/presets_sel"
                android:padding="12dp"
                android:text="Play with EarPhones" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="3dp"
                android:background="@drawable/line" />

            <RadioButton
                android:id="@+id/radio1"
                style="@style/my_recording_title_text"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                android:button="@null"
                android:drawableRight="@drawable/presets_sel"
                android:padding="12dp"
                android:text="Play with internal speakers" />
        </RadioGroup>

Thanks, android:padding gives space between button and text, this solution worked for me. — Zia, Jun 26 '14 at 07:39

score 0 · Answer 2 · edited May 23 '17 at 12:15

This sort of thing comes up often. And the sad truth is that the limitations of using RadioGroup with RadioButtons severely limit your ability to make your layouts look right.

I posted a very detailed solution here that involves abandoning RadioGroups. I know it seems like a lot of work, but the code is very straight-forward. Until RadioGroups are implemented in a better fashion, this is the best solution I've found.

Good luck!

score 0 · Answer 3 · edited Mar 28 '12 at 09:30

try this xml file or add Property android:gravity="center_horizontal|center_vertical" or android:gravity="center" in your Radio Button and remove padding

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >   

    <RadioGroup
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/logo"
            android:button="@null"            
            android:drawableRight="@drawable/ic_launcher"
            android:gravity="center_horizontal|center_vertical"

            android:text="RadioButton" />
    </RadioGroup>

</LinearLayout>

Radio button spaces of leftDrawable & rightDrawable

3 Answers3