Radio group text strangely misaligned in RTL language

Question

Radio group behaves strangely on my phone and the text is totally misaligned as shown in the image below, but the strange thing is that it's aligned correctly in the XML layout visualizer in android studio

Misaligned Image on my phone

The perfectly fine image on XML layout visualizer in android studio

The XML code of the layout

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:mlns="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="@dimen/_28dp_dp"
    android:background="@drawable/bg_rounded_screen"
    mlns:android="http://schemas.android.com/apk/res/android">

    ------
    <TextView
        android:id="@+id/textView"
        style="@style/HintTextStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_36dp_dp"
        android:text="@string/language"
        app:layout_constraintBottom_toTopOf="@+id/tg_group_language"
        app:layout_constraintStart_toStartOf="@+id/et_name"
        app:layout_constraintTop_toBottomOf="@+id/et_phone" />

    <RadioGroup
        android:id="@+id/tg_group_language"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_30dp_dp"
        android:orientation="horizontal"
        android:gravity="end"
        app:layout_constraintBottom_toTopOf="@+id/btn_save_changes"
        app:layout_constraintEnd_toEndOf="@id/et_name"
        app:layout_constraintStart_toStartOf="@id/et_name"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:singleSelection="true">

        <RadioButton
            android:id="@+id/radio_english"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/english" />

        <RadioButton
            android:id="@+id/radio_arabic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/عربي" />

    </RadioGroup>

   -----


</androidx.constraintlayout.widget.ConstraintLayout>

NB:

I didn't apply any styling programmatically
It seems it works fine when the language of the phone is RTL but when trying to force the language of the app to RTL while the phone is LTR (English) using this answer, it shows this misalignment

score 0 · Answer 1 · answered May 20 '21 at 16:18

0

Add this code your AndroidManifest xml file

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">

...

answered May 20 '21 at 16:18

Emre Şutuna

31
3

I had already applied supportsRTL in the manifest file. – David Ibrahim May 20 '21 at 19:30

score 0 · Answer 2 · answered May 20 '21 at 17:28

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" />

This solved it in the RTL screen but produced same issue when tried LTR language — David Ibrahim, May 20 '21 at 19:30

score 0 · Answer 3 · answered May 20 '21 at 19:10

0

 app:layout_constraintEnd_toEndOf="@id/et_name"
 app:layout_constraintStart_toStartOf="@id/et_name"

You got misalignment because of these two lines.if you want radio group at center use parent instead of et_name.

 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"

answered May 20 '21 at 19:10

androidLearner

1,654
1
7
13

I tried but this didn't solve it, actually, I don't know why these two lines will produce a problem everything mentioned in the whole XML is either end or start there are no left or right so everything should be positioned right – David Ibrahim May 20 '21 at 19:26

score 0 · Accepted Answer · answered May 20 '21 at 19:33

0

The only solution worked for me was adding this line in each radio button

 android:textAlignment="viewStart"

answered May 20 '21 at 19:33

David Ibrahim

2,777
4
17
41

Radio group text strangely misaligned in RTL language

4 Answers4