Aujourd’hui nous allons découvrir une nouvelle façon de réaliser des menus en Android. Je dis bien nouvelle car nous avons déjà réalisé ensemble des menus à l’aide du fameux « Drawer » (menu latéral).

Pourquoi faire d’une autre façon alors que l’ancienne fonctionne très bien ? Tout simplement pour diversifier vos applications, qu’elles n’aient pas toutes le même rendu.

Menu : Bottom navigation Bar

Notre nouveau menu se nomme donc Bottom navigation Bar. Et vous allez voir que ce nom représente très bien le rendu graphique.

Comme vous pouvez le voir sur l’image ci-dessus :

• le menu se trouve en bas de notre vue (d’où le bottom).
• chaque onglet du menu sera représenté à l’aide d’une icône et d’un texte.

Petite précision

Je suis sûr que vous vous dîtes chouette je vais pouvoir utiliser ce menu dans toutes mes applications. Mais en réalité, le Bottom Navigation Bar ne pourra pas être utilisé dans tous les cas.

Eh oui, ce menu est destiné aux applications qui ont une navigation avec un nombre d’onglets compris entre 3 et 5. D’après les guidelines google, en dessous de 3 onglets,  on doit utiliser les tabs, et au-dessus de 5, on doit utiliser le Navigation Drawer.

Comment ça marche ?

Ajoutons des dépendances

Comme souvent la première étape va être d’ajouter les dépendances pour utiliser la librairie. Si vous ne savez pas comment faire je vous renvoie à notre tutoriel pour utiliser gradle. Pour les autres voici les dépendances :

compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:design:25.1.0'
compile 'com.android.support:support-v4:25.1.0'

Définissons notre menu

La prochaine étape va servir à définir les onglets de notre menu. Pour cela il va falloir créer un fichier xml bottom_navigation_items dans le dossier menu de votre application. Le fichier xml ressemblera à ça :

<xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_ongle_1" android:icon="@drawable/ic_onglet_1" android:title="@string/ongle_1"/>
   <item android:id="@+id/action_ongle_1" android:icon="@drawable/ic_onglet_2" android:title="@string/onglet_2">
   <item android:id="@+id/action_ongle_3" android:icon="@drawable/ic_onglet_3" android:title="@string/onglet_3"/>
</menu>

On peut voir dans ce fichier que chaque onglet sera défini par une balise item. Dans notre exemple, on a donc 3 onglets pour notre menu. Chaque onglet aura donc 3 attributs :

• id : Permet de récupérer l’action dans l’activity
• icon : Permet de définir l’image correspondant à l’onglet
• title : Permet de définir le titre correspondant à l’onglet

Ce fichier est donc très simple et permet la mise en place rapide du menu.

Affichons notre menu

Maintenant que notre menu est défini, nous allons devoir l’ajouter dans notre vue. Pour cela rien de bien compliqué, voilà à quoi doit ressembler le fichier xml de votre activity :

<xml version="1.0" encoding="utf-8">
<RelativeLayout android:id="@+id/activity_main" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent">


 <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/colorPrimary" app:itemIconTint="@color/nav_item_state_list" app:itemTextColor="@color/nav_item_state_list" app:menu="@menu/bottom_navigation_items"/>

</RelativeLayout>

Je vous l’avais promis,  rien de compliquer. Il suffit d’ajouter l’objet BottomNavigationView, et de le relier à notre menu via l’attribut app:menu. On voit aussi dans l’exemple que l’on peut changer la couleur du texte et de l’image quand ils seront sélectionnés à l’aide des attributs app:itemIconTint et app:itemTextColor.  En bonus voici le fichier nav_item_state_list pour pouvoir configurer les couleurs

<selector xmlns:android="http://schemas.android.com/apk/res/android">;
    <item android:color="@color/mainTabInactive" android:state_enabled="false"/>
   <item android:color="@color/mainTabActive" android:state_checked="true"/>
    </selector>

Une petite explication rapide pour ceux qui n’auraient pas compris comment fonctionne le fichier. On va définir la couleur de l’onglet à l’état sélectionné à l’aide de la ligne et la couleur à l’état non sélectionné avec les deux autres lignes.

Un menu intéractif

Maintenant ajoutons un peu d’interactivité à notre menu. Pour cela, rendez vous dans le fichier Java de votre activity et ajouter le code suivant :

findViewById(R.id.bottom_navigation).setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                        switch (item.getItemId()){
                        
                            case R.id.onglet_1:
                                //Action quand onglet 1 sélectionné
                                break;
                            case R.id.onglet_2:
                                //Action quand onglet 2 sélectionné
                                break;
                            
                            default:
                                //Action quand onglet 3 sélectionné

                                break;
                        }
                });

Voilà vous savez maintenant comment réaliser un nouveau menu en Android simplement. N’hésitez pas à posez des questions en commentaire, on se fera un plaisir d’y répondre.

Petit rappel on vient de lancer une nouvelle rubrique sur le site, où vous pouvez découvrir des livres et des Goodies Android, allez-y faire un tour 😀