Localizing Xamarin.Forms With Hindi Language

using System.Globalization;  
namespace HindiXamApp  
{  
    public interface ILocalize  
    {  
        CultureInfo GetCurrentCultureInfo();  
        CultureInfo GetCurrentCultureInfo(string sLanguageCode);  
        void SetLocale();  
        void ChangeLocale(string sLanguageCode);  
    }  
}  

using System;  
using System.Globalization;  
using System.Threading;  
   
using Foundation;  
using Xamarin.Forms;  
   
[assembly: Dependency(typeof(HindiXamApp.iOS.LocaleService))]  
namespace HindiXamApp.iOS  
{  
    public class LocaleService : ILocalize  
    {  
        public CultureInfo GetCurrentCultureInfo()  
        {  
            var iosLocaleAuto = NSLocale.AutoUpdatingCurrentLocale.LocaleIdentifier;    // en_FR  
            var iosLanguageAuto = NSLocale.AutoUpdatingCurrentLocale.LanguageCode;      // en  
            var netLocale = iosLocaleAuto.Replace("_", "-");  
            const string defaultCulture = "en";  
   
            CultureInfo ci = null;  
            if (NSLocale.PreferredLanguages.Length > 0)  
            {                 
                try  
                {  
                    var pref = NSLocale.PreferredLanguages[0];  
                    var netLanguage = pref.Replace("_", "-");  
                    ci = CultureInfo.CreateSpecificCulture(netLanguage);  
                }  
                catch  
                {  
                    ci = new CultureInfo(defaultCulture);  
                }  
            }  
            else  
            {  
                ci = new CultureInfo(defaultCulture); // default, shouldn't really happen <img draggable="false" class="emoji" alt="" src="https://s.w.org/images/core/emoji/72x72/1f642.png">  
            }  
            return ci;  
        }  
        public CultureInfo GetCurrentCultureInfo(string sLanguageCode)  
        {  
            return CultureInfo.CreateSpecificCulture(sLanguageCode);  
        }  
        public void SetLocale()  
        {  
            var ci = GetCurrentCultureInfo();  
            Thread.CurrentThread.CurrentCulture = ci;  
            Thread.CurrentThread.CurrentUICulture = ci;  
            Console.WriteLine("SetLocale: " + ci.Name);  
        }  
        public void ChangeLocale(string sLanguageCode) {  
            var ci = CultureInfo.CreateSpecificCulture(sLanguageCode);  
            Thread.CurrentThread.CurrentCulture = ci;  
            Thread.CurrentThread.CurrentUICulture = ci;  
            Console.WriteLine("ChangeToLanguage: " + ci.Name);  
        }        
    }  
}  

using System;  
using System.Globalization;  
using System.Threading;  
using Xamarin.Forms;  
   
[assembly: Dependency(typeof(HindiXamApp.Droid.LocaleService))]  
namespace HindiXamApp.Droid  
{  
    public class LocaleService : ILocalize  
    {  
        public CultureInfo GetCurrentCultureInfo()  
        {  
            var androidLocale = Java.Util.Locale.Default; // user's preferred locale  
            var netLocale = androidLocale.ToString().Replace("_", "-");  
  
            #region Debugging output  
            Console.WriteLine("android:  " + androidLocale.ToString());  
            Console.WriteLine("netlang:  " + netLocale);  
   
            var ci = new CultureInfo(netLocale);  
            Thread.CurrentThread.CurrentCulture = ci;  
            Thread.CurrentThread.CurrentUICulture = ci;  
            Console.WriteLine("thread:  " + Thread.CurrentThread.CurrentCulture);  
            Console.WriteLine("threadui:" + Thread.CurrentThread.CurrentUICulture);  
            #endregion  
   
            return ci;  
        }  
        public CultureInfo GetCurrentCultureInfo(string sLanguageCode)  
        {  
            return CultureInfo.CreateSpecificCulture(sLanguageCode);  
        }  
        public void SetLocale()  
        {  
            var ci = GetCurrentCultureInfo();  
            Thread.CurrentThread.CurrentCulture = ci;  
            Thread.CurrentThread.CurrentUICulture = ci;  
        }  
        public void ChangeLocale(string sLanguageCode)  
        {  
            var ci = CultureInfo.CreateSpecificCulture(sLanguageCode);  
            Thread.CurrentThread.CurrentCulture = ci;  
            Thread.CurrentThread.CurrentUICulture = ci;  
            Console.WriteLine("ChangeToLanguage: " + ci.Name);  
        }  
    }  
}  

Since we are also going to use the values of resource files in XAML, we will have to write XAML extensions to read the values from resource files. To create a new class by the name of ‘TranslateExtension’ and copy the following code inside it.

using System;  
using System.Globalization;  
using System.Reflection;  
using System.Resources;  
using Xamarin.Forms;  
using Xamarin.Forms.Xaml;  
   
namespace HindiXamApp  
{  
    [ContentProperty("Text")]  
    public class TranslateExtension : IMarkupExtension  
    {  
        readonly CultureInfo ci;  
        const string ResourceId = "HindiXamApp.Resx.AppResources";  
   
        public TranslateExtension()  
        {  
            if (string.IsNullOrEmpty(App.CultureCode))  
            {  
                ci = DependencyService.Get<ILocalize>().GetCurrentCultureInfo();  
            }  
            else ci = DependencyService.Get<ILocalize>().GetCurrentCultureInfo(App.CultureCode);  
        }  
   
        public string Text { get; set; }  
   
        public object ProvideValue(IServiceProvider serviceProvider)  
        {  
            if (Text == null)  
                return "";  
   
            ResourceManager temp = new ResourceManager(ResourceId , typeof(TranslateExtension).GetTypeInfo().Assembly);  
            var translation = temp.GetString(Text, ci);  
            if (translation == null)  
            {  
#if DEBUG  
                throw new ArgumentException(string.Format("Key '{0}' was not found in resources '{1}' for culture '{2}'.", Text, ResourceId, ci.Name), "Text");  
#else  
                translation = Text; // HACK: returns the key, which GETS DISPLAYED TO THE USER  
#endif  
            }  
            return translation;  
        }  
    }  
}  

This completes the translation-related code changes of the application, now let's create the UI of the application. The application will have a Xamarin Forms ContentPage which will have a picker containing a list of languages and a table containing some static values. The static values of the table will by default appear in English and when the user selects ‘हिन्दी’ from the picker the content will change to Hindi. I want to give users the freedom to choose the language in the app rather than changing the language from device settings that's the reason I added ‘GetCurrentCultureInfo(string sLanguageCode)’ and‘ChangeLocale(string sLanguageCode)’ in the code. The XAML code of the ‘Homepage’ is as follows:

<?xml version="1.0" encoding="utf-8" ?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             xmlns:lEx="clr-namespace:HindiXamApp;assembly=HindiXamApp"  
             x:Class="HindiXamApp.HomePage">  
  <ContentPage.Padding>  
    <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />  
  </ContentPage.Padding>  
  <ContentPage.Content>  
    <Grid>  
      <Grid.RowDefinitions>  
        <RowDefinition Height="*"/>  
        <RowDefinition Height="*"/>  
        <RowDefinition Height="*"/>  
        <RowDefinition Height="*"/>  
        <RowDefinition Height="*"/>  
        <RowDefinition Height="*"/>  
        <RowDefinition Height="*"/>  
        <RowDefinition Height="*"/>  
      </Grid.RowDefinitions>  
      <Grid.ColumnDefinitions>  
        <ColumnDefinition Width="10"/>  
        <ColumnDefinition Width="*"/>  
        <ColumnDefinition Width="*"/>  
        <ColumnDefinition Width="10"/>  
      </Grid.ColumnDefinitions>  
      <Label Grid.Row ="0" Grid.Column="1" Text="{lEx:Translate SelectLanguage}" />  
      <Picker  Grid.Row="0" Grid.Column="2" x:Name="pkrLanguage" SelectedIndexChanged="OnPickerChanged" WidthRequest="50" >  
        <Picker.Items>  
          <x:String>English</x:String>  
          <x:String>हिन्दी</x:String>  
        </Picker.Items>  
      </Picker>  
      <Label Grid.Row ="1" Grid.Column="1" Text="{lEx:Translate Name}" />  
      <Label Grid.Row="1" Grid.Column="2"  Text ="{lEx:Translate NameValue}" />  
      <Label Grid.Row ="2" Grid.Column="1" Text="{lEx:Translate DateOfBirth}" />  
      <Label Grid.Row="2" Grid.Column="2" Text ="{lEx:Translate DOBValue}"/>  
      <Label Grid.Row ="3" Grid.Column="1" Text="{lEx:Translate Gender}" />  
      <Label Grid.Row="3" Grid.Column="2" Text ="{lEx:Translate GenderValue}"/>  
      <Label Grid.Row ="4" Grid.Column="1" Text="{lEx:Translate Address}"  />  
      <Label Grid.Row="4" Grid.Column="2" Text ="{lEx:Translate AddressValue}" />  
      <Label Grid.Row ="5" Grid.Column="1" Text="{lEx:Translate State}"  />  
      <Label Grid.Row="5" Grid.Column="2" Text ="{lEx:Translate StateValue}" />  
      <Label Grid.Row ="6" Grid.Column="1" Text="{lEx:Translate Country}"/>  
      <Label Grid.Row="6" Grid.Column="2" Text ="{lEx:Translate CountryValue}" />  
    </Grid>     
  </ContentPage.Content>  
</ContentPage>  

As it can be seen fron the above code that we are using ‘{lEx:Translate HomeButtonXaml}’ to set the text of the variables on basis of resource file values and lEx: is declared as local namespace xmlns:lEx=”clr-namespace:HindiXamApp;assembly=HindiXamApp” this basically let us use the above declared TranslateXAML extension.

The code written in code behind of ‘HomePage’, which contains the implementation of language change is as follows:

using System;  
using Xamarin.Forms;  
   
namespace HindiXamApp  
{  
    public partial class HomePage : ContentPage  
    {  
        public HomePage()  
        {  
            InitializeComponent();  
        }  
   
        public void OnPickerChanged(object sender, EventArgs args)  
        {  
            var vSelectedValue = pkrLanguage.Items[pkrLanguage.SelectedIndex];  
            if (vSelectedValue.Trim() == "हिन्दी")  
            {  
                DependencyService.Get<ILocalize>().ChangeLocale("hi");  
                App.CultureCode = "hi";  
            }  
            else  
            {  
              DependencyService.Get<ILocalize>().SetLocale();  
              App.CultureCode = string.Empty;  
            }  
            var vUpdatedPage = new HomePage();  
            Navigation.InsertPageBefore(vUpdatedPage, this);  
            Navigation.PopAsync();  
        }  
    }  
}  

As it can be seen from the above code, we are changing the culture of the application in‘OnPickerChanged’ event using dependency service code ‘ DependencyService.Get().ChangeLocale(“hi”);’, after that, we are setting the value of application level static variable ‘App.CultureCode’ so that the translate extension should be able to get the respective culture info from the platform and lastly we are creating a new object of the homepage and adding it to Navigation stack as updated culture info won’t work on the existing page object because it’s resources are already loaded. I have implemented an if statement as I am showing the example for only 2 languages if you are giving options for more languages I suggest to use switch statement.

I have just implemented one aspect of implementing localization. i.e. user Interface localization, but in order to make the application completely localized the database of the application should also support that which will change depending upon the need/requirements of the application. This application right now only supports Hindi, however, I would request everyone who knows/understand the other nine Indian languages to fork the code on Github, and add the resource file of those languages so that we could share the example containing all the Indian languages :).You can use this translator which I used to write Hindi. Let me know if I have missed anything or if you have any queries/suggestions.

Reference: Official Xamarin Forms Documentation