Comment internationaliser une application Android – Partie 1

Vous souhaitez que votre application Android soit utilisée par un grand public ? Vous avez raison parce qu’il faut gagner la popularité et ainsi accroître le nombre de téléchargement. Cependant, ce grand public que vous ciblez ne partage pas la même langue, la même culture ou la même civilisation. Pour ne retenir que la différence de langues, faudra-t-il développer autant de fois la même application par autant de langues que vous voulez supporter ? Mauvaise idée. La répétition n’est pas la tasse de thé des programmeurs. Les programmeurs, notamment moi ;-), aimons faire peu pour gagner plus.

[MISE A JOUR] La seconde partie est déjà disponible : Passer à la deuxième partie

C’est ici qu’intervient le concept d’internationalisation.

Internationaliser une application est un processus permettant de développer une seule fois une application pour qu’elle supporte différentes catégories de ses utilisateurs. Il peut s’agir de la langue utilisée, de la notation des nombres et des dates (exemple du format anglais et français), de l’alignement des textes (à droite pour les arabes) et autres.

Le but de ce tutoriel est de vous montrer comment internationaliser une application en prenant en compte la langue utilisée par le smartphone de vos utilisateurs. Pour les autres catégories précitées, le principe à appliquer reste le même.

J’ai subdivisé ce tutoriel en deux parties. La première, celle-ci, montrera comment internationaliser votre application à l’aide du système Android (au changement de la langue dans les paramètres du smartphone) et la deuxième qui sera disponible dans deux jours, entrera en profondeur pour permettre à l’utilisateur de choisir de lui-même la langue que l’application va utiliser.

L’application à son démarrage va afficher la date du jour en fonction de la langue du système. Pour faire simple, nous allons prendre deux langues : l’anglais et le français.

Android considère l’anglais comme la langue par défaut. Voilà pourquoi je l’ai mise en première position.

C’est parti avec la première partie !

La théorie derrière ça

Lorsque l’utilisateur lance une application, Android charge automatiquement les ressources qui correspondent à son terminal. Par ressources, on voit les layouts, les chaînes de caractères, les images et autres données statiques dont l’application a besoin. Avec Android Studio, ces ressources sont dans le dossier res/.

Comme nous allons internationaliser notre application en ne supportant que la langue, nous allons nous intéresser sur le fichier strings.xml se trouvant dans res/values/. C’est ce fichier qui doit contenir toutes les chaînes de caractères de l’application. C’est lui qui aura la version anglaise de l’application.

Il est recommandé de ne pas placer les chaînes de caractères en dur dans le code. Il vous sera fastidieux de l’internationaliser en voulant traduire toutes les chaînes de caractère. C’est possible mais c’est fastidieux.

Pour la version française, nous créerons un autre fichier strings.xml qu’on placera dans un nouveau dossier values-fr.

Le préfixe ajouté au nom du dossier values/ représente le code de la langue. Vous pouvez trouver la liste complète en créant un fichier ressource xml et en choisissant la rubrique Locale se trouvant au volet gauche de la fenêtre.

Au-delà du code de la langue, il y a aussi le code pour chaque région où une langue est utilisée. Le français est utilisé en RDC (fr-rCD), en France (fr-rFR), au Canada (fr-rCA)…. Donc le code de la langue uniquement localise toutes les régions.

Petit récapitulatif, voici les fichiers que nous allons créer dans les ressources (le premier se crée par défaut) :

  • res/values/strings.xml : pour l’anglais
  • res/values-fr/strings.xml : pour le français

Il est temps de créer notre application. J’espère que vous avez Android Studio ou sinon prenez d’abord le temps de le télécharger  et de l’installer.

Création de l’application

  • Une fois Android Studio installé, créons un nouveau projet en cliquant sur File => New => New Project et remplissons les informations nécessaires.
  • Préparons les couleurs que nous allons utiliser en modifiant le fichier res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorAccent">#a6043d</color>
    <color name="gray">#eee</color>
</resources>
  • Changeons le style de l’application. C’est le fichier res/values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>
  • Comme l’application affichera la date du jour à son démarrage, nous allons mettre les mois et les jours en anglais dans le fichier res/values/strings.xml
<resources>
    <string name="app_name">Multi language App</string>

    <!-- Months -->
    <string name="january">January</string>
    <string name="february">February</string>
    <string name="march">March</string>
    <string name="april">April</string>
    <string name="may">May</string>
    <string name="june">June</string>
    <string name="july">July</string>
    <string name="august">August</string>
    <string name="september">September</string>
    <string name="october">October</string>
    <string name="november">November</string>
    <string name="december">December</string>

    <!-- Days -->
    <string name="monday">Monday</string>
    <string name="tuesday">Tuesday</string>
    <string name="wednesday">Wednesday</string>
    <string name="thursday">Thursday</string>
    <string name="friday">Friday</string>
    <string name="saturday">Saturday</string>
    <string name="sunday">Sunday</string>
</resources>
  • Créons un nouveau fichier strings.xml dans un nouveau dossier values-fr/ pour y mettre les mois et les jours en français. Le chemin du fichier est res/values-fr/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Application multilangue</string>

    <!-- Months -->
    <string name="january">Janvier</string>
    <string name="february">Février</string>
    <string name="march">Mars</string>
    <string name="april">Avril</string>
    <string name="may">Mai</string>
    <string name="june">Juin</string>
    <string name="july">Juillet</string>
    <string name="august">Août</string>
    <string name="september">Septembre</string>
    <string name="october">Octobre</string>
    <string name="november">Novembre</string>
    <string name="december">Décembre</string>

    <!-- Days -->
    <string name="monday">Lundi</string>
    <string name="tuesday">Mardi</string>
    <string name="wednesday">Mercredi</string>
    <string name="thursday">Jeudi</string>
    <string name="friday">Vendredi</string>
    <string name="saturday">Samedi</string>
    <string name="sunday">Dimanche</string>
</resources>
  • Maintenant que les préalables sont près, modifions la présentation de l’application. C’est le fichier res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@color/gray"
    tools:context="sergekishiko.rootandadmin.applicationmultilangue.MainActivity">

    <TextView
        android:id="@+id/today"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorAccent"
        android:textSize="20sp"/>
</RelativeLayout>
  • Dans le fichier MainActivity.java, mettons ces codes assurant le fonctionnement de l’application
package sergekishiko.rootandadmin.applicationmultilangue;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

import java.util.Calendar;
import java.util.Locale;

public class MainActivity extends Activity {
    private TextView today;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Liaison de la variable au composant xml et définition de la date du jour
        today = (TextView) findViewById(R.id.today);
        today.setText(format(Calendar.getInstance(), getLanguage()));
    }

    /**
     * Récuperer la chaine de caractere du fichier strings.xml en fonction du jour
     * @param day constante de la classe Calendar représentant un jour
     * @return un jour de la semaine
     */
    public String dayToString(int day) {
        switch (day) {
            case Calendar.MONDAY :
                return getString(R.string.monday);
            case Calendar.TUESDAY :
                return getString(R.string.tuesday);
            case Calendar.WEDNESDAY :
                return getString(R.string.wednesday);
            case Calendar.THURSDAY :
                return getString(R.string.thursday);
            case Calendar.FRIDAY :
                return getString(R.string.friday);
            case Calendar.SATURDAY :
                return getString(R.string.saturday);
            default:
                return getString(R.string.sunday);
        }
    }

    /**
     * Récuperer la chaine de caractere du fichier strings.xml en fonction du mois
     * @param month constante de la classe Calendar représentant un mois
     * @return un mois de l'année
     */
    public String monthToString(int month) {
        switch (month) {
            case Calendar.JANUARY :
                return getString(R.string.january);
            case Calendar.FEBRUARY :
                return getString(R.string.february);
            case Calendar.MARCH :
                return getString(R.string.march);
            case Calendar.APRIL :
                return getString(R.string.april);
            case Calendar.MAY :
                return getString(R.string.may);
            case Calendar.JUNE :
                return getString(R.string.june);
            case Calendar.JULY :
                return getString(R.string.july);
            case Calendar.AUGUST :
                return getString(R.string.august);
            case Calendar.SEPTEMBER :
                return getString(R.string.september);
            case Calendar.OCTOBER :
                return getString(R.string.october);
            case Calendar.NOVEMBER :
                return getString(R.string.november);
            default:
                return getString(R.string.december);
        }
    }

    /**
     * Formatter la date en fonction du code de la langue
     * @param calendar L'instance de la classe Calendar
     * @param f Le code de la langue "fr", "en" ...
     * @return Date formattée
     */
    public String format(Calendar calendar, String f) {
        int dayOfWeek = calendar.DAY_OF_WEEK;
        int dayOfMonth = calendar.DAY_OF_MONTH;
        int month = calendar.MONTH;
        int year = calendar.YEAR;

        String date;

        if (f.equals("fr")) {
            date = dayToString(calendar.get(dayOfWeek)) + " " + calendar.get(dayOfMonth) + " " + monthToString(calendar.get(month)) + " " + calendar.get(year);
        }
        else {
            date = dayToString(calendar.get(dayOfWeek)) + ", " + monthToString(calendar.get(month)) + " " + calendar.get(dayOfMonth) + ", " + calendar.get(year);
        }

        return date;
    }

    /**
     * Retourner la langue actuelle du système
     * @return "fr", "en" ou autre
     */
    public String getLanguage () {
        return Locale.getDefault().getLanguage();
    }
}

Voilà. J’espère que vous êtes arrivé jusqu’ici. C’est la fin de cette première partie qui montrait comment internationaliser une application en ne supportant que la langue. L’application affiche la date du jour en anglais ou en français, selon la langue du smartphone. La seconde partie interviendra dans deux jours. Elle entrera en profondeur pour permettre à l’utilisateur de choisir de lui-même la langue de l’application et non plus du système.

[MISE A JOUR] La seconde partie est déjà disponible : Passer à la deuxième partie

Téléchargez le projet sur ce lien et n’hésitez pas à donner vos feedbacks dans les commentaires.

 

About Serge Kishiko

Développeur web et mobile fullstack. Langages préférés : Java, PHP, HTML & CSS et bientôt Python !

3 comments

  1. Ce tutoriel est vraiment indispensable pour tout développeur. Merci M.Serge Kishiko.
    En attente pour la suite..

  2. Ce tutoriel est vraiment indispensable pour tout développeur mobile. Merci à vous M.Serge Kishiko.
    Je suis en attente de la suite..

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *