iOS App Localization: Change app language and app design layout from inside of the app without changing device language

iOS App Localization

iOS app localization, the term itself explain the purpose of this tutorial to most of the mobile developers. If you are not aware of app localization then with app localization, we means that a mobile app’s ability to support multiple languages thus increase its presence. Since the majority of people in this world speaks and understand their country native language and English is not their primary language. So in order to reach more audience we need to localize the app to different languages and this can be achieved using app localization. In this tutorial, we will earn how to localize iOS app.

Two ways to change app language

There are two ways with which we can allow app user’s to change app language

1) App language will be same as the device language(This is the default system on which iOS works). The main limitation of this approach is that if someone is not interested to change device language but he wants to change a particular app language.

2) Change app language from inside of the app. With this technique, we can allow users of our app to switch to different languages without changing or interfering with device language.

If you are interested in first option then please visit this post
https://iostutorialjunction.com/2015/03/How-to-add-localization-to-your-IOS-app-Tutorial.html

In this tutorial, we are going to cover second option for app localization in iOS app. Please follow below steps

Steps to change app language and user interface design of the app from inside of the app, without changing device language

Step 1: Open Xcode, and create a single view application project, name it “Localization-Tutorial”.

Step 2: Adding another language, English language is default development language. Follow steps as shown in images below to add other language support for the iOS app

As we click on ‘+’ icon a pop up will comes up with the listing of different languages, we will select ‘Arabic language’. We are covering Arabic localization in this tutorial

After selecting ‘Arabic’ as second language that our app supports, Xcode prompts with a popup showing that its going to create Localizable.strings files for Main.storyboard and LaunchScreen,storyboard. Click on finish button.

At this point we have localized our app for Arabic and English languages.

Step 3: We will design a user interface for the app, our user interface for the app will look like as shown in below image.

The UI(User interface) has a header label, current language label, and change language button at center of the screen.

Open main.storyboard and in ViewController’s view drag a UILabel (acts as header label) and give it constraints as shown below

Drag another UILabel ( acts as change language label ) just below header label and give it constraints as shown below

Finally drag a UIButton, so that we can change app language on clicking or tapping on it. Give it constraints as shown below

Step 4: Open ViewController.swift and create IBOutlet for UILabel’s, UIButton we added to main.storyboard and an IBAction that will trigger language change.

Step 5: Open Main.storyboard and connect the IBOutlet’s and IBAction to respective UIControl’s i.e. UILabel’s and UIButton

Now we also developed user interface for the app, but there is one doubt how can we get different text for UILabel’s and UIButton for both Arabic and English languages. Here come’s localizable.string file for the rescue.

Localizable.strings file

Localizable.strings files is a file where we placed translation data as a Key-value pair. To add Localizable.strings file, go to File->New->File , choose Strings File under Resource section of iOS, click Next and name it “Localizable“, press Finish.

On pressing Localize button, xcode will prompt with a popup, select ‘Arabic’ from dropdown menu and click Localize. Now on your right hand side pane instead of Localize button you will see the image as shown below (Check mark the English checkbox if not checkmarked)

Adding different languages strings in Localizable.strings file (English and Arabic strings)

Format supported by strings file is a “Key” : “Value” format. Key should be same in both files (i.e. in Arabic strings and in English strings file). Let us populate both strings files

Localizable.strings (English)

“header_text” = “Current Language”;
“change_language” = “Change Language”;

Localizable.strings (Arabic)

“header_text” = “اللغة الحالية”;
“change_language” = “غير اللغة”;

Accessing values from Localizable strings file

To access values from our localizable strings file, we can use below syntax

Using NSLocalizedString function we can get the values for the keys added in localizable.strings file. NSLocalizedString function requires two input parameters

1) Key: The key for which we are looking for the value in our localizable.strings file

2) Comment: This is for our own reference, here we can mention the key related info, mostly we left it blank.

At this moment. if you change the language of the device to Arabic and add the above code to your ViewController.Swift file viewDidLoad function. In your console you will see that app is picking up the text from Localizable.strings file.

Changing app language from inside of the app

In order to change app language only without changing the device language, or language will changed from inside the app via providing an user language options. We have to override the default language preferences for our app and then load the app bundle as per the language in app prefrences and thus loading the correct localized values.

For changing the app language from inside of the app and reflecting the language change we will use

“LocalizationSystem.swift” file. In this file we have different methods that set language preference for our app and load the bundle as per our language preference. Also we will get new methods for fetching the localized text from our localizable.strings file.

Step 6: Open ViewController.swift file, and add the below codeIn above code, we used “LocalizationSystem” file in order to get the localized text from teh “Localizable.strings” file. In the “changeLanguage” IBAction, we will change the language as per teh current langauage. If app language is “English”, we will set app language to “Arabic” and vice versa.
Finally, we reset the rootViewController of our app using a new instance of “ViewController”, this is required in order to reflect the UI(user interface) changes.

Run your app and see you can now change app language form inside of the app, without changing the device language.

Where to go from here

In this tutorial, we learned about localization in iOS app and how can we change the app language from inside of the app without changing the iPhone device language form settings app of the iPhone.
You can also download the source code used in this tutorial from here Source-Code