RecyclerView RTL some items not adjusted-CodePudding

I'm using a RecyclerView to show a list of country codes, countries and flags respecively. The app is supporting RTL, so the layout of item is a simple Constraintlayout with 3 elements:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/selectable_background">

    <ImageView
        android:id="@ id/countryFlag"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@ id/countryName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textAlignment="viewStart"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@ id/countryCode"
        app:layout_constraintStart_toEndOf="@ id/countryFlag"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@ id/countryCode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

But sometimes I get this visual representation in RTL (Arabic) like this, where some items are not aligned properly. See Angola and Anguilla country items:

CodePudding user response：

You need a fixed width for the country code, this is what is misaligning the text

CodePudding user response：

There is no reason for countryName to fill the entire width, the constraint layout's width is already match_parent and countryName's start already aligned to the flag's end.

Align using constraints is much more stable then android:textAlignment attribute.

Edit it as follows

<TextView
        android:id="@ id/countryName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@ id/countryCode"
        app:layout_constraintStart_toEndOf="@ id/countryFlag"
        app:layout_constraintTop_toTopOf="parent" />

Happy to help