Using Inheritance to update Locale at run-time in Xamarin Forms

What our Client wanted?

Being a leading Engineering service provider in Kuwait, our client helps people with the sales, installation and maintenance of various products ranging from air conditioner to elevators etc. The company envisioned to build & launch B2C mobile app using Xamarin. This mobile app helps users to request & manage their service requests and to remove human errors. Corporate and Residential consumers of Kuwait form the user base of our client, where in some customers use English as their standard mode of usage while still many of them prefers to use their application in the local culture i.e. Arabic. Therefore, our client wanted a mobile app that would help offer its services in local language as well. Read the customer success story here.

Approach & Implementation – Using Inheritance to update Locale in Xamarin Forms

To overcome this challenge, our team of Xamarin developers considered the concept of localization i.e. application adapting to various local cultures of the market.

When we use built-in mechanism of RESX file in .NET, it takes care of the language; as RESX files holds the translated strings which are embedded in Xamarin.Forms. That means, when the locale of the application is set to English, all the strings registered in RESX file will be shown in english and if it is arabic, the content shows in Arabic, which is pretty straight forward.

However, the problem lies in handling the orientation of the screen and icons at run time. As Arabic culture follows Right-to-Left orientation, changing only the content to Arabic does not suffice our problem. The entire layout needs to be reversed.

This article covers the same in depth and will use inheritance to solve this issue.

Inheritance, as we all know forms the backbone of the object-oriented paradigm. Every business thrives on a good user base, hence the applications which essentially bridges the gap between users and businesses should be adaptable enough pertaining to the needs of the customer.

The approach used here follows the classic observer design pattern approach, where the UI elements become the subscribers and subscribe to an event which publishes/notifies all the subscribers when there is a change in the locale.

Understanding and implementation of RESX file functioning or any other localization mechanism and basic understanding of OOP concept are the pre-requisites for this implementation.

Let us start my creating a BaseClass say “BaseView” which inherits a content page and make sure that every ContentPage that we use in the application is inherited from our BaseView, which essentially is inherited from ContentPage, hence taking care of the VisualElement Hierarchy of Xamarin forms.

Create a delegate under the namespace of BaseView, which takes current culture as a parameter.

public delegate void AdjustIconsBasedOnCulture(string culture);

• Create a static event based on the above delegate say,
  public static event AdjustIconsBasedOnCulture AdjustIconEvent;

This event is to be subscribed by the created UI controls to update the flow direction of the icons used in them, for eg. Back button - in English locale back button would point to left while in Arabic locale it should point to Right, taking care of the RTL scope.

• Now create two methods, one is a type of eventhandler and another is a simple void method.
  • public void UpdatePageLayout(object sender, EventArgs e)
  • public void UpdatePageLayout()

UpdatePageLayout(object sender, EventArgs e) is to be subscribed by the used localisation mechanism, so every time user changes its preferred language i.e. from English to Arabic and vice-versa then the given event should be triggered which inturn notifies all the active pages in the navigation stack.

public void UpdatePageLayout() is to be called from the constructor of baseview, which every time a page loads, it checks the locale and sets the FlowDirection of the page.

FlowDirection is a property of every Visual element in Xamarin Forms (>3.0) which determines whether the page/control flows from right to left (RTL) or left to right (LTR).

• Create a virtual method which will handle the page level changes (if required), when the locale changes. For instance, an application on some page might have to call the api to get some required data in Arabic when the user changes its preferred language to Arabic etc.
  public virtual void HandlePageLevelChanges()
• Override this method in the pages where there is a requirement to handle any logic when the locale changes.
• Call this method from UpdatePageLayout event handler, so everytime the locale changes, UpdatePageLayout gets triggered and calls this method which when overridden in any of the active pages, gets triggered.

As can be seen from the above illustration, same screen follows different orientation in different locale! Happy coding!!