Step by step approach to Externalize and Localize Text in iOS and Android App

Why externalize texts?

Externalizing text provides more flexibility to change texts frequently and easily. You have built the app and now you want your marketing/copywriting team to proof read text inside your app. Now, let’s say you have not externalized your text and instead hard-coded all or some of the error messages, button texts, titles, heading etc. It is not easy to extract all text in one go, you would have to go to every source code file and check where the text is coming from then copy the text sections one by one and paste into a word document and send that document to your copywriter.
Image credit: By Pictofigo (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

This exercise is definitely going to take a couple of hours and is a waste of your time. It does not end there because once the copywriter returns the modified text you will have to go back through and manually make the changes throughout the code.

It is no secret that BRIC (Brazil, Russia, India, China) countries are growing areas for many apps. WhatsApp had humungous growth in India which resulted in rapid expansion. While for many apps English might suffice, for many others localizing the app in a language that users know might just help them expand faster. Once you localize, it is easier for your translators to provide translated versions of the copy.

I am sure you get the point now. Without externalization, text cannot be changed/modified easily and makes the developer less efficient. Plus of course, in most cases text will be regularly updated by copywriters.

How externalization works in Android and iOS?

The iOS and android frameworks both provide a nice way of storing all the text that appears inside an app in a single file, for each language. In iOS it is the localizable.strings file and in android it is strings.xml. strings.xml file resides under res/values folder. Language specific strings.xml files reside under language specific folders. E.g. French strings.xml file will reside under res/values-fr folder etc.

The localizable.strings file resides under the Resources Folder. In case of multiple languages, every language specific Localizable.strings file resides under the language specific folders respectively. E.g. for English it will be under en.lproj folder etc.

Sample Android strings.xml

<?xml version="1.0" encoding="utf-8"?>
 <resources>
 <string name="app_name">Sample App</string>
 <string name="hello_world">Hello world!</string> </resources>

Sample iOS localizable.strings content

"app_name" = "Sample App" ;
"hello_world" = "Hello world!" ;

As you can see above, these are basically stored in key and value pairs. Strings.xml is an xml file and localizable.strings is a simple text file containing lines of key value pairs. 

Now, whenever the copywriting team wants to review or enhance texts in your app, you can just provide them with these files and they can directly make changes to these files and when they give them back the developer simply has to replace the file. Hence reducing the text related changes time effort to a few minutes!!

How to access texts from strings.xml file in your android app

Any text inside the strings.xml file can be accessed by using R.strings. format. For example if we want to access the value of “helloworld” key, we can get it by R.strings.helloworld

Android provides methods like setText and setTile for setting text values to your TextView and Button components.

Let’s say you want to set a text for a text view, example code is as below:

TextView myAwesomeTextView =(TextView)findViewById(R.id.textViewId);
myAwesomeTextView.setText(R.string.hello_world);

Similarly in your layout.xml files, you can reference the texts from strings.xml file by specifying:

`android:text= "@string/hello_world"`

Here “@string” points to strings.xml file and “hello_world” points to the key in the strings.xml file.

How to access texts from Localizable.strings file in your iOS app

iOS provides a method called NSLocalizedString. Let’s say we want to get the value of the key “hello_world” from the Localizable.strings file, we can do so by:

NSLocalizedString(@"hello_world", @"This text appears in the home screen");

Here the first parameter is the key for which we want the text and the second is basically to set the instruction for the copywriter. It helps the copywriter to understand the context of where this text has been used in the app.

How to extract hard-coded strings from an existing android app to strings.xml

Let’s say you missed externalization and now you have put hard-coded strings over the place including layout files.

Android Studio provides an easier way to extract strings. When you click on the hard-coded strings in your java or layout xml file, you can press “ALT+Enter” and then IDE brings the string extraction dialog– “Extract string resource” and using that option helps you to move those hard-coded strings to strings.xml file automatically.

How to extract hard-coded strings from an existing iOS app

Extracting strings from your code

The text which is not coming directly from .storyboard or .xib files comes from the code that the developer writes.
For example:

self.label.text = @”Hello World”

This is the hard-coded text

Now, we need to wrap the text using the NSLocalizedString method and hence it will become:

self.lable.text = NSLocalizedString(@”Hello World”,@”This appears in the home screen”)

Note that we have not created key value pairs for “Hello World” in the Localizable.strings file. But the above line of code will still work, because the NSLocalizedString method checks if the key exists or not. If it does not then it returns the first parameter value. Hence the above code will return “Hello World”. Now, we need to externalize text wrapped under the NSLocalizedString method.

To externalize these, XCode provides the genstrings macro. Go to the Terminal and navigate to your project’s home directory and run the below command:

find . -name \*.m | xargs genstrings -o en.lproj

This will create a Localizable.strings file that will extract NSLocalizedString calls into a single file in the en.lproj localization directory. Similarly if you want to create other language specific Localizable.strings files, you can do so by changing the last parameter in the above command based on the language.

Extracting strings from Storyboard and Xib files

  • Select the storyboard or Xib file for which you want to externalize texts
  • Go To -> Utilities (Right bar)
  • Go To-> File Instructor (First Tab)
  • Under localization, If localization is not enabled, you will see Localize button, click it to enable localization. If it is only enabled but not externalized, you will see only Base checked. To externalize check the language.

  • Once you select any language, Xcode will create .strings or .strings files inside language specific folders. For example English language .strings file will be created under en.lproj folder.

The above steps can extract text from your .storyboard and .xib files into .strings files. Hence all your text is now located in separate .strings file : separate from your code and hence can be modified easily. 

The next time you build your mobile app be sure to spend some time externalizing text making it easy to involve your marketing, usability teams in delivering engaging user interface text.

Praveen Yadav

Read more posts by this author.