On a recent app I worked on, we needed to internationalize the App Name.  Currently, Cordova does not allow you to easily handle this via configuration.  One alternative is to open the Android project and modify it to include the internationalization.  However, if a developer removes the platform, the process has to be repeated.  This article explains how to accomplish this in a repeatable process that works when the developer removes and adds the Android App.  I will be using the Ionic Framework to build this sample app; however, this should work for any Cordova project.

Why do I want this repeatable?  Great, question.  Maybe I have an App that is used by multiple clients so I need a configurable build process for each client where one client supports English but another supports English and Spanish.  If so, this builds the basic foundation necessary to create such a dynamic build environment.

Assumptions:  I am assuming you have some experience writing Mobile Hybrid Apps with Cordova and Ionic Framwork.

Please checkout the GitHub repository here:

• Ionic 2 Sample i18n Repository

Cordova Hooks

Cordova allows developers to create hooks that run to customize Cordova commans like adding/removing platforms, running a build, etc.  Hooks can be written in any language according to their documentation but I personally have only used Node.js for writing hooks.

This hook has a dependency for the the fs.extra NPM Package.  It can be found in the following location.  Dependencies

• NPM Package fs.extra

In your Cordova project, run the following command:

npm install --save fs.extra

For this project, our hook will run when the Android app is prepared.  Therefore, we will create a js file named 020_i18n_app_name.js in the “hooks/after_prepare” folder.

Unlike iOS, this is rather simple.  We just need to copy the necessary resources files into the Android project.  Therefore, this hook checks to see if the Cordova Project is configured for the Android platform and the copies predefined Android Resource files to the appropriate Android platform folder.

#!/usr/bin/env node

var fs = require("fs.extra");

var fsCallback = function (err) {
    if (err) {
        console.error("Failed to create directory or file.");
        throw err;
    }
}

var platforms = (process.env.CORDOVA_PLATFORMS ? process.env.CORDOVA_PLATFORMS.split(',') : []);

if (platforms.indexOf('android') > -1) {
    console.log("Adding I18N App Name for Android");

    // Copy over the English Resource Files
    fs.copy('resources/android/values/strings.xml', 'platforms/android/res/values/strings.xml', { replace: true }, fsCallback);

    // Copy over the French Resource Files
    fs.mkdirp('platforms/android/res/values-fr', fsCallback);
    fs.copy('resources/android/values-fr/strings.xml', 'platforms/android/res/values-fr/strings.xml', { replace: true }, fsCallback);

    // Copy over the Spanish Resource Files
    fs.mkdirp('platforms/android/res/values-es', fsCallback);
    fs.copy('resources/android/values-es/strings.xml', 'platforms/android/res/values-es/strings.xml', { replace: true }, fsCallback);

    console.log('Added I18N Resource Files for Android');
} else {
    console.warn('I18N Resource Files were NOT added for Android');
}

Resources Files

For each language that we want to support in the App, you will need to create an Android Resource file called strings.xml in a folder.  Here is a sample for English:

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="app_name">Good Morning</string>
    <string name="launcher_name">@string/app_name</string>
    <string name="activity_name">@string/launcher_name</string>
</resources>

You need to create a values folder for each language.  The default language will have a folder called values; while each other language will use the following syntax:  values-{{language code}}.  IE.  values-fr for French, values-es for Spanish, etc…

I placed these folders and files under a folder called resources/android in my root folder for my project.  The hook will then copy the files to the appropriate location in the Android project.

 

Check it out

Since I am using Ionic, I’ll run the following command:

ionic run android

That command is basically a wrapper for the Cordova command.  Notice the output and you will see the hook running and adding the files to the Android project before building and installing the app.

Running command: "C:\Program Files\nodejs\node.exe" C:\Dev\ionicProjects\ionic2SampleI18N\hooks\after_prepare\020_i18n_app_name.js C:\Dev\ionicProjects\ionic2SampleI18N
Adding I18N App Name for Android
Added I18N Resource Files for Android

Finally, the App Name internationalized running on Android:

Conclusion

At this time, this process certainly meets my needs.  But this obviously could be considered immature and easily improved on by adding configuration to config.xml that contains the languages and resource locations.  Certainly a project for another day!

Other Resources:

• Cordova Hook Documentation
• Hooks by DevGirl
• Best Hybrid App Framework:  Ionic Framework (Caveat: in my opinion)