Xamarin.Forms Localization

We’re always trying to reach more people with the apps we create. But to reach more people especially in different countries it’s important that our apps will support multiple languages!
To do so it’s the easiest way to add multi-language support before you gonna design your pages and hardcode every single string inside the controls or the view models.
It’s not that bad if you have already started without, but it could be some extra work for you to change the hardcoded strings…

Add multi-language support

Before we gonna start with adding resource files for our texts, we need to find out which language the user prefers. 🔍
To do so we can create a so-called dependency service to get the preferred language for each platform (iOS, Android) in the shared code.

Dependency Service

If you do not know what a dependency service is or how they work check out this post where I explain dependency services in Xamarin.

The first thing we need to do is to create an interface for our dependency service.

If you’ve created the interface head over to the Android and iOS project to implement the logic for each platform.

iOS implementation

In the iOS implementation, the GetPreferredLanguage() method gets, as the name suggested, the preferred language of the current iOS device.
With the SetLanguage() method we will set the culture of the current thread and UI thread to the preferred language we’ve just loaded from the device.

Android implementation

The implementation in android is pretty much the same as in iOS. We load the language from the device and set the culture of the current thread and UI thread to the language we’ve loaded. If we couldn’t load any language we will use English as the default language.

Creating the language files

When you’ve created the dependency service to get the preferred device language we can continue to create the resource file which contains the texts we are going to use.
To create this file go ahead and create a new folder in your shared project called “Languages”.
Create a new resource file called “AppResource.resx” into the folder you’ve just created.

Now that we’ve created the file we can add the strings we need in the UI’s.

Visual Studio for Mac and Resource files

Due to the missing resource editor in visual studio for Mac, you need to edit the file as XML based file. If you’ve had a lot of strings in your resource file this could be a bit of a mess to overview. If you don’t want to edit xml code there is a way to convert the resource file and edit it with an external program. I have to say that I’ve not tried this but it seems like a reasonable workaround.

Use the resource file

When we’ve entered all the strings we want to use in our UI we’ve prepared everything we needed for our app to be able to work with multiple languages! The last missing thing we need to do is to tell our xaml code to load the strings from the resource files. To be able to do this we need to write a small xaml markup extension that will load the value string for a provided key.
Creating a new custom markup extension is super easy 😀 Just create a new file called “TranslateExtension.cs” and inherit from IMarkupExtension. Inside the markup extension, we only check on which platform (iOS, Android) the code is currently running on and call the corresponding dependency service to get the preferred language.
To get the value for a specific key we have to implement the ProvideValue method. In this method, we will call an instance of the resource manager and try to get the value for the key and culture we’ve provided.
Here is the code for the markup extension:

Once you have this extension you could start to use it in your xaml code. You just have to add the dependency and you’re good to go.

And the result

Whats about other languages??

Now you probably asking yourself how this should help you with other languages… So the thing is to now support another language you just need to create a new AppResource file! It’s super easy! 😉
Let’s say you want to support german as a second language. Just create a file called AppResource.de.resx and add all the keys you’ve in your original resource file. That’s all! Now your app is capable to run in English and german. To support another language you just have to add a resource file for it and you’re done!

You can find the entire example at github.

Leave a Reply

Your email address will not be published.