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>

Bravado

Answer 1

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>

Rolanda

Having two of those inside of a RadioGroup, I can still select both. – Bravado

Thanks! Very clever solution and i can easily add the padding i wanted with android:drawablePadding. – Bravado

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. – Bravado

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. – Bravado

Setting android:background="@null" on the RadioButton will remove the mysterious padding. – Jataka

Answer 2

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

Vertebral

Please add the essence in a code snippet, future readers should not have to follow your link, unless they want more in-depth information. – Zig

Also, the order of answers may vary, so better refer to an answer by the poster's name. – Zig

Answer 3

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

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

Denise

Answer 4

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:

Sadonia