Personnalisez vos applications

Maintenant que votre application commence à être très sympa à utiliser, vous vous dites qu’il serait tout de même intéressant de la déployer dans les pays francophones, afin de toucher encore plus de monde !

Cependant, un problème risque d’arriver assez vite : comment traduire votre application en plusieurs langues ? Eh bien dans ce chapitre, nous allons voir ensemble la manière de traduire notre application… en français ! :D

Sur Android, la traduction est vraiment très bien pensée, puisque tout est centralisé à un même endroit : le fichier  strings.xml. Ce dernier devra contenir l’ensemble des textes que vous utilisez dans votre application.

Dorénavant, plus question d’écrire le moindre texte (que ce soit une phrase, un mot ou même une lettre) en dehors du fichier  strings.xml  !  ;)

Par exemple actuellement, nous avons du texte écrit en dur dans notre classe  DetailFragment, dans le layout de  fragment_detail.xml  et même dans le manifeste de notre application ! :euh:

Extrait de DetailFragment.java :

public class DetailFragment extends BaseFragment {
    
    ...
    
    private void updateDesign(ApiResponse projectResponse){
        ...
        this.viewsProject.setText(this.currentProject.getStats().getViews()+" views");
        this.likesProject.setText(this.currentProject.getStats().getAppreciations()+" likes");
        this.commentsProject.setText(this.currentProject.getStats().getComments()+" comments");
    }

    private void showMessage(){
        Snackbar snackbar = Snackbar.make(rootView, "Fonctionnalité en cours de développement, veuillez patienter !", Snackbar.LENGTH_SHORT);
        ...
    }
    ...
}

Extrait de fragment_detail.xml :

<android.support.design.widget.CoordinatorLayout
    ... >

    <Button
        ...
        android:text="Share"/>
    ...

</android.support.design.widget.CoordinatorLayout>

Extrait de AndroidManifest.xml :

<?xml version="1.0" encoding="utf-8"?>
<manifest>
    ...
    <!-- DETAIL ACTIVITY -->
        <activity
            ...
            android:label="Detail" />

</manifest>

Le fait que ces textes soient écrits en dur rend la traduction impossible sur Android ! Ainsi, nous allons tout simplement les déplacer afin de les mettre directement dans le fichier  strings.xml.

D’ailleurs, Android Studio nous facilite grandement la tâche. Par exemple, affichez le layout  fragment_detail.xml, puis placez le curseur de votre souris à gauche d’un texte que nous avons écrit en dur dans le fichier. Une petite ampoule devrait apparaître...

Cliquez sur "Extract string resource". Une seconde fenêtre s'affiche et nous permet de créer l'identifiant correspondant à notre texte, dans le fichier  strings.xml :

Cliquez sur "OK". Maintenant, si vous retournez dans votre fichier  fragment_detail.xml  et  strings.xml, leur contenu a dû évoluer.

Extrait de fragment_detail.xml : 

<android.support.design.widget.CoordinatorLayout>

    ...

    <Button
        ...
        android:text="@string/fragment_detail_button_share"/>

    ...

</android.support.design.widget.CoordinatorLayout>

Explications : L'éditeur a remplacé automatiquement le texte "Share" par l'identifiant correspondant précédemment créé dans le fichier  strings.xml.

Extrait de strings.xml :

<resources>
    ...
    
    <string name="fragment_detail_button_share">Share</string>

</resources>

Explications : L'éditeur a rajouté un identifiant à l'intérieur de notre fichier  strings.xml, grâce aux balises  <string/>, contenant notre précédent texte, "Share".

Je vous laisse faire la même chose pour les autres textes (de la classe DetailFragment et du manifeste) et les intégrer dans le fichier  strings.xml. Attention toutefois, une "petite subtilité" s'est glissée, je vous laisse trouver laquelle... ;) 

Voici le fichier  strings.xml  terminé, ainsi que le contenu de la classe DetailFragment et le manifeste de l'application mis à jour : 

Extrait du fichier strings.xml :

<resources>
    ...

    <!-- DETAIL SCREEN -->
    <string name="fragment_detail_button_share">Share</string>
    <string name="detail_fragment_snackbar_message">This feature is currently not available. Please check back later ...</string>
    <string name="detail_fragment_stats_views">%1$s views</string>
    <string name="detail_fragment_stats_likes">%1$s likes</string>
    <string name="detail_fragment_stats_comments">%1$s comments</string>
    <string name="activity_detail_title">Detail</string>

</resources>

Explications : Nous avons rajouté les identifiants manquants. Petite subtilité ici, nous avons ajouté le code  %1$s  à certaines valeurs, afin de pouvoir par la suite directement ajouter du texte en paramètre, sans à avoir à utiliser de concaténation. Nous verrons l'implémentation exacte dans la classe DetailFragment juste en dessous. Vous trouverez également plus d'informations sur la documentation Android.

Extrait du fichier DetailFragment.java :

public class DetailFragment extends BaseFragment {
    ...

    private void updateDesign(ApiResponse projectResponse){
        ...
        this.viewsProject.setText(getString(R.string.detail_fragment_stats_views, this.currentProject.getStats().getViews().toString()));
        this.likesProject.setText(getString(R.string.detail_fragment_stats_likes, this.currentProject.getStats().getAppreciations().toString()));
        this.commentsProject.setText(getString(R.string.detail_fragment_stats_comments, this.currentProject.getStats().getComments().toString()));
    }

    private void showMessage(){
        Snackbar snackbar = Snackbar.make(rootView, R.string.detail_fragment_snackbar_message, Snackbar.LENGTH_SHORT);
        ...
    }

    ...
}

Explications : Grâce à la méthode  getString(), nous allons pouvoir récupérer une valeur via son identifiant à partir du fichier  strings.xml. La méthode  getString()  admet également des paramètres qui remplaceront ensuite les codes (par exemple  %1$s) comme ceux que nous avons définis plus haut... ;)

Extrait de AndroidManifest.xml :

<manifest>
    ...
        <!-- DETAIL ACTIVITY -->
        <activity
            ...
            android:label="@string/activity_detail_title"/>

    ...

</manifest>

Explications : Nous avons remplacé ici l'ancienne valeur écrite en dur dans le manifeste de notre application, par une référence vers notre fichier  strings.xml  grâce à l'identifiant correspondant.

J'y viens justement ! :D Maintenant que l'ensemble du texte de notre application se trouve dans le fichier  strings.xml, la traduction est très facile à réaliser !

En effet, cliquez sur le bouton "Open Editor" se trouvant en haut à droite de votre fichier  strings.xml. Un écran devrait apparaître. Cliquez sur le bouton représentant "une planète", et sélectionnez la langue française.

Cet éditeur est très pratique car il va nous permettre de gérer plus facilement la traduction de notre texte ! :) D'ailleurs, vous avez peut-être remarqué qu'un dossier  values-fr/  a été créé, contenant lui aussi un fichier  strings.xml. C'est le même principe que les quantificateurs que nous avons vu dans ce cours.

Il ne vous reste plus qu'à traduire chacune des valeurs en français.

Et voilà ! Notez que nous avons défini quelques valeurs comme étant "intraduisibles", comme par exemple les variations de notre police Roboto ou encore le nom de notre application... :)

Maintenant, si vous souhaitez tester la traduction de votre application, n'hésitez pas à la lancer sur un émulateur en changeant à chaque fois la langue du système d'exploitation.