Change the side the text appears on a radio button

Question

I was wondering if there was a way to switch the side that text appears on a radio button in android?

Answer 1

I wanted to do the same thing, without having to extend yet another class (or two, as you would have to at least extend CompoundButton and RadioButton) for something that should be part of the implementation from the beginning. Since I was using a RadioGroup, which will not work if you put say, a RadioButton and a TextView in a layout container. My solution is admittedly more than a bit hackish, but - it works.

1) Set Padding left to 40 2) Set Layout margin left to -36dp

At this point, the original radio button will be outside the view, and your text view will be sitting on the far left with a 4dp margin.

3) Set Drawable right to @android:drawable/btn_radio

You'll now have a native RadioButton with the text on the left and a button on the right, that will work with a RadioGroup.

@CommonsWare

It's worth mentioning that it's incredibly ironic to bring up Human Interface Guidelines in response to this particular question. Especially considering that adjusting the RadioButton layout to place the button on the far right, would achieve consistency with the layout of the Spinner menu. I completely agree with your opinion on the matter - but it's quite possible that NickTFried was trying to compensate for Android "hanging" itself in that regard.

Answer 2

Android has a built in layout you can use - android.R.layout.simple_list_item_single_choice:

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<CheckedTextView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeightSmall"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:checkMark="?android:attr/listChoiceIndicatorSingle"
    android:paddingStart="?android:attr/listPreferredItemPaddingStart"
    android:paddingEnd="?android:attr/listPreferredItemPaddingEnd" />

If you want to modify it, you can copy-paste the above into a new XML file, and then use the <include> tag to include it in your other layouts (under the Apache 2.0 License). You can also use it as a list item, and leave it unchanged.

Answer 3

This can be done using CheckedTextView; see android RadioButton option on the right side of the text

Answer 4

The CheckedTextView works fine if you're working with a single "radio button".

But I needed to retain the toggling functionality among radio buttons in a group so this worked better for me:

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

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="@android:drawable/btn_radio"
            android:gravity="left|center_vertical"
            android:layout_marginLeft="-32dp"
            android:text="Radio Button 1" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="@android:drawable/btn_radio"
            android:gravity="left|center_vertical"
            android:layout_marginLeft="-32dp"
            android:text="Radio Button2" />

    </RadioGroup>

Adjust the android:layout_marginLeft as necessary.

Answer 5

As Ravi Vyas indicates, you can do this yourself with a TextView and a RadioButton. There is nothing intrinsic to RadioButton to reposition the button relative to the text, from my reading of the source code.

Also, please bear in mind that just because this is possible does not mean that it is a good idea. For example, on iPhone, you might not be allowed to ship your app if you mess around with this too much, because they have human interface guidelines that apps must adhere to. Android gives you a lot more rope -- don't hang your users with it.

Answer 6

For RTL languages i.e Arabic use this:

        <RadioGroup
            android:id="@+id/rgNewsFilter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <RadioButton
                android:id="@+id/rbAllNews"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="-32dp"
                android:button="@null"
                android:drawableRight="@android:drawable/btn_radio"
                android:gravity="right|center_vertical"
                android:text="ذنيسبمنشخصث"
                android:textColor="#ffffff" />

            <RadioButton
                android:id="@+id/rbMyTeam"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="-32dp"
                android:button="@null"
                android:drawableRight="@android:drawable/btn_radio"
                android:gravity="right|center_vertical"
                android:text="تشسيبتسيتبتسيب"
                android:textColor="#ffffff" />
        </RadioGroup>