Polytechnique Sousse-2020/2021 Android

Enseignante : Yamina Ghobni

Le Navigation Drawer
Ce menu de navigation est principalement composé :
 D'un DrawerLayout, utilisé comme layout racine principal
 D'une Toolbar, utilisée notamment pour afficher le bouton de navigation
 D'une NavigationView, représentant visuellement le menu du Navigation
Drawer
 D'un FrameLayout, contenant les fragments (pages) du Navigation
Drawer

Implémentation

1. Créer un nouveau projet nommée MyDrawer

2. Avant toute chose, nous allons vérifier que la librairie Design Support est bien
installée et gérée par notre gestionnaire de dépendance Gradle. En effet, la
vue NavigationView se trouve à l'intérieur .

dependencies {

...

compile 'com.android.support:design:26.1.0'
}
Polytechnique Sousse-2020/2021 Android
Enseignante : Yamina Ghobni

3. Puis, nous allons modifier le layout de notre activité principale MainActivity afin d'y
ajouter les premiers composants graphiques du NavigationDrawer.
<?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/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#8A7A7A"
tools:context=".MainActivity">

<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#FFFFFF"
app:headerLayout="@layout/header"
app:itemIconTint="@color/darkgray"
app:itemTextColor="@color/darkgray"
app:menu="@menu/drawemenu" />

</androidx.drawerlayout.widget.DrawerLayout>

Intéressons-nous de plus près à la NavigationView. Cette dernière dispose de deux attributs

qui permettront de la configurer assez simplement :

 app:headerLayout permet de définir, via un layout XML, un header (en-tête) à

notre NavigationView
 app:menu permet de définir, via un layout XML, un menu qui affichera la liste de
nos différents écrans sur la NavigationView

Ces deux attributs pointant sur deux fichiers layouts différents, il faut maintenant penser à
les créer... :)
Polytechnique Sousse-2020/2021 Android
Enseignante : Yamina Ghobni

Fichier /res/layout/activity_main_nav_header.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="160dp"
android:orientation="vertical"
android:background="@drawable/photo"
android:padding="20dp">

<ImageView
android:id="@+id/imageView2"
android:layout_width="75dp"
android:layout_height="75dp"
app:srcCompat="@drawable/pp" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sarrah ben ahmed"
android:textColor="#F4EFEF"
android:textStyle="bold" />
<TextView

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sarrahbenahmed@gmail.com"
android:textColor="#F4EFEF"
android:textStyle="bold" />

</LinearLayout>

Fichier /res/menu/activity_main_menu_drawer.xml :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:id="@+id/db"
android:icon="@drawable/ic_dashboard"
android:iconTintMode="screen"
android:title="dashboard" />
<item
android:id="@+id/se"
android:icon="@drawable/ic_search"
android:title="Search" />
<item
android:id="@+id/ev"
android:icon="@drawable/ic_event"
android:title="Events" />
<item
android:id="@+id/set"
android:icon="@drawable/ic_setings"
android:title="settings" />
<item
android:id="@+id/co"
android:icon="@drawable/ic_contact"
Polytechnique Sousse-2020/2021 Android
Enseignante : Yamina Ghobni
android:title="Contact" />
</menu>

Fichier color.xml
On va changer le thème de l’application
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary">#795548</color>
<color name="primary_dark">#5D4037</color>
<color name="darkgray">#6c6c6c</color>
<color name="white">#FFFFFFFF</color>
</resources>

Fichier String.xml
<resources>
<string name="app_name">menuDesign</string>
<string name="open">Open</string>
<string name="close">Close</string>
</resources>

Explications : Ce fichier contient l'ensemble des textes de notre application. Ces deux lignes
nous serviront à la création d'un objet utilisé par le NavigationDrawer.
Fichier Main_Activity.java
package com.example.menudesign;

import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.drawerlayout.widget.DrawerLayout;

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

public class MainActivity extends AppCompatActivity {

private DrawerLayout drawerLayout;
private ActionBarDrawerToggle Toggle;

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

drawerLayout = findViewById(R.id.drawerlayout);

Toggle = new ActionBarDrawerToggle(this,

drawerLayout,R.string.open,R.string.close);
drawerLayout.addDrawerListener(Toggle);
Toggle.syncState();
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

}
public boolean onOptionsItemSelected(MenuItem item){
if (Toggle.onOptionsItemSelected(item)){
return true;
Polytechnique Sousse-2020/2021 Android
Enseignante : Yamina Ghobni
}
return super.onOptionsItemSelected(item);
}
}