Reputation: 427

Xamarin Listview doesnt follow the rtl direction

Helly guys. Im learning xamarin and trying to make a basic food app for android. This app is in RTL direction. Now i have a Listview in my main content which contains a list of custom layouts. Here is a look at this custom layout. I is RTL in Xamarin Designer windows.

And this is the layout axaml code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layoutDirection="rtl"
android:textDirection="rtl">
<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/linearLayout2">
    <ImageView
        android:src="@drawable/rating4"
        android:id="@+id/imgRating"
        android:layout_width="70dp"
        android:layout_height="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp" />
    <ImageView
        android:src="@drawable/defaultthumbnail"
        android:id="@+id/imgThumbnail"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp" />
    <TextView
        android:text="10,000 تومان"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textStyle="bold"
        android:id="@+id/foodPrice"
        android:layout_marginLeft="5dp"
        android:textDirection="rtl" />
</LinearLayout>
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:layout_marginRight="20dp">
    <TextView
        android:text="نام غذا"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtFoodName"
        android:textSize="20sp"
        android:textStyle="bold" />
    <TextView
        android:text="توضیحات غذا"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:id="@+id/txtFoodDesc" />
    <TextView
        android:text="تاریخ"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/txtDate"
        android:textSize="8sp"
        android:textAllCaps="false" />
    <TextView
        android:text="آشپز"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtCook"
        android:textSize="8sp"
        android:textAllCaps="false" />
</LinearLayout>

And this is my main layout which this listview is in it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:id="@+id/mainContentLayout"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main"
    android:layoutDirection="rtl"
    android:textDirection="rtl">
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mainContentListView"
        android:layoutDirection="rtl"
        android:textDirection="rtl" />
</LinearLayout>

But when i run this this is what i get

as you can those 2 linearlayouts inside are following the rule of RTL but are inverted.

Upvotes: 3

Answers (2)

Robbit

Reputation: 4358

About android:supportsRtl="true", you can refer to this, it's default value is false.

From your layout axaml code, it displays in VS's Design as:

But it display in AS's Design as:

It is same as the result what you have run.

So, there is something wrong with VS's Design.

If I didn't misread your question, what you want to get is:

So, you need change your layout axaml code to below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layoutDirection="rtl"
    android:textDirection="rtl">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout2">
        <ImageView
            android:src="@drawable/pause"
            android:id="@+id/imgRating"
            android:layout_width="70dp"
            android:layout_height="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp" />
        <ImageView
            android:src="@drawable/dapao"
            android:id="@+id/imgThumbnail"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp" />
        <TextView
            android:text="10,000 تومان"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textStyle="bold"
            android:id="@+id/foodPrice"
            android:layout_marginLeft="5dp"
            android:textDirection="rtl" />
    </LinearLayout>
<View
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="match_parent"/>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp">
        <TextView
            android:text="نام غذا"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtFoodName"
            android:textSize="20sp"
            android:textStyle="bold" />
        <TextView
            android:text="توضیحات غذا"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:id="@+id/txtFoodDesc" />
        <TextView
            android:text="تاریخ"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/txtDate"
            android:textSize="8sp"
            android:textAllCaps="false" />
        <TextView
            android:text="آشپز"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtCook"
            android:textSize="8sp"
            android:textAllCaps="false" />
    </LinearLayout>
</LinearLayout>

Upvotes: 0

Shadi Fayed

Reputation: 397

I had the same problem and I fixed it by adding the following in the application's manifest:

<manifest>
    <application>
    android:supportsRtl="true"
    </application>
</manifest>

default emulator and preview didn't work well with "RTL" languages. try to test on real android device or try xamarin live player.
also some android devices force "ltr" when the android interface language is English,try to change android language to a "RTL' language.

Upvotes: 1

Xamarin Listview doesnt follow the rtl direction

Answers (2)

Related Questions