Cordova Hook: Internationalizing your App Name for Android

I recently developed a mobile app, using Cordova, that needed an internationalized 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 platform using the Cordova CLI. I will be using the Ionic Framework to build this sample app; however, this will work for any Cordova project.
Why is it beneficial for this to be repeatable? It is possible to have an App that is used by multiple clients, so you would need a configurable build process for each client. One client may support English, while another supports English and Spanish.  If so, this builds the basic foundation necessary to create such a dynamic build environment where the App Name can be configured by language for each client.
Assumptions: You have some experience writing Mobile Hybrid Apps with Cordova and Ionic Framework.
Please check-out the GitHub repository here:

• Ionic 2 Sample i18n Repository

Cordova Hooks

Cordova allows developers to create hooks that run to customize Cordova commands like adding/removing platforms, running a build, etc.  Hooks can be written in any language according to their documentation, but I have only used Node.js for writing my hooks.
This hook has a dependency on the fs.extra NPM Package.  It can be found in the following location.

• 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.  You 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 then 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 you 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 internationalized App Name running on Android:

Conclusion

At this time, this process certainly meets my needs.  But this obviously could be considered immature and easily improved 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)