86

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

2
  • 1
    Try with android:drawableLeft="@android:drawable/btn_radio" Sep 20, 2013 at 10:48
  • 4
    For language perspective all you need was one line... that is...(android:layoutDirection="rtl" )..... it is more easier :P Jun 24, 2016 at 18:50

19 Answers 19

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:

enter image description here

4
  • 1
    this method need minimum sdk level 17 how can I make view like that if I have the minimum sdk level < 17 Oct 4, 2016 at 13:42
  • you should use appcompat radiobutton to bypass sdk level limitation Jun 16, 2017 at 7: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 Feb 13, 2018 at 8:50
  • Seems like android:textAlignment is not needed.
    – Onik
    Oct 7, 2020 at 16:47
71

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>
6
  • 1
    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, 2014 at 19:41
  • but after this, the radio button is not getting checked(clicked). Im i doing something wrong. please help stackoverflow.com/questions/28052820/… Jan 20, 2015 at 18:51
  • 15
    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, 2015 at 18:35
  • doesn't work if set programmatically rb.setGravity(Gravity.RIGHT);
    – user924
    Dec 9, 2017 at 16:24
  • @muhammad-adil if you set supportRtl=" false " in manifest you won't get it Jul 21, 2019 at 10:06
47

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

Demo

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>
1
  • 2
    Thanks! This works. But android:layoutDirection="rtl" is not necessary. Dec 2, 2019 at 7:54
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"/>
1
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);
12

Just add:

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

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

enter image description here

0
5
<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,

4

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"
4

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

4

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>
4

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:

enter image description here

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"/>
1
  • 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. May 13, 2020 at 14:02
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

1
  • 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, 2018 at 10:23
2

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);
    }
});
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.

1
  • 3
    Please provide the relevant code or explanation as part of your answer rather than linking to another resource. Jan 19, 2014 at 20:40
1
            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"
1
  • 3
    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, 2018 at 9:39
0

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>
1
  • 1
    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, 2013 at 11:12
0

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);

Not the answer you're looking for? Browse other questions tagged or ask your own question.