Elément de module : Programmation mobile (Pr.
Hamzaoui)
TP5 : Implémentation d’un Navigation Drawer sous Android avec Kotlin
(Partie I)
Objectifs : Ce TP a pour objectif de concevoir et développer une interface de navigation
moderne et fonctionnelle en utilisant un Navigation Drawer, un élément essentiel des
applications Android. À la fin de ce TP, vous serez capable de :
1) Créer et gérer un menu latéral avec DrawerLayout et NavigationView.
2) Structurer l’application avec Fragments et utiliser Navigation Component pour la
gestion de navigation.
3) Personnaliser l'en-tête du menu, incluant une photo de profil circulaire modifiable, un
nom d'utilisateur en gras et un email facultatif.
4) Gérer dynamiquement la navigation entre plusieurs sections de l'application, chaque
élément du menu étant associé à un fragment distinct.
5) Implémenter une interaction utilisateur fluide, avec gestion des clics sur les éléments du
menu.
6) Ajouter une gestion d’événements interactive, permettant de détecter et traiter les clics
sur les éléments du menu.
7) Gérer les permissions essentielles dans [Link], notamment pour
l’accès à la caméra (modification de la photo de profil) et à la localisation (affichage de
la position GPS).
Etape 1 : Ajout des dépendances
-Créez un nouveau projet ➜ TP5 version Android (8.1)
- Dans [Link] (Module: app), ajoutez les dépendances suivantes, puis synchronisez.
1
Etape 2 : Création de Layout principal dans le fichier activity_main.xml.
Dans res/layout/activity_main.xml, ajoutez le code suivant pour définir l'interface principale de
l'application Android :
Le DrawerLayout agit comme conteneur principal et gère l'affichage du menu latéral
coulissant. Il contient un LinearLayout qui structure l'interface en mode vertical.
La Toolbar, placée en haut, permet la navigation et intègre un menu hamburger pour
ouvrir le menu latéral. Toutefois, ce menu hamburger n'est pas directement défini dans ce
fichier XML ; il sera activé plus tard dans [Link] via la configuration de la Toolbar
et du DrawerLayout.
Le FragmentContainerView est utilisé pour afficher dynamiquement les différentes pages
(Fragments) en fonction des choix de l'utilisateur dans le menu.
Le NavigationView (menu latéral), ancré à gauche (layout_gravity="start"), contient un
en-tête personnalisé (drawer_header.xml) et un menu interactif (drawer_menu.xml)
regroupant les différentes options de navigation.
Remarque : Les fichiers drawer_header.xml et drawer_menu.xml seront créés à l'étape
suivante.
2
Etape 3 : Création du Menu de Navigation (drawer_menu.xml)
Dans cette étape, vous allez créer le menu de navigation utilisé par le NavigationView pour
afficher les différentes options du menu latéral (Navigation Drawer). Ce menu est défini dans
le fichier drawer_menu.xml, situé dans le dossier res/menu/.
Le fichier XML commence par un élément <menu>, qui contient un <group> avec
android:checkableBehavior="single". Cela signifie qu'un seul élément du menu peut
être sélectionné à la fois.
Chaque élément du menu (<item>) est identifié par un id unique (nav_home,
nav_messages, nav_history, etc.), un titre (android:title), et une icône (android:icon).
Les icônes sont définies dans res/drawable/ et stylisées avec app:iconTint =
"@color/nav_icon_color" pour harmoniser leur couleur avec le thème de l’application.
Les textes des options sont stylisés avec android:titleTextAppearance =
"@style/MenuTextStyle", un style défini dans [Link], permettant d’optimiser la
taille et l’apparence des intitulés du menu.
Ce menu sera ensuite lié au NavigationView dans activity_main.xml, permettant
d'afficher dynamiquement les différentes options du DrawerLayout.
3
4
Ajoutez les icones dans le dossier drawable sous forme
de Vector Asset depuis : [Link]
-Définissez le MenuTextStyle dans
res/values/[Link], comme suit :
5
NOTE : Le font « popping_medium » n’est pas reconnu dans le projet Android. Pour ce faire,
il va falloir aller dans votre répertoire AndroidStudioProjects/TP5/app/src/main/res et créez
manuellement un dossier font.
-Ensuite téléchargez poppins_medium.ttf depuis :
[Link]
Positionnez le fichier téléchargé dans le dossier font. Quand vous allez retournez à votre
projet AndroidStudio, vérifiez si le dossier suivant est bien présent.
Etape 4 : Personnalisation de l’En-tête du Drawer (drawer_header.xml) Dans cette étape,
vous allez personnaliser l’en-tête du Navigation Drawer, qui s’affiche en haut du menu latéral,
en ajoutant le code suivant dans le fichier drawer_header.xml, situé dans le dossier
res/layout/.
6
Le code drawer_header nécessite les trois fichiers suivants, à ajouter dans le dossier
drawable.
7
Le fichier circle_bg.xml est appliqué en arrière-plan de l’ImageView de la photo de
profil dans drawer_header.xml. Il définit une forme ovale (android:shape="oval") qui
sert de fond circulaire de couleur blanche (android:color="#FFFFFF") avec une taille
fixe de 100dp x 100dp. Cette configuration garantit que l’image de profil s’affiche
correctement dans un cadre arrondi.
Le fichier header_background.xml définit un arrière-plan dégradé utilisé pour styliser
l’en-tête du Navigation Drawer. Il utilise un élément <shape> de type rectangle avec un
dégradé linéaire (<gradient>) appliqué sous un angle de 45° (android:angle="45"). La
couleur de départ (android:startColor="#6200EE") est un violet foncé, tandis que la
couleur de fin (android:endColor="#BB86FC") est un violet plus clair. Ce fichier est
appliqué en arrière-plan du LinearLayout dans drawer_header.xml, offrant un effet
visuel degradé.
Etape 5 : Création des Fragments Dans cette étape, vous allez créer les Fragments qui
serviront à afficher dynamiquement les différentes sections de l’application lorsqu'un
utilisateur sélectionne un élément du menu latéral (Navigation Drawer). Chaque Fragment
représente une page distincte, comme Accueil, Messages, Historique, Paramètres,
Localisation et Aide & FAQ. Pour cela, vous devez créer un fichier de layout XML
(fragment_nom.xml) pour définir l’interface de chaque Fragment, ainsi qu’une classe
Kotlin associée ([Link]) qui gère son comportement. Une fois les Fragments
créés, ils seront affichés dans le FragmentContainerView de activity_main.xml en fonction
des sélections faites dans le NavigationView. L'objectif est d'assurer une navigation fluide
et interactive entre les différentes sections de l’application.
8
9
Faites de même pour les 4 autres fragments.
Etape 6 : Configuration de la Navigation dans [Link] Dans cette étape,
vous allez configurer la gestion de la navigation entre les Fragments à l’aide du Navigation
Drawer. Le fichier [Link] joue un rôle central en reliant la Toolbar, le DrawerLayout
et le NavigationView afin d’assurer une navigation fluide entre les différentes sections de
l’application. Ajoutez le code suivant :
10
11
Explication du code :
Initialisation des composants : La Toolbar, le DrawerLayout et le NavigationView sont
récupérés via findViewById(), puis la Toolbar est définie comme ActionBar.
Activation du menu hamburger : Un objet ActionBarDrawerToggle est ajouté pour
permettre l’ouverture et la fermeture du menu latéral via le bouton hamburger ou un
swipe depuis le bord gauche.
Gestion des clics sur le menu : Un écouteur setNavigationItemSelectedListener est
implémenté pour détecter les sélections des utilisateurs. Selon l’élément cliqué, un
Fragment correspondant est chargé dynamiquement dans le FragmentContainerView
(nav_host_fragment).
Mise à jour de l’interface : Après la sélection d’un élément du menu, l’interface est
mise à jour en remplaçant le Fragment actif et en fermant automatiquement le Drawer
([Link]([Link])) pour améliorer l'expérience
utilisateur.
Grâce à cette configuration, chaque sélection dans le Navigation Drawer déclenche l'affichage
du Fragment associé.
Résultat attendu : Ajoutez vos nom et prénom au lieu de (Non d’utilisateur) et vos emails
dans vos capture.
12
13
