• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 04/05/2018

Implémentez une Bottom Navigation View

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

Maintenant que vous avez goûté aux joies du Material Design sur Android, poursuivons cette initiation en implémentant une barre de navigation du bas, appelée plus communément la Bottom Navigation View

D'ailleurs, nous en avons déjà un peu parlé dans ce cours... ;)

Aperçu de la Bottom Navigation View
Aperçu de la Bottom Navigation View

Avant de commencer son implémentation, vérifiez que la librairie  com.android.support:design  est bien présente dans le fichier  build.gradle  de votre application.

Extrait de build.gradle :

dependencies {
    ...
    implementation 'com.android.support:design:27.1.0'
}

Puis, nous allons dans un premier temps ajouter les titres dans notre fichier  strings.xml  qui seront par la suite affichés dans la barre de navigation.

Titres de la barre de navigation
Titres de la barre de navigation

Extrait de strings.xml :

<resources>
    ...

    <!-- BOTTOM NAVIGATION VIEW -->
    <string name="bottom_navigation_menu_landscape">Landscape</string>
    <string name="bottom_navigation_menu_logos">Logo</string>
    <string name="bottom_navigation_menu_android">Android</string>
</resources>

Explications : Nous ajoutons ici simplement les titres utilisés par la Bottom Navigation View.

Ensuite, nous allons ajouter un nouveau dossier appelé  menu/  à notre répertoire de ressources  res/. Ce dernier contiendra le menu structuré de notre barre de navigation. Ainsi, créez à l'intérieur de ce nouveau dossier le menu XML suivant.

Fichier res/menu/bottom_navigation_menu.xml :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_android"
        android:enabled="true"
        android:icon="@drawable/ic_android_white_24dp"
        android:title="@string/bottom_navigation_menu_android"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_logo"
        android:enabled="true"
        android:icon="@drawable/ic_pets_white_24dp"
        android:title="@string/bottom_navigation_menu_logos"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_landscape"
        android:enabled="true"
        android:icon="@drawable/ic_filter_hdr_white_24dp"
        android:title="@string/bottom_navigation_menu_landscape"
        app:showAsAction="ifRoom" />
</menu>

Explications : Grâce aux balises  <menu>  et  <item>, nous allons pouvoir créer un menu complet pour notre barre de navigation, comprenant un titre grâce à l'attribut  android:title  ainsi qu'une icône grâce à l'attribut  android:icon.  

A présent, nous allons rajouter une couleur dans notre fichier  colors.xml  qui sera utilisée pour "colorier" nos icônes quand celles-ci seront sélectionnées ou non par nos utilisateurs.

Extrait de colors.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- APP BASE -->
    ...
    <color name="colorAccentDark">#4aa87a</color>
    
</resources>

Explications : Nous rajoutons une couleur "vert foncé" qui sera utilisée par la suite pour définir une icône comme étant non sélectionnée par l'utilisateur.

Pour terminer, afin de pouvoir définir quelle couleur sera à utiliser en fonction de la situation rencontrée, nous allons créer le fichier suivant que nous placerons dans le dossier  drawable/  de notre application.

Fichier /res/drawable/bottom_navigation_colors.xml :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:color="@color/background_light" />
    <item
        android:state_checked="false"
        android:color="@color/colorAccentDark" />
</selector>

Explications : Nous avons défini ici une liste de deux éléments contenant chacun une couleur différente en fonction de l'état sélectionné via l'attribut  android:state_checked.

Et voilà ! Il ne nous reste plus qu'à définir notre  BottomNavigationView  dans le layout de  MainActivity.

Fichier activity_main.xml :

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

    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/activity_main_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/activity_main_bottom_navigation"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/activity_main_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/colorAccent"
        app:itemIconTint="@drawable/bottom_navigation_colors"
        app:itemTextColor="@drawable/bottom_navigation_colors"
        app:menu="@menu/bottom_navigation_menu"
        android:layout_alignParentBottom="true" />

</RelativeLayout>

Explications : Nous y voilà ! Nous avons déclaré la  BottomNavigationView  juste en dessous du conteneur  FrameLayout  qui contiendra le fragment MainFragment. Nous lui avons défini les couleurs pour son fonctionnement grâce aux attributs app:itemIconTint  et  app:ItemTextColor. Nous lui avons également défini le menu précédemment créé grâce à la propriété  app:menu.

Pour finir, modifions notre activité  MainActivity  afin de gérer le clic sur un élément de la  BottomNavigationView.

Extrait de MainActivity.java :

public class MainActivity extends AppCompatActivity {

    //1 - FOR DESIGN 
    @BindView(R.id.activity_main_bottom_navigation) BottomNavigationView bottomNavigationView;

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ...
        this.configureBottomView();
    }

    // -------------------
    // CONFIGURATION
    // -------------------

    ...

    // 2 - Configure BottomNavigationView Listener
    private void configureBottomView(){
        bottomNavigationView.setOnNavigationItemSelectedListener(item -> updateMainFragment(item.getItemId()));
    }

    // -------------------
    // UI
    // -------------------

    // 3 - Update Main Fragment design
    private Boolean updateMainFragment(Integer integer){
        switch (integer) {
            case R.id.action_android:
                this.mainFragment.updateDesignWhenUserClickedBottomView(MainFragment.REQUEST_ANDROID);
                break;
            case R.id.action_logo:
                this.mainFragment.updateDesignWhenUserClickedBottomView(MainFragment.REQUEST_LOGO);
                break;
            case R.id.action_landscape:
                this.mainFragment.updateDesignWhenUserClickedBottomView(MainFragment.REQUEST_LANDSCAPE);
                break;
        }
        return true;
    }
}

Explications : Après avoir déclaré et récupéré (1) la BottomNavigationView dans notre MainActivity, nous configurons son listener (2) afin de récupérer les clics et exécuter ensuite une seconde méthode (3) mettant à jour notre fragment MainFragment.

La méthode  updateDesignWhenUserClickedBottomView  n'existant pas dans le fragment MainFragment, nous en profitons pour la créer immédiatement. Elle nous servira à ré-exécuter notre appel réseau sur l'API de Behance en recherchant des projets traitant soit du sujet "Android", "Logo" ou "Paysage".

Extrait de MainFragment.java :

public class MainFragment extends BaseFragment {
    ...

    public void updateDesignWhenUserClickedBottomView(String request){
        this.refreshProjects(request);
    }

    ...
}

Explications : Cette méthode appelle la méthode  refreshProjects  permettant de télécharger depuis l'API Behance une liste de projets en fonction du mot-clé recherché.

Et c'est tout ! Exécutez maintenant votre application et admirez le résultat... :)

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