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

Solution 1

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>

Solution 2

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:

Solution 3

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>

Solution 4

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

Solution 5

Just add:

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

View more solutions

Comments

[Pratik Dasa]

Try with android:drawableLeft="@android:drawable/btn_radio"

[Muhammad Adil]

For language perspective all you need was one line... that is...(android:layoutDirection="rtl" )..... it is more easier :P

[BasILyoS]

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

[Sean Connolly]

Please provide the relevant code or explanation as part of your answer rather than linking to another resource.

[Zordid]

Well, this kindof works... but it gives a different radio button image. On Holo you get another image in the original RadioButton... :(

[Shirish Herwade]

but after this, the radio button is not getting checked(clicked). Im i doing something wrong. please help stackoverflow.com/questions/28052820/…

[Shirish Herwade]

but after this, the radio button is not getting checked(clicked). Im i doing something wrong. please help stackoverflow.com/questions/28052820/…

[rlazo]

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.

[jboxxpradhana]

this method need minimum sdk level 17 how can I make view like that if I have the minimum sdk level < 17

[user2729200]

you should use appcompat radiobutton to bypass sdk level limitation

[user924]

doesn't work if set programmatically rb.setGravity(Gravity.RIGHT);

[user1202032]

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

[MBT]

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.

[B001ᛦ]

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.

[Mehran Mahmoudkhani]

@muhammad-adil if you set supportRtl=" false " in manifest you won't get it

[Mohammad Reza Lohrasbi]

Thanks! This works. But android:layoutDirection="rtl" is not necessary.

[Brill Pappin]

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.

[Onik]

Seems like android:textAlignment is not needed.

[Annie]

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