androidmaterial-designmaterial-components-androidradio-groupandroid-radiobutton

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


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

enter image description here

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.

enter image description here


Solution

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

    Output