Introduction

If you’re starting a new PhoneGap project, probably you’ll have to support different languages.

With native apps, each platform (Android, iOS, etc…) gives you all the needed tools to handle this problem. But what if we’re using a cross-platform technology like PhoneGap?

In this article I will report a step-by-step guide to achieve this goal on Android.

In particular, this guide is recommended only if you have not so much words/phrases to translate.

For greater projects, see the Solution 2.

Steps

First of all, you will need to download the phonegap-plugins somewhere, that are available on GitHub. In this guide I will assume that the complete path is: /home/lorenzo/sources/phonegap-plugins/ and that the project root is /home/lorenzo/projects/myapp.

The plugin we need for this goal is called Globalization.

Step 1

So, the first step is to create a directory within your project called src/com/phonegap/plugins/globalization and copy GlobalizationCommand.java, GlobalizationError.java and Resources.java into it.

Step 2

Now, cd to your /home/lorenzo/projects/myapp/res/xml directory and add the following line in the plugins.xml file:

<plugin name="GlobalizationCommand" value="com.phonegap.plugins.globalization.GlobalizationCommand"/>

Save and exit.

Step 3

Now, cd to your /home/lorenzo/projects/myapp/assets/www/js directory (assuming that you’re putting all your .js files in this directory) and copy /home/lorenzo/sources/phonegap-plugins/Android/Globalization/globalization.js here.

Code

Now, in your HTML file located in the www directory you have to include a reference to this file just after the cordova.js script:

<script type="text/javascript" charset="utf-8" src="js/globalization.js"> </script>

After that, you can use the getLocaleName() function to retrieve the info we’re looking for.

For example:

  window.plugins.globalization.getLocaleName(function(locale) {
    // systemLocale will be something like 'en_US'
    systemLocale = locale.value.substring(0,2));
    /* Check if it's an admitted value (locales is a user-defined 
     * array of admitted locales. */
    if ($.inArray(systemLocale, locales) == -1) {
      alert("Locale not present, back to default.");
    }
  },
  function() {
    alert("unable to get locale.");
  });

Now you’re able to do your internationalization.

The file that will contains your translations can be different based on your needs. I suggest to take a look at this interesting solution in this thread on StackOverflow.

CODE P.S.

Another solution, if you have only few files and only few translations, is to duplicate your code in the various

/html/en/main.html /html/it/main.html

etc… and then choose which file to load in your onCreate() function, using the native methods to discover the language in your system (for example, with getSharedPreferences).