• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 23/05/2019

Découvrez et implémentez la barre d’outils

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Toujours dans l'optique de créer une interface utilisateur flexible et adaptative, nous allons au cours de ces deux prochains chapitres, parler de la barre d'outils, appelée aussi Toolbar.

Vous devez déjà savoir à quoi elle ressemble, mais savez-vous comment l'implémenter ?

Non ? Alors ce chapitre est pour vous !

Un peu d'histoire...

Pour cela, nous devons remonter quelques années en arrière, avant la version Lollipop d'Android (API 21) et l'arrivée du fameux Material Design. A cette époque, la barre d'outils utilisée au sein d'une application Android s'appelait... l'ActionBar !

Celle-ci ressemblait énormément à la Toolbar d'aujourd'hui. D'ailleurs, elles sont quasiment impossibles à différencier visuellement parlant. Encore une fois tout se passe côté code !

                                                        

Mais alors pourquoi tu nous parles de la Toolbar ?

Pour faire simple, la Toolbar est une optimisation de l'ancien Pattern ActionBar, qui offre aux développeurs plus de contrôle (une meilleure accessibilité des animations par exemple) et de flexibilité (on peut imaginer placer sa Toolbar... en bas de l'écran !).

De plus, la Toolbar  est devenue une vue, comme un TextView, un Button, un EditText, etc... plus facilement intégrable dans nos layouts !

Créez votre première barre de navigation

On va donc reprendre notre application précédemment réalisée et accessible à ce lien.

Installation

La Toolbar étant uniquement accessible depuis l'API 21 d'Android, il vous faudra installer la librairie de support AppCompat-v7 (qui introduit notamment le Material Design). 

Pour cela, on vérifie que la librairie est bien référencée dans notre fichier qui gère les différentes dépendances de notre projet (build.gradle) comme ce qui suit, et on synchronise ce dernier au besoin.

dependencies {
    ...
    compile 'com.android.support:appcompat-v7:25.3.1'
}

Puis, nous allons désactiver dans notre fichier res/values/styles.xml (nous aborderons plus en détails les spécificités de celui-ci dans un autre cours) la barre de navigation affichée par défaut, en faisant hériter notre thème principal de AppCompat.Light.NoActionBar.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ....
    </style>
    
</resources>

Exécutez maintenant votre application. La barre de navigation a bien disparu ! Simple non ? :magicien:

Implémentation de la vue

C'est pas tout d'avoir fait disparaître l'ancienne barre de navigation (qui était, vous l'aurez remarqué, une ActionBar ;) ), il faut maintenant en faire apparaître une nouvelle, non ?

Comme la Toolbar est une vue, on peut l'implémenter directement dans un layout. Nous allons donc éditer ici notre fichier res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.openclassrooms.toolmybar.MainActivity">

    <!-- Déclaration de notre Toolbar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/activity_main_toolbar"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleTextColor="@android:color/white"
        android:background="?attr/colorPrimary"/>
        
    .....
    
</LinearLayout>

Dans l'exemple ci-dessus, la propriété XML android:minHeight correspond à la taille minimum que doit avoir la vue, ici la Toolbar. On utilise pour plus de simplicité une taille propre au système Android, qui va changer automatiquement en fonction du terminal (notamment Smartphone & Tablette).

Implémentation du menu

Notre Toolbar implémentée dans nos layouts d'activités, nous allons pouvoir lui ajouter un menu. Là aussi tout se passe dans un fichier XML, mais cette fois-ci dans le répertoire res/menu/ que vous pouvez créer dès à présent.

Ajoutez à l'intérieur un fichier qui contiendra notre menu, à savoir res/menu/menu_activity_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_activity_main_search"
        android:icon="@drawable/ic_search_white_24dp"
        app:showAsAction="ifRoom"
        android:title="Rechercher">
    </item>
    <item
        android:id="@+id/menu_activity_main_params"
        android:icon="@drawable/ic_more_vert_white_24dp"
        app:showAsAction="ifRoom"
        android:title="Paramètres">
    </item>
</menu>

Ce menu représentera les différents boutons de notre Toolbar. Vous pouvez télécharger les images de ces derniers sur le site de Google (https://material.io/icons/) et les importer dans les bons dossiers drawable/ (drawable-hdpi/ , drawable-mdpi/ , etc...) afin d'avoir toujours une densité optimale.

Lien avec l'activité

Maintenant, nous devons lier toutes ces vues ensembles, et les activer. Nous allons donc sérialiser (convertir en un objet Java) notre Toolbar dans notre activité, et l'ajouter au système qui gère l'affichage des Toolbars. Pour cela, quelques lignes à ajouter à notre classe MainActivity.java suffisent :

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //1 - Configuring Toolbar
        this.configureToolbar();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //2 - Inflate the menu and add it to the Toolbar
        getMenuInflater().inflate(R.menu.menu_activity_main, menu);
        return true;
    }

    // ----

    private void configureToolbar(){
        // Get the toolbar view inside the activity layout
        Toolbar toolbar = (Toolbar) findViewById(R.id.activity_main_toolbar);
        // Sets the Toolbar
        setSupportActionBar(toolbar);
    }
}

 Quelques explications :

  • On découpe notre code ! N'oubliez pas, chaque méthode/fonction doit faire une seule et même chose.

  • Ligne 1 : On va récupérer notre vue Toolbar et l'ajouter à notre activité via la méthode setSupportActionBar.

  • Ligne 2 : On sérialise ensuite notre menu afin de l'ajouter à notre Toolbar.

Le résultat est plutôt satisfaisant, non ?

Notre Toolbar enfin affichée !
Notre Toolbar enfin affichée !

Gestion des actions

Tout cela est bien sympa, mais il manque une chose assez essentielle. En effet, rien ne se passe quand on appuie sur les boutons... Zut !

                                 

D'accord Homer ! Nous allons implémenter la gestion des actions quand on clique sur nos boutons. En plus là aussi, quelques lignes suffisent. Modifions donc ensemble notre fichier MainActivity.java :

public class MainActivity extends AppCompatActivity {
    
    ...
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //3 - Handle actions on menu items
        switch (item.getItemId()) {
            case R.id.menu_activity_main_params:
                Toast.makeText(this, "Il n'y a rien à paramétrer ici, passez votre chemin...", Toast.LENGTH_LONG).show();
                return true;
            case R.id.menu_activity_main_search:
                Toast.makeText(this, "Recherche indisponible, demandez plutôt l'avis de Google, c'est mieux et plus rapide.", Toast.LENGTH_LONG).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

 ...

}
Quelques explications :

La méthode onOptionsItemSelected est appelée à chaque fois que l'utilisateur appuie sur un élément de notre Toolbar. Cet élément est de type... MenuItem ! Vous l'avez compris.

Grâce à cet élément qui dispose d'un identifiant unique que l'on a précédemment défini dans notre fichier  res/menu/menu_activity_main.xml, on va pouvoir facilement l'identifier et lui ajouter un comportement spécifique lors d'un clic (ici l'affichage d'un Toast).

Conclusion

Félicitations ! Votre application dispose enfin d'une barre de navigation sympa et plutôt jolie. Cependant, vous me direz... les goûts et les couleurs... bon d'accord ! Dans le prochain chapitre, nous allons voir comment personnaliser cette Toolbar afin de l'adapter à vos propres goûts. ;)

Vous pouvez retrouver le code de l'application terminé à cette adresse.

                                                     

Exemple de certificat de réussite
Exemple de certificat de réussite