Add Languages to Your Xamarin Apps with Multilingual App Toolkit
With Xamarin, you can extend your cross-platform apps with support for native speakers, reaching markets that might otherwise be overlooked. However, managing multiple languages and keeping everything current can be challenging, especially if you’re not fluent inthose languages.
This is where theMultilingual App Toolkit (MAT)can help by automatingthe management of your language support, so you can focus on what you do best: build great cross-platform apps!
Before getting started, it’s important to note that most project templates arenotlocalization enabled. Fortunately, adding localization support is straightforward. Once you do the initial setup, your app will be ready to travel the world.
Getting Started
Let’s look quickly at this process using a Xamarin.Forms sample. TheLocalizationSampleproject has all the plumbing and is available on GitHub.
Wiring up localization can be done quickly using a NuGet calledMultilingual (Localization) Plugin for Xamarin and Windows. The documentation is straightforward, with the core being the addition of theTranslationExtension
class to provide XAML binding for your app’s resources. Here’s the code-snippetPlugin.Multilingual
used to wire up access to the resources:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | [ContentProperty("Text")] publicclassTranslateExtension:IMarkupExtension { conststringResourceId="LocalizationSample.Resources.AppResources"; staticreadonlyLazy resmgr= newLazy(()=> newResourceManager(ResourceId,typeof(TranslateExtension) .GetTypeInfo().Assembly)); publicstringText{get;set;} publicobjectProvideValue(IServiceProvider serviceProvider) { if(Text==null) return""; varci=CrossMultilingual.Current.CurrentCultureInfo; vartranslation=resmgr.Value.GetString(Text,ci); if(translation==null) { translation=Text;// returns the key, which GETS DISPLAYED TO THE USER } returntranslation; } } |
Of course, you’ll need a place to store the localizable text. Using the familiar RESX file with Xamarin.Forms makes this a snap. Simply add a folder named “Resources” to the SampleLocalization project. In this folder, addAppResources.resx
and “HelloWorld” with the value “Hello from App Resource” to the new RESX file:
The final step before all the wiring is complete is to replace the hard-coded text in the XAML code with bindings that will retrieve the text from the resource file. All that remains is adding a reference to theTranslateExtension
and applying the binding, like so:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?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:i18n="clr-namespace:LocalizationSample.Helpers;assembly=LocalizationSample" xmlns:local="clr-namespace:LocalizationSample" x:Class="LocalizationSample.MainPage" Title="Let's Translate!"> <StackLayout Padding="20"> <Label Text="{i18n:Translate HelloWorld}" LineBreakMode="WordWrap"/> <Label Margin="0,60,0,0" Text="Translate this automatically" LineBreakMode="WordWrap" x:Name="LabelTranslate"/> <Picker ItemsSource="{Binding Languages}" ItemDisplayBinding="{Binding DisplayName}" x:Name="PickerLanguages"/> </StackLayout> </ContentPage> |
Running the app should now display the English string “Hello from App Resource” as well as the still hard-coded text values:
Traditionally, after ensuring the localization is wired up and displaying correctly, you would finish adding all the app’s resource data before considering adding additional languages to avoid managing the changes to the resource or the related translation during the ongoing development process. This can be a challenge with only one or two additional languages, but becomes daunting very quickly as more languages are added.
It’s best to validate that your app’s language support is working correctly throughout the development process to avoid bugs that may delay your app’s release, or worse, cause you to reduce market support by cutting additional language support.
This is where theMultilingual App Toolkit (MAT)comes in. It manages your target REXS files by applying on-demand Machine Translations throughout the development process. Once development nears completion, you can have the translations proofed and adjusted by family, friends, co-workers, or translation vendors.
Install and Enable
To Install the Multilingual App Toolkit(MAT), just use Visual Studio’sTools -> Extensions and Updatesmenu:
After the installation is completed, you will need to ensure your app has defined the default app language. This is the language displayed if the app doesnotsupport the language of the device. It’s also the language MAT uses to know how to translate into other languages.
To check theNeutral Language, right-click theLocalizationSample
project and selectProperties. On the package tab, theAssembly Neutral Languagevalue determines the app’s default language. This should be set to the language you use in yourAppResources.resx
file. In this example, it will be English (en-US):
MAT needs to be enabled for any project that has localizable text. This is done by selecting the project in theSolution Explorer, then theTools -> Multilingual App Toolkit -> Enabled selection:
Adding target languages is as simple as right-clicking on the project and selectingMultilingual App Toolkit -> Add translation languages. Remember to set up theAzure Cognitive Service configurationfor MAT’s Microsoft Translator provider first.
After selecting the desired language and clicking “OK” and MAT will add two files for every language selection, an.XLF fileand the corresponding.RESX file. The .XLF file is an XLIFF 1.2 industry standard file that is designed to support translation data. The related RESX files are managed by MAT and used by Visual Studio to add the desired language support to your app.
Selecting one or more .XLF file enables the menus that allow for Machine Translation or even exporting for external localization. SelectGenerate machine translationsto apply machine-generated translations to your project:
Note: Before building, ensure the Package Action is set toXliffResource
. This setting is used by the build task to update related RESX with the translation in the .XLF file. Without this setting, your app will not contain the translation:
Now it’s time to build and run your app! Language picking in the sample is configured dynamically; you can switch the text for easy testing. For more application, let the device’s language pick the app’s language automatically.