The majority of mobile apps are designed LTR (Left to Right), that is because the vast majority of the world languages are written from Left to Right and only a small number of languages are written from Right to Left such as Arabic. Most of mobile developers never worry about this issue since most of the apps are not intended to target users from regions using languages written from Right to Left also because it was not as easy as it is now to support both directions. As the competition started heating up, it became important to globalize the apps and provide localized versions in order to reach more users and improve app downloads. Moreover, the rise of mobile apps development in these Arabic-speaking countries made it crucial to provide RTL support.
It is very easy to provide localized versions for different LTR languages in android apps by just providing another strings.xml file under values-XX folder where XX is the language code which contains all the translations for the strings used in this app.
Android 4.2(API 17) released in 2013 has provided full Native support for RTL layouts; it has become very easy to take advantage of this feature and all you need are just few simple changes in your code.
How to start:
First of all, in your Manifest.xml file, you need to declare under the <application> element android:supportsRtl=”true”
Use Start and End layout properties instead of Left and Right, respectively. In LTR layouts, start means left and end means right; however, in RTL start means right and end means left.
Examples for these properties are Padding, Margin, TextView Drawables, Gravity, LayoutGravity, and layout alignments.
In case you need a custom layout in for RTL, just provide the layout with the same name under ldrtl qualifier
Drawables:
Usually the icons you are using are direction independent, so you will not need alternative drawable for RTL; however, there are some cases where you will have to, for example, the back button.
Normally for LTR this is how it looks like:
If you use the same button for RTL this is how it will look like:
While what you need is this:
You can achieve this by mirroring the icon using an external tool and add the new icon with the same name in drawable-ldrtl folder, or just use the forward navigation button and change it’s name in “drawable-ldrtl” folder
In case your minimum SDK is 19, you can use android:autoMirrored=”true” attribute in vector drawables where as the name implies will automatically mirror the icon vertically in case the direction is RTL
Text appearance:
For more control over the text appearance, you can use these attributes
android:textAlignment — attribute for setting the alignment of a component’s text.
android:textDirection — attribute for setting the direction of a component’s text.
Use gravity for textAlignment which is default for the root view. The gravity determines the alignment, ALIGN_NORMAL, ALIGN_CENTER, or ALIGN_OPPOSITE, which are relative to each paragraph’s text direction
Use locale for textDirection which makes the paragraph direction is coming from the system Locale.
To apply these attributes you can add it each textview or globally by adding it to main AppTheme in styles.xml
<item name="android:textAlignment">gravity</item> <item name="android:textDirection">locale</item>
To know about the variations of textAlignment and textDirection attributes check
https://developer.android.com/reference/android/R.attr.html#textAlignment
https://developer.android.com/reference/android/R.attr.html#textDirection
Application Language Preference:
All the mentioned-above is sufficient to provide RTL layout and in case the app is supposed to follow the device’s language then nothing more is needed. However, in case the user is supposed to be able to choose a specific language, then few more lines of code are needed.
To change the Locale of the application programmatically use the following
String langCode=”ar”; getContext().getApplicationContext().getResources().updateConfiguration(changeLanguage(code)), getResources().getDisplayMetrics());
public static Configuration changeLanguage(String code) {
Locale locale = new Locale(code);
Locale.setDefault(locale);
Configuration config = new Configuration();
config.locale = locale;
return config;
}
Then restart the activity to apply the changes
startActivity(getIntent()); finish();
However, if the user changed the language of the device, the app will be affected, and in order to prevent that use configChanges attribute under each <activity> element in the Manifest and list Locale and layoutDirection as the changes you would like to handle manually.
android:configChanges=”locale|layoutDirection”
This prevents the application from recreating the activity then override onConfigurationChanged in the activity
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
…
…
}
Then you can reapply the user’s configuration for the app again in onConfigurationChanged
getContext().getApplicationContext().getResources().updateConfiguration( changeLanguage(Session.getLanguage()), getResources().getDisplayMetrics());
Fallback to LTR:
It is possible to force a certain layout direction using android:layoutDirection, it can be useful, for example, when using a ViewPager and TabLayout, the default sliding animation is LTR when doesn’t change in RTL. So a possible solution is to keep the android:layoutDirection=”ltr” and reverse the tabs orders and fragments programmatically. You can check at runtime if the layout is RTL using this method in TextUtils getLayoutDirectionFromLocale .
Another example is the phone number field, numbers direction are always LTR which means it does not change with language direction, so a possible solution is to use Left and Right instead of Start and End or use android:layoutDirection=”ltr” for the parent view.
Hopefully these tips could help you with your developing any application in Arabic. Please don’t hesitate to comment below if you have any questions regarding RTL support in android or anything regarding android development in general. Finally please refer to the official android blog for more information about native RTL support.
https://android-developers.googleblog.com/2013/03/native-rtl-support-in-android-42.html
