how to put the text on the left of a radio button in android

Question

I want to put the text of a radio button on the left not on the right

I found this solution

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

        <RadioButton
            android:id="@+id/first"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:background="@color/white"
            android:button="@null"
            android:drawablePadding="30dp"
            android:drawableRight="@android:drawable/btn_radio"
            android:text="first"
            android:textColor="@color/Black"
            android:textSize="20dip" />

        <RadioButton
            android:id="@+id/second"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@color/Black"
            android:button="@null"
            android:drawablePadding="30dp"
            android:drawableRight="@android:drawable/btn_radio"
            android:text="second"
            android:textColor="@color/White"
            android:textSize="20dp" />

        <RadioButton
            android:id="@+id/third"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@color/Maroon"
            android:button="@null"
            android:drawablePadding="30dp"
            android:drawableRight="@android:drawable/btn_radio"
            android:text="third"
            android:textColor="@color/Vanilla"
            android:textSize="20dp" />
    </RadioGroup>

but the problem is that the text gravity will be at the left what I want is to put it to right because i'm writing Arabic words

enter image description here

For language perspective all you need was one line... that is...(android:layoutDirection="rtl" )..... it is more easier :P — Muhammad Adil, Jun 24 '16 at 18:50

score 165 · Answer 1 · edited Sep 15 '19 at 08:35

165

Try adding the following attributes into the RadioButton, it should work, this way you still get to keep the ripple effect on the radio button:

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

Remember to set supportsRtl property to true in your application manifest.

for eg:

   <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layoutDirection="rtl"
            android:textAlignment="textStart"
            android:layout_gravity="start"
            android:text="The test item a"
            android:textSize="14sp" />

         ....                       

    </RadioGroup>

would give out:

edited Sep 15 '19 at 08:35

adiga

34,372
9
61
83

answered Jul 31 '16 at 06:01

Irshu

8,248
8
53
65

1

this method need minimum sdk level 17 how can I make view like that if I have the minimum sdk level < 17 – jboxxpradhana Oct 04 '16 at 13:42
you should use appcompat radiobutton to bypass sdk level limitation – user2729200 Jun 16 '17 at 07:23
3

Im not sure if this used to work, it seems like it, but for me it does not produce the result in the screenshot - not even close – user1202032 Feb 13 '18 at 08:50
Seems like `android:textAlignment` is not needed. – Onik Oct 07 '20 at 16:47

score 71 · Accepted Answer · answered Sep 20 '13 at 11:12

Add android:gravity="right" in each RadioButton as follow..

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

    <RadioButton
        android:id="@+id/first"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@color/white"
        android:button="@null"
        android:drawablePadding="30dp"
        android:drawableRight="@android:drawable/btn_radio"
        android:text="first"
        android:textColor="@color/Black"
        android:textSize="20dip" 
        android:gravity="right"/>

    <RadioButton
        android:id="@+id/second"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/Black"
        android:button="@null"
        android:drawablePadding="30dp"
        android:drawableRight="@android:drawable/btn_radio"
        android:text="second"
        android:textColor="@color/White"
        android:textSize="20dp"
         android:gravity="right"/>

    <RadioButton
        android:id="@+id/third"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/Maroon"
        android:button="@null"
        android:drawablePadding="30dp"
        android:drawableRight="@android:drawable/btn_radio"
        android:text="third"
        android:textColor="@color/Vanilla"
        android:textSize="20dp"
        android:gravity="right" />
</RadioGroup>

Well, this kindof works... but it gives a different radio button image. On Holo you get another image in the original RadioButton... :( — Zordid, Mar 16 '14 at 19:41
but after this, 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:51
While the solution works, the first sentence is misleading. The radio buttons are moved to the right of the text, instead of to the left, because of `android:button="@null"` and `android:drawableRight="@android:drawable/btn_radio"`. What `android:gravity="right"` does is aligning the widget to the right of its parent, rather than just the button. — rlazo, Jun 18 '15 at 18:35
doesn't work if set programmatically `rb.setGravity(Gravity.RIGHT);` — user924, Dec 09 '17 at 16:24
@muhammad-adil if you set `supportRtl=" false "` in manifest you won't get it — Mehran Mahmoudkhani, Jul 21 '19 at 10:06
UI came as expected but 'android:drawableRight="@android:drawable/btn_radio"' gives default radiobutton image right side, on selecting RadioButton I can't select,anything wrong — Annie, Jul 28 '21 at 11:34

maxeh · Answer 3 · 2018-06-21T13:38:03.740

Based on the answer of Irshu I suggest the following solution which uses the material ripple effect and produces the following outcome:

If you want the dividers as shown in the GIF than simply add a view with the height of 1 and a background color between the radiobuttons.

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

    <RadioButton
        android:id="@+id/radioButton1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:button="@null"
        android:drawableRight="?android:attr/listChoiceIndicatorSingle"
        android:background="?android:selectableItemBackground"
        android:layoutDirection="rtl"
        android:layout_gravity="start"
        android:textAlignment="textStart"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="10dp"
        android:text="Button1"
        android:textSize="14sp" />

    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:button="@null"
        android:drawableRight="?android:attr/listChoiceIndicatorSingle"
        android:background="?android:selectableItemBackground"
        android:layoutDirection="rtl"
        android:layout_gravity="start"
        android:textAlignment="textStart"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="10dp"
        android:text="Button2"
        android:textSize="14sp" />

    <RadioButton
        android:id="@+id/radioButton3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:button="@null"
        android:drawableRight="?android:attr/listChoiceIndicatorSingle"
        android:background="?android:selectableItemBackground"
        android:layoutDirection="rtl"
        android:layout_gravity="start"
        android:textAlignment="textStart"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="10dp"
        android:text="Button3"
        android:textSize="14sp" />
</RadioGroup>

Thanks! This works. But android:layoutDirection="rtl" is not necessary. — Mohammad Reza Lohrasbi, Dec 02 '19 at 07:54

score 22 · Answer 4 · answered Sep 20 '13 at 11:23

22

There is property called android:drawableRight which will set your drawable right side of your text and set android:button as null. check below piece of code:

Note: This is sample, you can apply to your all radioButton.

 <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:button="@null"
             android:drawableRight="@android:drawable/btn_radio"
             android:text="Left"/>

answered Sep 20 '13 at 11:23

RobinHood

10,897
4
48
97

1

but after this, 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:50

masood farmani · Answer 5 · 2017-07-14T11:06:45.200

13

add this in xml : ( 4.2 and above)

android:layoutDirection="rtl"

for older version than 4.2 use ViewCompat from android.support.v4.view:

ViewCompat.setLayoutDirection(findViewById(R.id.radio_button), ViewCompat.LAYOUT_DIRECTION_RTL);

edited Jul 14 '17 at 11:06

answered Jul 14 '17 at 10:40

masood farmani

141
1
5

score 12 · Answer 6 · answered Feb 17 '16 at 08:35

12

Just add:

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

answered Feb 17 '16 at 08:35

Seyyed

1,526
3
20
30

score 9 · Answer 7 · edited Sep 15 '19 at 08:34

Try adding the following attributes into the RadioButtons, it work

<RadioGroup
    android:id="@+id/radioGroup_sample"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layoutDirection="rtl"
    android:orientation="horizontal"
    android:weightSum="2">

    <RadioButton
        android:id="@+id/radio_sample_one"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="right|center_vertical"
        android:layoutDirection="rtl"
        android:text="دریافت کد با ایمیل"
        android:button="@null"
        android:drawableRight="?android:attr/listChoiceIndicatorSingle"/>
    <RadioButton
        android:id="@+id/radio_sample_tow"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="right|center_vertical"
        android:layoutDirection="rtl"
        android:text="دریافت کد با پیامک"
        android:button="@null"
        android:drawableRight="?android:attr/listChoiceIndicatorSingle"/>

</RadioGroup>

this picture of my sample code

score 6 · Answer 8 · edited Sep 15 '19 at 08:38

6

<RadioButton
    android:id="@+id/myRb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAlignment="gravity"
    android:gravity="left|center_vertical"
    android:layoutDirection="rtl"
    android:layout_gravity="start"
/>

Now Rtl will Move your text to right,

edited Sep 15 '19 at 08:38

adiga

34,372
9
61
83

answered Jul 03 '19 at 07:54

Rohit Lalwani

529
7
14

score 5 · Answer 9 · edited Dec 31 '18 at 16:06

5

Very simple, you want the text to appear in the left of the radio button, you just have to change the layout direction to rtl (== right to left):

android:layoutDirection="rtl"

edited Dec 31 '18 at 16:06

Nino Filiu

16,660
11
54
84

answered Dec 31 '18 at 13:52

medmahmoudkedda

51
1
1

score 4 · Answer 10 · edited Sep 15 '19 at 08:35

In case anyone is still wondering how to achieve this, here's a better solution in my opinion: RadioGroup class extends LineareLayout. You can add a simple radio button and a TextView beside it and easily have the same effect:

<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="خانم"/>

    <RadioButton
        android:id="@+id/female"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="آقا"/>

    <RadioButton
        android:id="@+id/male"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</RadioGroup>

Which then makes a layout like below:

score 4 · Answer 11 · answered Feb 12 '19 at 09:40

Don't get confused to see lines of codes,Its just a simple line

android:layoutDirection="rtl";//right to left,if you want you can set ltr

put this like

        <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layoutDirection="rtl"
        android:text="English"
        android:textSize="24dp"
        />

and careful to refresh your preview better to select Design not blue print

score 4 · Answer 12 · answered Apr 30 '19 at 09:13

you can change direction for your RadioButtons in RadioGroup add android:layoutDirection="rtl" in your RadioGroup attribute.

<RadioGroup
    android:id="@+id/role_radioGroup_ID"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layoutDirection="rtl">
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/manager" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="@string/fleetVehicle" />

   <RadioButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/personalVehicle" />
</RadioGroup>

score 3 · Answer 13 · edited Sep 15 '19 at 08:34

3

try this code :

 <RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:gravity="right">

    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textDirection="rtl"
        android:layout_margin="4dp"
        android:layoutDirection="rtl"
        android:textAlignment="textStart"
        android:layout_gravity="start"
        android:text="اول"
        android:textSize="15dp"/>
</RadioGroup>

result : show result

edited Sep 15 '19 at 08:34

adiga

34,372
9
61
83

answered Jun 13 '18 at 10:15

ali shahriarimanesh

71
4

4

Why should the OP "try this code"? A **good answer** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. – B001ᛦ Jun 13 '18 at 10:23

score 3 · Answer 14 · answered Jan 27 '19 at 06:29

3

to keep material style use android:drawableRight="?android:attr/listChoiceIndicatorSingle"

<RadioButton
   android:id="@+id/radioButton"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:button="@null"
   android:text="rtl button"
   android:drawableRight="?android:attr/listChoiceIndicatorSingle"/>

answered Jan 27 '19 at 06:29

Milad Mohammad Rezaei

97
3

This one is interesting because it doesn't use android:layoutDirection="rtl". Unfortunately, rtl is going to cause the check to switch sides when the interface legit needs to reverse. – Brill Pappin May 13 '20 at 14:02

score 2 · Answer 15 · answered Mar 11 '17 at 11:41

I've used a trick like the code below to achieve this in all SDKs with default UI and default select behavior:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layoutDirection="ltr"
    android:orientation="vertical"
    android:padding="10dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="30dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="RadioButton 1"
            android:textColor="@color/Black" />

        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:scaleX="-1" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="30dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="RadioButton 2"
            android:textColor="@color/Black" />

        <RadioButton
            android:id="@+id/rb2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:scaleX="-1" />
    </RelativeLayout>
</LinearLayout>

Now for make the buttons single selectable, just write the code for buttons onCheckedChanged listener and make other buttons unchecked.

Like this:

rb1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean checked) {
        if(checked)
            rb2.setChecked(false);
    }
});

score 1 · Answer 16 · answered Jan 19 '14 at 20:20

1

Take a look at the "CustomChoiceList" example, there it is explained how you can create either your own check boxes/radio buttons or how you can create a ListView with the default check boxes/radio buttons used in the android settings, for example. You should especially note the res/layout/sample_main.xml file, it expains much.

answered Jan 19 '14 at 20:20

Daniel Höh

11
2

3

Please provide the relevant code or explanation as part of your answer rather than linking to another resource. – Sean Connolly Jan 19 '14 at 20:40

score 1 · Answer 17 · answered May 17 '18 at 09:21

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fontPath="@string/font_nunito_light"
            android:text="Male"
            android:layout_marginTop="@dimen/dp_10"
            android:drawablePadding="@dimen/dp_10"
            android:drawableStart="@drawable/selector_radio"
            android:button="@null"
            android:id="@+id/rb_"
            android:checked="true"
           android:textSize="@dimen/sp_15"

While this code might answer the question you still might consider adding a few explanatory sentences as this increases the value of your answer for other users. — MBT, May 17 '18 at 09:39

score 0 · Answer 18 · answered Sep 20 '13 at 11:05

try this code and change the values to your arabic words..

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >
    <RadioGroup
            android:id="@+id/radioGender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

        <RadioButton
                android:id="@+id/radioMale"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/radio_male"
                android:checked="true" />

        <RadioButton
                android:id="@+id/radioFemale"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/radio_female" />

    </RadioGroup>

    <Button
            android:id="@+id/btnDisplay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn_display" />

</LinearLayout>

oh man, what is this code it's the default radio button. what I want is to have the radio button like the picture above radio button on the right of the text and the text should be aligned to the right — BasILyoS, Sep 20 '13 at 11:12

score 0 · Answer 19 · answered Mar 25 '19 at 19:48

Since no one has mentioned this, below is the way you can do it Programmatically if someone is trying to do it

RadioButton button = new RadioButton(context);
ViewCompat.setLayoutDirection(button, ViewCompat.LAYOUT_DIRECTION_RTL);

// Create the layout params for our buttons
RadioGroup.LayoutParams layoutParams = new 
RadioGroup.LayoutParams(LayoutParams.MATCH_PARENT, 
LayoutParams.WRAP_CONTENT);
button.setLayoutParams(layoutParams);
layoutParams.gravity = Gravity.RIGHT;
button.setTextAlignment(View.TEXT_ALIGNMENT_TEXT_START);
button.setGravity(Gravity.CENTER);

score 0 · Answer 20 · answered Aug 16 '23 at 05:36

0

Use the following attributes on the RadioButton, only layoutDirection won't work if you are updating the RadioButton text dynamically -

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

answered Aug 16 '23 at 05:36

Naresh NK

1,036
1
9
16

how to put the text on the left of a radio button in android

20 Answers20

Linked

Related