New news Xamarin Forms, Xamarin

Getting started with Right-to-left localization

Usually, we design our applications in a Left-To-Right way .. but.. What happens if we want to create an App in some language that use a Writing System in a  Right-To-Left way?.. There are a lot of languages such as  Hebrew , Arabic , Syriac and many more that use it.. Let’s see how to do this!

First of all you must have the following requirements:

✔  Update to Nightly version from Xamarin Forms .

✔  iOS 9 or higher version.

✔  API 17 or higher on Android.


Let’s Start!

What is FlowDirection Property?

This property puts the direction to UI Elements on the page. It is preferred to be settled on the initial layout because any afterwards changes can affect the performance during runtime.

FlowDirection supported values. Organize your UI elements as follows:

  • LeftToRight:          Left-Right direction.          (Default value for an element without a parent).
  • MatchParent:        Direction to the Parents.   (Default value for an element with      a parent.)
  • RightToLeft:          Right-Left direction.


Platform Implementation

To implement Right-to-Left locale, we have to do some steps for each platform to enable it. Let’s See.

Just add array items for the CFBundleLocalizations key with as much as languages as you want in Info.plist .

 In AndroidManifest.xml File just put following values:

                  minSdkVersion = 17    –   <uses-sdk android:minSdkVersion=“17” />

                  supportsRtl      = True  –  <application android:supportsRtl=“true”>

Just add in <Resources> node in Package.appxmanifest file , as much as languages as you need.

But what about my Device Language?

If you want to get to Device Language, you just have to put in your page or in your root layout the Static Device.FlowDirection, as i show bellow:

 

 


Limitations

In some cases FlowDirection cannot be used because there are some UI Elements that doesn’t support it.

Good Luck with your implementation!!! Let’s Start!!! 😎

Spanish post:

https://xamarinlatino.com/aprendamos-sobre-localización-rtl-right-to-left-en-xamarin-forms-23d911dcdc12

References:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/localization/right-to-left

Tagged , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *