Androideur.com

Notre premier tutoriel de la série « Applications Android multilingues et prise en charge des paramètres régionaux et linguistiques » consiste à créer une application monolingue. Nous verrons ensemble les bonnes pratiques à respecter pour que la traduction et la prise en charge des paramètres régionaux soient facilement applicables par la suite.

Pour cette application, la langue par défaut sera le Français et la zone géographique sera La France

Créons notre projet sur Eclipse ; File –> New –> Android Project

• Project name: PeaceAndLove
• Build Target : Android 1.6
• Application name: Peace & Love
• Package name: com.androideur.peaceandlove
• Create Activity: PeaceAndLove
• Min SDK Version: 4

Avant de passer au vif du sujet, commençons par la correction d’un petit bug : Le nom de notre application génère une erreur, le caractère spécial & n’étant pas autorisé dans le contenu du fichier res/values/strings.xml

Pour corriger ce petit problème, il suffit de remplacer :

Par :

Examinons un peu le contenu du dossier res/ :

Ce dossier a été créé automatiquement pour accueillir les différents types de ressources ;

• Graphiques sous res/drawable/
• Layouts sous res/layout/
• Textes sous res/values/

Vous avez bien compris, c’est principalement sur le contenu de ce dossier que nous allons le plus travailler tout au long de ce tutoriel.

Je veux m’arrêter un peu ici puisque nous parlons des ressources graphiques. Vous avez certainement remarqué la présence de plusieurs dossiers drawable ;

• drawable-hdpi, h comme high
• drawable-ldpi, l comme low
• drawable-mdpi, m comme medium

Cette distinction est relative en fait à la taille et la densité des écrans des smartphones Android. Je reviendrai sur ça plus en détail lors d’un prochain tutoriel qui traitera des tests de compatibilité smartphones.

Pour le moment, ne nous faisons pas de soucis ; nous utiliserons le dossier res/drawable-hdpi par défaut. Si vous avez des problèmes d’affichage des images, laissez-moi un commentaire sur ce tutoriel en mentionnant la marque du smartphone que vous avez utilisé pour tester.

Revenons à notre sujet. Première chose à faire : préparons un layout pour notre application.

Création d’un xml layout

Nous aurons besoin d’un layout linéaire simple (LinearLayout) contenant deux TextView pour afficher les textes en plusieurs langues et un bouton qui affichera les drapeaux.

Modifiez le contenu du fichier res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_vertical|center_horizontal"
	android:textStyle="bold"
	android:background="#E9EEF2"
    >
<TextView
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="@string/text_a"
    android:textColor="#1F2B44"
    />
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="@string/text_b"
    android:textColor="#1F2B44"
    android:textStyle="bold"
    />
<Button
    android:id="@+id/flag_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    />
</LinearLayout>

Création des ressources

Le layout que nous venons de créer fait référence à des ressources que nous allons devoir créer.

Création des textes par défaut

Nous savons déjà que les textes par défaut sont à définir dans le fichier res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="app_name"> Peace &amp; love </string>
  <string name="text_a"> Paix et Amour </string>
  <string name="text_b">Faites l\'Amour, pas la guerre.</string>
  <string name="dialog_title">Cette application n\'a pas été traduite.</string>
  <string name="dialog_text">Peu importe vos paramètres linguistiques et régionaux, nous afficherons le texte défini dans res/values/strings.xml</string>
</resources>

De cette manière nous afficherons un texte en français, peu importe les paramètres linguistiques et régionaux de l’utilisateur. Quand nous allons traduire notre application, nous aurons à définir un contenu alternatif en d’autres langues.

Création du bouton drapeaux

Dans notre layout, nous avons aussi déclaré un bouton que nous utiliserons pour afficher le drapeau relatif aux paramètres régionaux de l’utilisateur.

Nous allons donc utiliser le drapeau de la France pour notre cas.

Téléchargez cette image et sauvegardez la sous res/drawable-hdpi/flag.png

Ouvrez le fichier src/PeaceAndLove.java et ajoutez ce code dans la méthode onCreate() (juste après setContentView)

// assigner l'image flag.png au bouton, conformément aux paramètres régionaux de l'utilisateur
        Button b;
        (b = (Button)findViewById(R.id.flag_button)).setBackgroundDrawable(this.getResources().getDrawable(R.drawable.flag));
 
        // contruire le dialog box à afficher suite au click
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setMessage(R.string.dialog_text)
            .setCancelable(false)
            .setTitle(R.string.dialog_title)
            .setPositiveButton("OK !", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int id) {
                dialog.dismiss();
                }
            });
        final AlertDialog alert = builder.create();
 
        // Ajouter le  click listener au drapeau pour afficher le dialog box 
        b.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                alert.show();
            }
        });

Sous Eclipse, utilisez Ctrl+Shift+O (cmd+Shift+O sous mac) pour importer automatiquement les packages manquants à votre projet.

Examinons le code que nous venons d’ajouter ;

• Nous avons assigné l’image d’un drapeau au bouton. Et puisque nous n’avons aucune autre ressource à part celles définies par défaut, c’est le drapeau français enregistré sous res/drawable-hdpi/flag.png qui s’affichera peu importe la langue ou la région de l’utilisateur. Par contre, dès qu’on ajoutera plus de drapeaux pour les autres régions, ce même code affichera d’autres images.
• Nous avons créé l’objet AlertDialog qui s’affichera suite click sur le drapeau : C’est le listener assigné au bouton qui gère cette fonctionnalité. Et puisque nous n’avons pas fourni d’autres textes à part les textes par défaut, notre AlertDialog affichera les textes renseignés dans le fichier res/values/strings.xml

Il est temps de tester notre application !

Et voilà pour notre application monolingue.

Nous allons voir dans le prochain tutoriel que cette technique de développement nous permettra de traduire et/ou ajouter plusieurs langues à notre application et ce d’une manière simple et rapide.

A la prochaine et bon dév