Tutoriel android : code source d'integration d'une barre de navigation (navigation drawer) dans une activité android

 

Ce tutoriel vous permet d'apprendre à ajouter un navigation drawer à travers un NavigationView dans un DrawerLayout dans votre activité Android. Cet article contient une vidéo qui vous explique comment integrer une barre de navigation au niveau d'un empty activity. La vidéo contient des détails qui vous permettent d'apprendre comment cette intégration s'effectue. Le code source xml et java se trouve en dessous de la vidéo.

Tout d'abord nous devons mettre en place trois fichier xml dans le dossier layout de notre projet et nous devons aussi ajouter un dossier menu sous notre dossier Res. Nous devons aussi ajouter un fichier portant le nom de menu_main.xml sous le dossier menu.

Le premier fichier c'est celui qui représente l'interface principale de notre activité et il porte le nom d'activity_mail.xml :

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 
	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:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <include
        layout="@layout/app_bar_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/menu_main"
        />
</androidx.drawerlayout.widget.DrawerLayout>

Le second fichier c'est celui qui représenter notre barre en haut de l'activité et il porte le nom de app_bar_main.xml Son code est le suivant :

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
	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">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme" />
    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Le troisième fichier c'est celui qui représente le navigation drawer et il porte le nom de nav_header_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:padding="20dp"
    android:background="@color/purple_500"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher_round" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView" />
</LinearLayout>

NB : Avant de passer à la partie java vous devez s'assurer que votre thème (style) de votre projet est un style qui ne contient pas de barre d'action. Regardez la vidéo pour pouvoir effectuer cette action si vous ne parvenez pas à comprendre ce qui faut faire. Vous devez aussi ajouter ces deux balises à votre fichier strings.xml :

    <string name="drawer_open">Open</string>
    <string name="drawer_close">Close</string>

On peut passer maintenant à notre activité java , le code de cette activité sera mis dans la classe MainActivity.java. Essayez de suivre la vidéo pour comprendre à quoi sert chaque instruction :

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.drawerlayout.widget.DrawerLayout;

import android.os.Bundle;
import android.view.MenuItem;

import com.google.android.material.navigation.NavigationView;


public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    DrawerLayout drawerLayout;
    ActionBarDrawerToggle toggle;
    Toolbar toolbar;
    NavigationView nav;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        drawerLayout = findViewById(R.id.drawer);
        toolbar=findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toggle= new ActionBarDrawerToggle(
                this,
                drawerLayout,toolbar,
                R.string.drawer_open,
                R.string.drawer_close);
        drawerLayout.addDrawerListener(toggle);
        ActionBar actionBar= getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        nav= findViewById(R.id.nav);
        nav.setNavigationItemSelectedListener(this);
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        return false;
    }
}