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:
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.
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'); }
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:
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!
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie | Duration | Description |
---|---|---|
cookielawinfo-checbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". |
cookielawinfo-checbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". |
cookielawinfo-checbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. |
cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". |
cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". |
viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.