Reputation: 339

Fix Layout changes if device language is Arabic

I have to support both "ltr" and "rtl" in my app. I have tested my app on ltr and it works but when i tested my layouts on an arabic phone languague the images and the texts are dispersed

Issue

The image and textbox in rtl are inversed. I want the textbox and image position are same as in the "ltr"

My layout.xml:

   <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@color/Grey_50"
    app:cardCornerRadius="0dp"
    app:cardUseCompatPadding="true"
    card_view:cardCornerRadius="dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/image_news"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:layout_gravity="end"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:scaleType="fitXY" />

                <TextView
                    android:id="@+id/txt_news_title"
                    android:layout_width="match_parent"
                    android:layout_gravity="start"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_toLeftOf="@+id/image_news"
                    android:layout_marginRight="3dp"
                    android:textSize="13sp" />
                <View
                    android:id="@+id/view1"
                    android:layout_below="@+id/image_news"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="10dp" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/recent"
                            android:layout_width="15dp"
                            android:layout_height="15dp"
                            android:layout_alignParentLeft="true"
                            android:layout_alignParentStart="true"
                            android:layout_alignParentTop="true"
                            android:layout_gravity="center"
                            android:layout_marginRight="2dp"
                            android:background="@drawable/ic_recent"
                            android:textAlignment="center" />

                        <TextView
                            android:id="@+id/txt_timedate"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentTop="true"
                            android:layout_toEndOf="@+id/recent"
                            android:layout_toRightOf="@+id/recent"
                            android:text="20:49"
                            android:textColor="@color/Grey_600"
                            android:textSize="16sp" />
                </LinearLayout>
        </RelativeLayout>
</android.support.v7.widget.CardView>

Image showing app screen supporting ltr and rtl.

Upvotes: 0

Answers (3)

Mayur Patel

Reputation: 195

Need to make sure that android:supportsRtl is FALSE in androidManifest

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_original"
    android:label="@string/app_name"
    android:supportsRtl="false" />

Upvotes: 0

Nas

Reputation: 2198

set layout direction as ltr for the parent layout

Its only support from api level 17. If you want to support for previous api level you have to make separate xml layout file for arabic.

Upvotes: 2

shahid17june

Reputation: 1577

Replace your XML code with this

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@color/Grey_50"
    app:cardCornerRadius="0dp"
    app:cardUseCompatPadding="true"
    card_view:cardCornerRadius="dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layoutDirection="rtl">

        <ImageView
            android:id="@+id/image_news"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="end"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:scaleType="fitXY" />

        <TextView
            android:id="@+id/txt_news_title"
            android:layout_width="match_parent"
            android:layout_gravity="start"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/image_news"
            android:layout_toStartOf="@+id/image_news"
            android:layout_marginRight="3dp"
            android:textSize="13sp" />
        <View
            android:id="@+id/view1"
            android:layout_below="@+id/image_news"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="10dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/recent"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_gravity="center"
                android:layout_marginRight="2dp"
                android:background="@drawable/ic_recent"
                android:textAlignment="center" />

            <TextView
                android:id="@+id/txt_timedate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toEndOf="@+id/recent"
                android:layout_toRightOf="@+id/recent"
                android:text="20:49"
                android:textColor="@color/Grey_600"
                android:textSize="16sp" />
        </LinearLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

Upvotes: 1

Fix Layout changes if device language is Arabic

Answers (3)

Related Questions