Android: radiobutton text not well aligned with number

Question

I have an unbelievable problem. I have 1 radiogroup with 2 radiobuttons, I'd like each radiobutton width is match_parent with text align on left. But I don't know why, the first one is aligned right as you can see on the picture

Here's the code

<RadioGroup
    android:id="@+id/rgPasswordSendMode"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="24dp"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="24dp"
    android:layout_marginBottom="32dp"
    android:divider="?android:attr/dividerHorizontal"
    android:orientation="vertical"
    android:showDividers="middle|end"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView">
     <RadioButton
        android:id="@+id/phoneRadioButton"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="start"
        android:layoutDirection="rtl"
        android:textAlignment="textStart"
        android:text="******6043" />
     <RadioButton
        android:id="@+id/emailRadioButton"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="start"
        android:layoutDirection="rtl"
        android:textAlignment="textStart"
        android:text="test@test.com" />
</RadioGroup>

When I change ******6043 by only ****** or other text, the label is well aligned on the left. Based on enter link description here, I added

android:button="@null"
android:drawableRight="?android:attr/listChoiceIndicatorSingle"
android:background="?android:selectableItemBackground"

but nothing changed.

Why it's like that and how to solve it?

Answer 1

To fix this you should add the android:textDirection="ltr" which defines the direction of the text from Left to Right. The android:layoutDirection="rtl" defines the direction of layout drawing so it will draw the radio button to the right side of text.

Your layout should be like the below:

<RadioGroup
    android:id="@+id/rgPasswordSendMode"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="24dp"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="24dp"
    android:layout_marginBottom="32dp"
    android:divider="?android:attr/dividerHorizontal"
    android:orientation="vertical"
    android:showDividers="middle|end"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <RadioButton
        android:id="@+id/phoneRadioButton"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layoutDirection="rtl"
        android:textDirection="ltr"
        android:text="******6043" />

    <RadioButton
        android:id="@+id/emailRadioButton"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layoutDirection="rtl"
        android:textDirection="ltr"
        android:text="test@test.com" />
</RadioGroup>

Result: