Right-to-left localization

Right-to-left localization adds support for right-to-left flow direction to Xamarin.Forms applications.

Note

Right-to-left localization requires the use of iOS 9 or higher, and API 17 or higher on Android.

Flow direction is the direction in which the UI elements on the page are scanned by the eye. Some languages, such as Arabic and Hebrew, require that UI elements are laid out in a right-to-left flow direction. This can be achieved by setting the VisualElement.FlowDirection property. This property gets or sets the direction in which UI elements flow within any parent element that controls their layout, and should be set to one of the FlowDirection enumeration values:

Setting the FlowDirection property to RightToLeft on an element generally sets the alignment to the right, the reading order to right-to-left, and the layout of the control to flow from right-to-left:

TodoItemPage in Arabic with a right-to-left flow direction

Tip

You should only set the FlowDirection property on initial layout. Changing this value at runtime causes an expensive layout process that will affect performance.

The default FlowDirection property value for an element without a parent is LeftToRight, while the default FlowDirection for an element with a parent is MatchParent. Therefore, an element inherits the FlowDirection property value from its parent in the visual tree, and any element can override the value it gets from its parent.

Tip

When localizing an app for right-to-left languages, set the FlowDirection property on a page or root layout. This causes all of the elements contained within the page, or root layout, to respond appropriately to the flow direction.

Respecting device flow direction

Respecting the device's flow direction based on the selected language and region is an explicit developer choice and does not happen automatically. It can be achieved by setting the FlowDirection property on a page, or root layout, to the static Device.FlowDirection value:

<ContentPage ... FlowDirection="{x:Static Device.FlowDirection}"> />
this.FlowDirection = Device.FlowDirection;

All child elements of the page, or root layout, will by default then inherit the Device.FlowDirection value.

Platform setup

Specific platform setup is required to enable right-to-left locales.

iOS

The required right-to-left locale should be added as a supported language to the array items for the CFBundleLocalizations key in Info.plist. The following example shows Arabic having been added to the array for the CFBundleLocalizations key:

<key>CFBundleLocalizations</key>
<array>
    <string>en</string>
    <string>ar</string>
</array>

Info.plist supported languages

For more information, see Localization Basics in iOS.

Right-to-left localization can then be tested by changing the language and region on the device/simulator to a right-to-left locale that was specified in Info.plist.

Warning

Please note that when changing the language and region to a right-to-left locale on iOS, any DatePicker views will throw an exception if you do not include the resources required for the locale. For example, when testing an app in Arabic that has a DatePicker, ensure that mideast is selected in the Internationalization section of the iOS Build pane.

Android

The app's AndroidManifest.xml file should be updated so that the <uses-sdk> node sets the android:minSdkVersion attribute to 17, and the <application> node sets the android:supportsRtl attribute to true:

<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
    <uses-sdk android:minSdkVersion="17" ... />
    <application ... android:supportsRtl="true">
    </application>
</manifest>

Right-to-left localization can then be tested by changing the device/emulator to use the right-to-left language, or by enabling Force RTL layout direction in Settings > Developer Options.

Universal Windows Platform (UWP)

The required language resources should be specified in the <Resources> node of the Package.appxmanifest file. The following example shows Arabic having been added to the <Resources> node:

<Resources>
    <Resource Language="x-generate"/>
    <Resource Language="en" />
    <Resource Language="ar" />
</Resources>

In addition, UWP requires that the app's default culture is explicitly defined in the .NET Standard library. This can be accomplished by setting the NeutralResourcesLanguage attribute in AssemblyInfo.cs, or in another class, to the default culture:

using System.Resources;

[assembly: NeutralResourcesLanguage("en")]

Right-to-left localization can then be tested by changing the language and region on the device to the appropriate right-to-left locale.

Limitations

Xamarin.Forms right-to-left localization currently has a number of limitations:

iOS

Android

UWP

Right to left language support with Xamarin.University

Xamarin.Forms 3.0 Right-to-Left Support, by Xamarin University