Android Apps: RTL Support

One of the most common issues when it comes to developing a web application that displays Arabic language is its capability to support RTL (Right-to-Left) text. Not only the text have to be displayed from right-to-left, but also all application components must be well-organized to handle this issue.

This topic covers the issues I have faced and how I solved them.

Issue #1:

The pink block (in the picture) displays the category name of an article. The block appears in the left side of the application, and we want it to be in the right side.

قبل حل المشكلة

Here is the code portion of xml file before solving the problem:

<TextView
   android:id="@+id/txtCategoryName"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textColor="@color/text_and_icon_color"
   android:textSize="@dimen/subhead"
   android:background="@color/accent_color"
   android:textAllCaps="true"
   android:paddingLeft="@dimen/caption_padding"
   android:paddingRight="@dimen/caption_padding"
   android:layout_marginTop="@dimen/standard_margin"
/>

The following lines were added to the TextView:

android:textDirection="anyRtl"
android:gravity="start"
android:textAlignment="gravity"
android:layout_gravity="right"

Result:

بعد حل المشكلة


Added: 2016/01/06

Issue #2:

We have fixed the first issue related to the TextView of category name, but what about the article content which is a WebView not a TextView!

WebView deals with HTML, so to make the text direction be right-to-left, we add the direction as shown in bold:

mWebContent.loadData("<body dir=RTL style='margin:0;padding:0;'>"+
 mContent + "</body>",
 "text/html; charset=utf-8", "UTF-8");

Result:

wpapp_rtl_3


رأي واحد حول “Android Apps: RTL Support”

التعليقات مغلقة.