Developing an app that supports multiple languages may seem a bit daunting, and many may completely skip it because of that exact same reason, but it might not be as gargantuan of a task as it may seem, in this post we are going to walkthrough some steps to add multiple languages in our Xamarin forms application.
It is important to remember that adding multiple languages to an app makes it much more accessible to a certain people and everyone should try to include it in their project.
Note: We are going to use these steps in the shared project and not for platform specific projects, once you add them it will work fine on all the platforms.
The steps are:
1) Add Resource files for every language.
2) Add the text to the resource files.
3) Add these resource files to the XAML file.(Add select language to the UI)
4) Add Globalization namespaces in the code behind for culture info.
Now, let’s get started.
1) Add Resource files to your project.
These resource files will contain the text for the labels that we will add in our markup, and also their corresponding language translations.
Make sure you add these for each language you want to add to the application. You can add a resource file by Right clicking on your project > Add > New Item > Resource File. These files will have .resx extension.
We follow a certain naming convention while naming these resource files
For example:
For English language the filename will be AppResources.resx, for Spanish it will be AppResources.es.resx .
2) Add text to the resource files.
These examples demonstrate how we add text for our labels in the markup and their respective translations.
Remember to add the namespaces for the resource file in the xaml file.
3) Add resources to the Markup(Add select Language to the UI)
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Language.MainPage"
xmlns:resource="clr-namespace:Language.Resources"
Title="Select Language">
<StackLayout Margin="30,30,30,30"
VerticalOptions="Center">
<Picker x:Name="LanguagePicker" Title="Select Language" HorizontalOptions="FillAndExpand" VerticalOptions="Center">
<Picker.Items>
<x:String>English</x:String>
<x:String>Spanish</x:String>
<x:String>Hindi</x:String>
</Picker.Items>
</Picker>
<Button Text="{x:Static resource:AppResources.SelectLanguage}" Clicked="OnUpdateLangugeClicked" HorizontalOptions="FillAndExpand" VerticalOptions="Center"
BackgroundColor="Black" TextColor="White"/>
</StackLayout>
</ContentPage>
This is the Markup for the main page which is of type Navigation Page and it contains a picker for choosing the languages and a button for navigating to the forms page.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Language.Page1"
xmlns:resource="clr-namespace:Language.Resources"
Title="Form">
<ContentPage.Content>
<StackLayout Margin="20,20,20,20"
>
<Label Text="{x:Static resource:AppResources.Name}"
HorizontalOptions="StartAndExpand"
FontAttributes="Bold"
FontSize="Medium"/>
<Entry/>
<Label Text="{x:Static resource:AppResources.FathersName}"
HorizontalOptions="StartAndExpand"
FontAttributes="Bold"
FontSize="Medium"/>
<Entry/>
<Label Text="{x:Static resource:AppResources.MothersName}"
HorizontalOptions="StartAndExpand"
FontAttributes="Bold"
FontSize="Medium"/>
<Entry/>
<Label Text="{x:Static resource:AppResources.DateOfBirth}"
HorizontalOptions="StartAndExpand"
FontAttributes="Bold"
FontSize="Medium"/>
<Entry/>
<Button Text="{x:Static resource:AppResources.Save}" BackgroundColor="Black" TextColor="White"/>
<Button Text="{x:Static resource:AppResources.ChangeLanguage}" Clicked="Button_Clicked" BackgroundColor="Black" TextColor="White"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Note: The Highlighted code.
This is the code for the forms page that includes labels, entries and two buttons whenever we select a language on the mainpage these labels will be rendered in that specific language.
Now we will add the code behind for this page.
4) Add Globalization in the code behind for culture info.
using Language.Resources;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace Language
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
async void OnUpdateLangugeClicked(object sender, System.EventArgs e)
{
if (LanguagePicker.SelectedItem != null)
{
var language = CultureInfo.GetCultures(CultureTypes.NeutralCultures).ToList().First(element => element.EnglishName.Contains(LanguagePicker.SelectedItem.ToString())); ;
Thread.CurrentThread.CurrentUICulture = language;
AppResources.Culture = language;
await Navigation.PushAsync(new Page1());
}
}
}
}
And we are all set, this will help us to switch between different languages whenever we need.
Note: The Highlighted Code
