How can I align radio buttons to the right of associated text?

Question

I have the following radio buttons inside a radio group of similar buttons. By default a button is on the left of the associated text. How do I get the button itself to be on the right of the associated text?

<RadioGroup
  android:id="@+id/points_radio_group"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical" >

  <RadioButton
    android:id="@+id/do_tastk_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:onClick="doTask1"
    android:paddingLeft="40dip"
    android:text="@string/task_name_1"
    android:textColor="#000000" />

  <RadioButton
    android:id="@+id/do_tastk_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:onClick="doTask2"
    android:paddingLeft="40dip"
    android:text="@string/task_name_2"
    android:textColor="#000000" />

</RadioGroup>

I've used a trick to achieve this in all SDKs with default UI and default select behavior, in below answer: http://stackoverflow.com/a/42734740/4832356 — SiSa, Mar 11 '17 at 12:26

score 54 · Accepted Answer · edited Aug 29 '18 at 11:10

54

Use

    android:button="@null"
    android:drawableRight="@android:drawable/btn_radio"

So your code will be like:

<RadioGroup
  android:id="@+id/points_radio_group"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">

  <RadioButton
    android:id="@+id/do_tastk_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:button="@null"
    android:drawableRight="@android:drawable/btn_radio"
    android:onClick="doTask1"
    android:paddingLeft="40dip"
    android:text="@string/task_name_1"
    android:textColor="#000000" />

  <RadioButton
    android:id="@+id/do_tastk_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:button="@null"
    android:drawableRight="@android:drawable/btn_radio"
    android:onClick="doTask2"
    android:paddingLeft="40dip"
    android:text="@string/task_name_2"
    android:textColor="#000000" />

</RadioGroup>

edited Aug 29 '18 at 11:10

andreikashin

1,528
3
14
21

answered Apr 21 '13 at 16:24

stinepike

54,068
14
92
112

oh, wow. Thanks. For some reason I thought I would need a drawable called `btn_radio`. But I added the lines anyway and it works! +1 too. – learner Apr 21 '13 at 16:27
btn_radio is android's own resource for the radio button – stinepike Apr 21 '13 at 16:27
1

+1 for nice answer..I have created a custom radio button, but your solution is awesome..It is called presence of mind – Pragnani Apr 21 '13 at 17:00
2

@Pragnani thanks.. I was also learned it from someone else :) – stinepike Apr 21 '13 at 17:39
4

If you do this, then it doesn't get tinted properly when the parent theme is an `AppCompat` theme. – Etienne Lawlor Jan 16 '15 at 04:22
when i'm setting android:button="@null" , the radio button is not getting checked(clicked). Im i doing something wrong. please help http://stackoverflow.com/questions/28052820/android-custom-radio-button-not-getting-checked – Shirish Herwade Jan 20 '15 at 18:54
hi @ShirishHerwade do you use custm drawable? then u have to set drawable for selected state also. – stinepike Jan 22 '15 at 05:00
1

@toobsco42 With `AppCompat` you can use this drawable `android:drawableRight="@drawable/abc_btn_radio_material"` – Roman Nazarevych May 22 '15 at 11:52
1

You can use android:drawableRight="?android:attr/listChoiceIndicatorSingle" – Williaan Lopes Jul 09 '19 at 05:59
Even better with drawableEnd: `android:drawableEnd="?android:attr/listChoiceIndicatorSingle"` – Rémi Latapy Jul 19 '21 at 12:18

score 19 · Answer 2 · answered Mar 31 '16 at 18:11

19

by using

android:button="@null"
android:drawableRight="@android:drawable/btn_radio"

you change radio button format. It is better practice just to align right,

android:layoutDirection="rtl"

on each radioButton, and text will be on left side.

answered Mar 31 '16 at 18:11

Andracchi

191
1
4

Just add `android:layoutDirection="rtl"` do the trick keeping appCompat theme – alvinmeimoun Apr 18 '16 at 08:57
1

@alvinmeimoun any idea how to give the radio button icon padding from right if the button with is fill parent? – Akhil Dad Apr 27 '16 at 11:37

Mahesh Lad · Answer 3 · 2017-06-12T15:42:54.503

4

You can do in xml

<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center" //or "center_vertical" for center text
android:layoutDirection="rtl"
android:text="hello" />

Following line is enough

android:layoutDirection="rtl"

edited Jun 12 '17 at 15:42

answered Jun 12 '17 at 09:53

Mahesh Lad

1,997
1
9
8

score 3 · Answer 4 · edited Feb 23 '17 at 19:35

3

easy way add this to your radiobutton in xml

android:layoutDirection="rtl"

edited Feb 23 '17 at 19:35

Nissa

4,636
8
29
37

answered Feb 23 '17 at 19:14

Abdelrahman Salah

31
2

score 1 · Answer 5 · answered Oct 14 '14 at 07:20

If you plan to add elements dynamically you can try to create a layout with a textview and a radio button with no text on the right. Something on these lines:

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

<RadioButton
    android:id="@+id/radiobutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"/>

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/radiobutton"
    android:layout_alignBottom="@+id/radiobutton"
    android:layout_alignParentLeft="true">

score 0 · Answer 6 · edited May 23 '17 at 12:34

A much simpler solution, as I posted here is to use the built in Android layout - 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.

How can I align radio buttons to the right of associated text?

6 Answers6

Linked