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?

Can you use `match_content` for width and `wrap_content` for height — Skizo-ozᴉʞS ツ, Oct 04 '21 at 07:49

score 1 · Accepted Answer · answered Oct 06 '21 at 14:46

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:

Thank you so much. I spend so much time to find the solution. If I could, I'll kiss you :). Do you know why without ` android:textDirection="ltr"` it worked with text but not with number? — Turvy, Oct 06 '21 at 15:04
I think this it seems to be a bug in the RadioButton it should work for both letters and numbers after you have set the width to be match_parent and android:textAlignment="textStart" — MariosP, Oct 06 '21 at 15:26

Android: radiobutton text not well aligned with number

1 Answers1