How to set text (Alignment First) followed by radiobutton on MaterialRadioButton in android

Question

How to achieve this design. (First text then radio button)

Here is my code

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

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

        <com.google.android.material.radiobutton.MaterialRadioButton
            android:id="@+id/txtPopular"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/urgent" />

        <com.google.android.material.radiobutton.MaterialRadioButton
            android:id="@+id/txtPopular"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/popular" />

        <com.google.android.material.radiobutton.MaterialRadioButton
            android:id="@+id/txtHighToLow"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/hightlow" />

    <com.google.android.material.radiobutton.MaterialRadioButton
            android:id="@+id/txtLowToHigh"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lowthigh" />
    </RadioGroup>
</LinearLayout>

Hers is my design screenshot

I've referred, but most links are Separate TextView with RadioButton. Please share your valuable inputs. Thanks.

you can use textview then radioButton without android:text="" — androidLearner, May 23 '21 at 02:27
If I were you, I would use text view with drawable right or text view with image view on the right for each item. For the image, we can use a selector with the selected state. The item layout will receive the selected state while the image view/text view will duplicate parent state. — Tuan Chau, May 23 '21 at 02:36

score 2 · Accepted Answer · answered May 23 '21 at 03:33

Try this

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

        <RadioButton
            android:id="@+id/btn1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="?android:attr/listChoiceIndicatorSingle"
            android:background="?android:selectableItemBackground"
            android:layout_gravity="start"
            android:textAlignment="textStart"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="Urgent"/>

        <RadioButton
            android:id="@+id/btn2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="?android:attr/listChoiceIndicatorSingle"
            android:background="?android:selectableItemBackground"
            android:layout_gravity="start"
            android:textAlignment="textStart"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="Popular" />

        <RadioButton
            android:id="@+id/btn3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="?android:attr/listChoiceIndicatorSingle"
            android:background="?android:selectableItemBackground"
            android:layout_gravity="start"
            android:textAlignment="textStart"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="High to Low"/>

        <RadioButton
            android:id="@+id/btn4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="?android:attr/listChoiceIndicatorSingle"
            android:background="?android:selectableItemBackground"
            android:layout_gravity="start"
            android:textAlignment="textStart"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="Low to High"/>
    </RadioGroup>

This is working fine as I've expect, Thanks for sharing. But in RTL we can write code on programmatically for text and button direction. I'm right? — RaJ, May 24 '21 at 03:50
yes @RaJ you can also write in ```XML``` using ```android:layoutDirection="rtl"``` — Ganesh MB, May 24 '21 at 05:05
Yes, correct but we can set android:drawableRight="?android:attr/listChoiceIndicatorSingle" this type so that in RTL cannot change the layout. Can i write code on programmatically for separate like drawableLeft? — RaJ, May 24 '21 at 06:05
yep @RaJ you can also set programmatically like this ```radioBtn.setButtonDrawable(R.drawable.ic_my_radio_btn);``` — Ganesh MB, May 24 '21 at 06:17

How to set text (Alignment First) followed by radiobutton on MaterialRadioButton in android

1 Answers1