how to put the text on the left of a radio button in android
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>
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"/>
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:
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>