Supporting multi-language in your iOS app

When you create your application for iPhone and/or iPad, one of the main features you surely take into consideration, is, which community you are intending to target? What range of languages shall your app supports?

In this tutorial, you’ll go through the basics on how to make your app multi-language.

I use Xcode 4.3.2, i guess working on earlier versions will be ok, otherwise, you may consider to upgrade.

How it works

Let’s take the famous Instagram app as an example, the range of supported languages is: English, Chinese, French, German, Italian, Korean, Spanish, Japanese and Portuguese.

The idea is the following : When you launch Instagram, the app will catch the default language that you set in Settings and look for the Localizable strings file that match it. If a convenient file for the device language deos exist, Instagram displays texts in that language. Otherwise, it will remain texts in English.

Try it yourself, change your device language in Settings -> General -> International -> Language to french, and run Intsagram, you will notice the text is displayed in french. Do the same for Italian and Spanish and all supported languages by Instagram, texts follows the chosen language 🙂

Try to change to Suomi language (for example). You may notice, the Instagram texts revert to English since Instagram doesn’t support that language.

Let’s do it for your app, open up Xcode (File menu/New/Project), select the Single View Application template, call the project LocalizableApp, choose where to save it on your hard disk and click Create.

P.S : For the sake of this tutorial, two languages will be added (English and French). After you learn how to do it, you can add as many languages as you want :]

Expand your project in Project navigator and select InfoPlist.strings file.

I always change my InfoPlist.strings file name to Localizable.strings to refer to my app translations text. So right click on InfoPlist and change it to Localizable :]

Select your project from the Project navigator, and then switch to the info tab as shown below :

In Localizations group, select the “+” button to duplicate a localization file in French.

So far, you may notice two new Localizable.strings (English and French) files just added to the Localizable group in your project navigator :]

The same way you added the French Localizable file, you can do for the German, Italian or any language provided in the list and supported by iOS.

Now, you are going to fill in these strings file with your text in both English and French in order to display the right text when you change your device language to French :]

Simple click on Localizable.strings (English) file to open it in the Standard editor. A localizable file format consists of one or more key-value pairs with optional (but useful) comments.

Change the content of the strings file you just opened to something like this:

[objc]

/* Launch Alert Message*/
"ALERT_MSG"="This tutorial shows you how to make multi-language app!";
/*Cancel button*/
"CANCEL_BUTTON"="Cancel";
[/objc]

Now Switch to Localizable.strings (French)  and change it content to look like this:

[objc]
/* Launch Alert Message*/
"ALERT_MSG"= "Ce tutoriel vous montre comment faire une application multi-langue!";
/*Cancel button*/
"CANCEL_BUTTON"="Annuler";
[/objc]

Now that your texts translations are available, the only part that left, is to call the right text in the right time :]

You are going to make a simple UIAlertView that shows up when you launch your app, and display the text called ALERT_MSG.

Click on ViewController.m to open it in the editor, and change the viewDidLoad code to the one below:

[objc]
– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

UIAlertView *launchAlert=[[UIAlertView alloc]initWithTitle:@""
message:NSLocalizedString(@"ALERT_MSG", nil)
delegate:self cancelButtonTitle:NSLocalizedString(@"CANCEL_BUTTON", nil)
otherButtonTitles:@"", nil];

[launchAlert show];
[launchAlert release];

}

[/objc]

Build your project to make sure everything goes fine and run it :]

If your device settings language is set to English, you must see the alert message in English, as below.

Change your device language to French and run the application again, now the text is changed
automatically into French.

Simple, isn’t? :]

Now you can add as many Localizations files as you want, to support other languages, without the
need to change in the code 😉
Feel free to leave a comment. I’d love to hear your thoughts!