ListView layout inconsistent rendering with RTL languages (Arabic)

Question

I have simple ListView with ArrayAdapter which is working just fine. The problems start with RTL language (Arabic in this case).

W

Answer 1

To support RTL alignment you first need to add android:supportsRtl="true" to the <application> element in your manifest file.

Major thing:-

• If your app only supports API ≥ 17, replace all the layout_marginLeft/layout_marginRight/paddingLeft/paddingRight or any other Left and Right layout property with Start and End equivalent. For example android:paddingLeft will be replaced with android:paddingStart.
• If your app supports API<17 then instead of replacing the Left and Right layout properties, add their Start and End layout property equivalent alongside.

Or you can just do for all layouts using Android Studio > Refactor > Add RTL support where possible…

For more references on RTL follow this article for drawables as well here It will surely solve your problem using each step.

Answer 2

Try manually setting the direction based on configuration (that is quite reliably updated based on device language) by adding rowView.setLayoutDirection(getContext().getResources().getConfiguration().getLayoutDirection()); in the getView of your ListAdapter.

From: ListView's first entry always incorrect for RTL

This solved my problem that was similar to your.

Answer 3

Try using a Relative Layout for your row items, with the gravity as 'start' and 'end' (instead of 'left' and 'right') to see if that helps.

(If you always want the image to be on a specific side then use left/right instead of start/end)

Also, make sure you have rtl support on in your Manifest file android:supportsRtl=true

https://developer.android.com/guide/topics/manifest/application-element.html

Answer 4

change your layout to:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:paddingBottom="5dp"
    android:paddingTop="5dp">

    <ImageView
        android:id="@+id/img"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:layout_width="50dp"
        android:layout_height="38dp"
        android:padding="1dp"
        />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/img"
        android:textSize="25sp" />

</RelativeLayout>

Answer 5

Try changing TextView gravity to this: android:gravity="center_vertical|right"

Answer 6

If you want to generalise rtl and ltr using the same layout, in my opinion the best way to deal with two ImageViews and make one Visible / Gone according to your need. Something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/img_rtl"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="1dp" />

        <ImageView
            android:id="@+id/img_ltr"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:layout_width="wrap_content"
            android:visibility="gone"
            android:layout_height="wrap_content"
            android:padding="1dp" />

        <TextView
            android:id="@+id/title"
            android:layout_toLeftOf="@id/img_rtl"
            android:layout_toRightOf="@id/img_ltr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textSize="25sp" >
        </TextView>

</RelativeLayout>

Make img_rtl 'visible' and img_ltr 'gone' in case of arabic texts and opposite in case of english, from your getView method.