Text leftside of a RadioButton with a margin on Android

Question

I want to have the "label", - the text you set in your RadioButton to show left of the button and have some padding in between.

Adding an additional TextView into the layout doesn't work because my RadioGroup does not work (i can choose multiple buttons) if i add anything other then a RadioButton into the RadioGroup.

So, how can i change the RadioButton to be <text><buttondrawable> instead of <buttondrawable><text>

score 40 · Accepted Answer · edited Sep 24 '12 at 15:56

40

You can achieve this by setting android:button="@null" and adding the drawable of the RadioButton as android:drawableRight. You can change the Padding between the text and the drawable with android:drawablePadding .

    <RadioGroup
        android:id="@+id/radios"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:inputType="text"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/first"
            android:button="@null"
            android:drawableRight="@android:drawable/btn_radio"
            android:drawablePadding="20dp"
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:textSize="20dip" />

        <RadioButton
            android:id="@+id/second"
            android:button="@null"
            android:drawableRight="@android:drawable/btn_radio"
            android:drawablePadding="20dp"
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:textSize="20dip" />
    </RadioGroup>
</RelativeLayout>

edited Sep 24 '12 at 15:56

Yalla T.

3,707
3
23
36

answered Sep 24 '12 at 15:27

Ameer Moaaviah

1,530
12
27

Having two of those inside of a RadioGroup, I can still select both. – Yalla T. Sep 24 '12 at 15:32
Thanks! Very clever solution and i can easily add the padding i wanted with `android:drawablePadding`. – Yalla T. Sep 24 '12 at 15:47
2

The TextView still reserves space for the Button on the left, but when you set a negative margin/padding on the left, you can clean that up. – Yalla T. Sep 24 '12 at 15:58
regarding my previous comment, the space is not reserved on JellyBean So you have to make another Version without the negative Padding for JellyBean Devices. – Yalla T. Feb 22 '13 at 09:19
2

Setting `android:background="@null"` on the `RadioButton` will remove the mysterious padding. – Jarett Millard Oct 16 '13 at 18:12

score 0 · Answer 2 · edited May 23 '17 at 11:45

The answer above makes the image have no selected state.

May this help you:

On API <= 16 you can set padding left 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 left padding is in relation to the radio button drawable. Same applies to the about a patch nine. To better illustrate padding differences see the attached screen shot.

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 You should have radio button style for the min sdk you are supporting and another style for api 17+

the answer is from this same question answered by @James Baca

Please add the essence in a code snippet, future readers should not have to follow your link, unless they want more in-depth information. — Jeroen Kransen, May 19 '14 at 07:31
Also, the order of answers may vary, so better refer to an answer by the poster's name. — Jeroen Kransen, May 19 '14 at 07:32

score 0 · Answer 3 · answered Mar 04 '19 at 21:12

0

you can also change layout direction right to left and align text to start

android:layoutDirection="rtl"
android:textAlignment="textStart"

answered Mar 04 '19 at 21:12

Ecaterina Galeru

101
5

Hitesh · Answer 4 · 2021-02-17T11:55:39.407

step1-create drawable radio_button_insert.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"   android:drawable="@drawable/ic_baseline_check_circle_24"
    android:insetRight="@dimen/dp10">
</inset>

step2-create drawable custom_radio_button.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:drawable="@drawable/radio_button_inset" android:state_checked="true" />
    <item android:drawable="@color/transparent" android:state_checked="false" />
</selector>

step3-create drawable for background.

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:drawable="@drawable/bg_roundcorner_blue_border" android:state_checked="true"/>
    <item android:drawable="@drawable/bg_roundcorner_gray_border" android:state_checked="false" />
</selector>

step 4- use in radio button layout.

 <RadioGroup
                android:id="@+id/rg_options"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layoutDirection="rtl"
                app:layout_constraintEnd_toEndOf="parent"
                android:orientation="vertical"
                android:layout_margin="@dimen/dp10"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/title">
                <androidx.appcompat.widget.AppCompatRadioButton
                    android:layout_width="match_parent"
                    android:text="@string/lbl_store"
                    android:padding="@dimen/dp10"
                    android:button="@drawable/custom_radio_button"
                    android:background="@drawable/custom_radio_background"
                    android:layout_height="wrap_content"/>
                <androidx.appcompat.widget.AppCompatRadioButton
                    android:layout_width="match_parent"
                    android:padding="@dimen/dp10"
                    android:layout_marginTop="@dimen/dp25"
                    android:background="@drawable/custom_radio_background"
                    android:button="@drawable/custom_radio_button"
                    android:text="@string/lbl_your_manufacturers"
                    android:layout_height="wrap_content"/>
            </RadioGroup>

Output:

Text leftside of a RadioButton with a margin on Android

4 Answers4

Linked