Multi-Language Localization for Mobile Apps

MobileTogether includes support to seamlessly localize mobile apps in multiple languages. This empowers developers to build one version of a mobile app that works across many languages as well as across multiple platforms.

Developers can include translations in a single MobileTogether app design for all text phrases required, and when any end-user runs the app, whether on an Android phone, an iPhone, Windows desktop, or any other supported platform, the language for the app is selected to match the language for the device operating system.

With multi-language localization, even text-to-speech functionality is localized to the user’s native language.

In an earlier post on text-to-speech functionality, we first built a simple demo app. In this post, we will use an enhanced version, shown below on an Android phone, to illustrate localization:

Our multi-language localization demo app includes cross-platform support for English, German, French, Spanish, and Italian languages.

Text strings for each language are assigned in the MobileTogether Designer Localization dialog:

The top portion of the dialog lets developers assign text in different languages for each control in the app: the Speak, Silence, and Exit buttons along the top of the app window are translated in the top three rows of the Localization dialog.

When the app launches on any user’s mobile device, the default language specified in the device operating system setting determines which text is displayed for each control. If the end user is running some other language, default values from the Localization dialog are used.

The green plus button at the top of the dialog lets the developer add support for additional languages from a list of standard language codes:

MobileTogether multi-language localization even supports languages that use non-roman alphabets such as Azerbaijani in Cyrillic, listed as az-Cyrl-AZ in the menu above, or the Japanese Kanji alphabet. In fact, all the demo applications installed with MobileTogether are localized for German, French, Spanish, and Japanese languages. Shown below is a portion of the Localization dialog for the demo Mortgage Calculator app, where various label text is specified:

The bottom portion of the Localization dialog lets developers assign text for named strings. In our demo app, these are phrases that will be displayed in message boxes and spoken during execution.

If it’s not practical for a developer to translate all the text required in a large, complex application, the Export and Import buttons at the bottom of the Localization dialog permit management of multi-language localization text in XML files outside the MobileTogether Designer. A translator or other language professional can create or fine-tune localized text in an XML editor like Altova XMLSpy.

When our demo app launches, an Action Group assigns the correct localized phrases to nodes in the data tree:

After multi-language localization text strings have been defined, you can even change the language assigned during simulation to check localization before deploying the app. The Simulation Language option is available in the Project menu and the languages offered correspond to those defined in the Localization dialog for the project.

Here is a view of the Mortgage Calculator demo application running in the Simulator window, where the Simulation Language is Japanese and the selected target device is an iPhone 6 in portrait orientation:

The Set Language Action

You can even empower end users to run your app in any language you have localized–without changing the language setting for the device operating system. This feature could be useful in a language-learning environment, or for apps running on a workstation or tablet shared among users who speak different languages.

Our multi-language localization demo app lets the user choose a new language via a combo box control. The app then confirms the choice via a message box, and restarts the app in the new language.

Shown below is a screenshot of the app running on an iPhone. The user has opened the language selector combo box and scrolled to the choice for Italian, but not yet accepted the selection by clicking Done. (On an Android phone, the user would tap simply tap the new choice.)

When the user confirms the language selection, the app restarts in Italian:

The restaurant text in the edit field is translated because it is one of the standard text strings defined in the Localization dialog:

The developer of the demo app wanted to be courteous and not leave any end user accidentally stranded in an unfamiliar language, so setting the new language employs several actions:

First, a text to speech action reads a restart warning message in the current app language.

Second, a message box is displayed containing the same restart warning, also in the current language, with the choices OK or Cancel.

If the user chooses OK, the userLanguage element is updated with the userChoice value set by the combo box, then the Set Language action restarts the app.

If the user chooses Cancel instead of OK, the combo box selection is reset to the current language and the app continues running without changing the language, waiting for the next user input.

You can try localizing your own cross-platform mobile apps by downloading the free-to-use MobileTogether Designer, which comes with integrated help, tutorials and many sample apps.