Atelier Développement

Mobile Native TP 7

TP 7
Navigation Drawer _RecyclerView – Menus –
Boites de dialogues
Objectif
Dans ce TP7, l’objectif est de lister l’ensemble des enseignants; tout en utilsant
un menu Navigation Darwer pour naviguer dans l’application le résultat en fin de tp
ressemblera à la figure ci-dessous.

Pour y arriver deux étapes sont à réaliser :

 Etape A : création du projet avec le menu Navigation Drawer et le menu d’option
 Etape B : fonctionnalité pour la gestion des enseignants

Etape A : création du projet avec le menu Navigation Darwer et le

menu d’option :
Voici un exemple complet d'une application Android utilisant un `DrawerLayout` avec une `Toolbar` et
des fragments. Suivez ces étapes :

Étape 1 : Configuration du Projet

1. Créer un nouveau projet Android dans Android Studio avec une activité vide.
Hend Ben Ayed Kharrat 2024/2025 1
 Atelier Développement
Mobile Native TP 7

Étape 2 : Créer la mise en page XML

1. Modifier activity_main.xml pour inclure le DrawerLayout, la Toolbar, et le NavigationView :
<?xml version="1.0" encoding="utf-8"?>
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
tools:openDrawer="start"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- La Toolbar -->
<[Link]
android:layout_width="match_parent"
android:layout_height="56dp"
android:id="@+id/toolbar"
android:elevation="4dp"
android:background="@color/lavender"
android:theme="@style/[Link]"
/>
<!-- Contenu principal -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/fragment_container"/>
</LinearLayout>
<!-- Menu du Drawer -->
<[Link]
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/nav_view"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"
app:itemIconTint="@color/lavender"
android:layout_gravity="start"
android:theme="@style/[Link]"/>
</[Link]>

Hend Ben Ayed Kharrat 2024/2025 2

 Atelier Développement
Mobile Native TP 7

Étape 3 : Créer le Menu de Navigation

1. Créer un dossier menu dans res, si ce n'est pas déjà fait.
2. Ajouter un fichier XML pour le menu dans res/menu/nav_menu.xml :
Rappelez vous de la structure d’un Drawer Navigation Layout

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

<menu
xmlns:android="[Link]

xmlns:tools="[Link]
tools:showIn="navigation_view">
<group>
<item
android:id="@+id/nav_about"
android:icon="@drawable/nav_about"
android:title="About" />
<item
android:id="@+id/nav_home"
android:icon="@drawable/nav_home"
android:title="Gerer Enseignant" />
</group>
<item android:title="">
<menu>
<item
android:id="@+id/nav_logout"
android:icon="@drawable/nav_exit"
android:title="Logout" />
</menu>
</item>
</menu>

Étape 4 : Créer l'En-tête du Menu

1. Créer un fichier de mise en page pour l'en-tête dans res/layout/nav_header.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
Hend Ben Ayed Kharrat 2024/2025 3
 Atelier Développement
Mobile Native TP 7

xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="176dp"
android:gravity="bottom"
android:padding="16dp"
android:theme="@style/[Link]" >
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/sym_def_app_icon" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="My App"
android:textAppearance="@style/[Link].Body1"
/>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="user@[Link]" />
</LinearLayout>

Étape 5 : Configurer MainActivity

1. Modifier [Link] pour gérer le DrawerLayout et les clics sur les éléments du menu :
package [Link].tp6recyclerviewmeu;

import …
public class MainActivity extends AppCompatActivity
implements [Link] {
ActivityMainBinding bind;
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
bind = [Link](getLayoutInflater());
View view = [Link]();
setContentView(view);
setTitle("My App");

// Initialiser la Toolbar
setSupportActionBar([Link]);

// Gestion des clics dans le Navigation Drawer

Hend Ben Ayed Kharrat 2024/2025 4

 Atelier Développement
Mobile Native TP 7

[Link](this);
// Initialiser le DrawerLayout

// Ajouter un Listener pour ouvrir/fermer

ActionBarDrawerToggle toggle = new
ActionBarDrawerToggle(this, [Link], [Link], [Link].open_drawer,
[Link].close_drawer);
[Link](toggle);
[Link]();

// Charger le fragment sélectionné

if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction().replace
([Link].fragment_container, new AboutFragment()).commit();
[Link]([Link].nav_home);

}
}

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
if ([Link]() ==[Link].nav_home) {
[Link]("Enseignants");
getSupportFragmentManager().beginTransaction().replace
([Link].fragment_container, new homeFragment()).commit();

}else if ([Link]()==[Link].nav_about){
[Link]("About");
getSupportFragmentManager().beginTransaction().replace
([Link].fragment_container, new AboutFragment()).commit();

}else if([Link]()==[Link].nav_logout)
{ Log.i("tag","exit");
[Link](this,"Exit",Toast.LENGTH_LONG).show();
finish();
}
[Link]([Link]);
return true;

}
@Override
public void onBackPressed(){
if([Link]([Link])){
[Link]([Link]);

}else{
[Link]();
}

Étape 6 : Créer les Fragments

1. Créer [Link] :

Hend Ben Ayed Kharrat 2024/2025 5

 Atelier Développement
Mobile Native TP 7

package [Link].tp6recyclerviewmeu;
import …
public class AboutFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return [Link]([Link].fragment_about, container, false);
//Action à ajouter pour les fonctionnalités du fragment
}
}
2. Créer [Link] :
package [Link].tp6recyclerviewmeu;
import …
public class homeFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return [Link]([Link].fragment_about, container, false);
//Action à ajouter pour les fonctionnalités du fragment
}
}

Étape 7 : Créer les Layouts des Fragments

1. Créer fragment_about.xml :
<?xml version="1.0" encoding="utf-8"?>
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AboutFragment">

<!-- TODO: Update blank fragment layout -->

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ABOUT FRAGMENT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</[Link]>
Hend Ben Ayed Kharrat 2024/2025 6
 Atelier Développement
Mobile Native TP 7

2. Créer fragment_home.xml :
<?xml version="1.0" encoding="utf-8"?>
<[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/frag_home"
tools:context=".homeFragment">
<TextView
android:id="@+id/header_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:background="#ff2555"
android:padding="10dp"
android:text="@string/liste_enseignants"
android:textColor="@android:color/white"
/>
<[Link]
android:id="@+id/mRecyclerview"
android:layout_width="424dp"
android:layout_height="634dp"
android:scrollbars="vertical"
/>
</[Link]>
Étape 8 : Tester l'application
1. Lancer votre application sur un émulateur ou un appareil physique.
2. Ouvrir le Navigation Drawer en glissant depuis le bord gauche de l'écran ou en appuyant sur le
bouton de menu de la Toolbar.
3. Naviguer entre les fragments en sélectionnant les éléments du menu.
Avec ces étapes, vous avez créé une application Android avec un `DrawerLayout` fonctionnel, une
`Toolbar`, et des fragments pour gérer la navigation. Vous pouvez maintenant personnaliser davantage les
fragments, ajouter des icônes dans le menu, ou enrichir l'interface utilisateur selon vos besoins. N'oubliez
pas de tester les interactions et d'ajuster les styles selon votre design.

Etape B : fonctionnalité pour la gestion des enseignants

RecyclerView Pour la liste de Enseignants

Implémentant maintenant notre Liste d’enseignants sous forme de RecyclerView

Hend Ben Ayed Kharrat 2024/2025 7

 Atelier Développement
Mobile Native TP 7

Étape 1: définir le RecyclerView dans la mise en page

<[Link]
android:id="@+id/mRecyclerview"
android:layout_width="424dp"
android:layout_height="634dp"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/header_list" />

Dans MainActivity:
RecyclerView rv = (RecyclerView)findViewById([Link]. mRecyclerview);
Ou bind. mRecyclerview…..

Si vous êtes sûr que la taille du RecyclerView ne changera pas, vous pouvez ajouter les
éléments suivants pour améliorer les performances:
[Link](true);

Étape 2: Utilisation d’un LayoutManager

Un RecyclerView a besoin d’une LayoutManager pour gérer le positionnement de ses articles.
Dans ce tp, utilisez un LinearLayoutManager. Ce LayoutManager sous-classe, par défaut, rendra
votre RecyclerView ressemble à un ListView.

Étape 3: Définition des données (Modèle)

Une RecyclerView a besoin d’un adaptateur pour accéder à ses données. Mais avant de créer
un adaptateur, créons des données avec lesquelles nous pouvons travailler.
 Créez une classe simple (POJO) pour représenter un Teacher, caractérisé par son
nom et email
Étape 4: création d’un CardView pour l’Item Teacher
Une CardView est un ViewGroup. Comme n’importe quel autre ViewGroup, il peut être ajouté à
votre Activity ou Fragment à l’aide d’un fichier XML de mise en page.
Pour créer un vide CardView, vous devrez ajouter le code suivant à votre mise en page
XML, comme indiqué dans l’extrait de code suivant:
<[Link]
xmlns:card_view="[Link]
xmlns:android="[Link]
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="60dp"
card_view:cardCornerRadius="4dp">

créons maintenant un LinearLayout dans le CardView. le CardView pourrait représenter, par

exemple, un payset contenir les éléments suivants:
o une TextView pour afficher le nom du teacher

Hend Ben Ayed Kharrat 2024/2025 8

 Atelier Développement
Mobile Native TP 7

o une TextView pour afficher l’email du teacher

Étape 5: création d’un adaptateur

Pour créer un adaptateur vous devez étendre [Link]. Cet adaptateur suit
le viewHolder, ce qui signifie que vous devez définir une classe personnalisée qui
étend [Link].
Étape 6: Utilisation de l’adaptateur
Maintenant que l’adaptateur est prêt, ajoutez le code suivant à votre Activity pour initialiser
et utiliser l’adaptateur en appelant le constructeur de l’adaptateur et le RecyclerView
de setAdapter
Étape 7: Compilez et exécutez

Menu D’options – Boites de Dialogues

La plate-forme Android propose 3 types de menus :
- Menu d'options : situé sur ActionBar ou Toolbar, il s'agit du menu principal d'Android. Il est
généralement utilisé pour fournir des informations supplémentaires sur une application, ainsi que pour
créer un lien vers des sections d'aide et de paramètres.
- Menu contextuel : affichage lors d' un clic long sur une vue, par exemple : une ligne ListView, fournit
généralement des méthodes de personnalisation pour cette vue.
- Menu contextuel (PopUp Menu) : s'affiche sous forme de boîte de dialogue contextuelle lorsque vous
cliquez sur une vue comme un bouton, une vue d'image,...

Commençons par le menu d’option

1. Ajouter un fichier XML pour le menu option Enseignant dans
res/menu/menu_main_enseig_xml :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="[Link]
xmlns:app="[Link]
<item
android:id="@+id/a_z"
android:title="Sort A-Z"
app:showAsAction="never" />
<item
android:id="@+id/z_a"
android:title="Sort Z-A"
app:showAsAction="never" />

<item
android:id="@+id/add"
android:icon="@mipmap/add"
android:title="Add"
app:showAsAction="ifRoom"
/>
</menu>
2. Ajouter un fichier XML pour le menu option About dans res/menu/menu_main_about_xml :

Hend Ben Ayed Kharrat 2024/2025 9

 Atelier Développement
Mobile Native TP 7

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

<menu xmlns:android="[Link]
xmlns:app="[Link]
<item
android:id="@+id/about"
android:icon="@drawable/about"
android:title="About"
app:showAsAction="ifRoom"
/>
</menu>
3. //création dans le MainActivity
Menu menu;
@Override
public boolean onCreateOptionsMenu(Menu menus) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate([Link].menu_main_about, menus);
[Link]=menus;
return [Link](menu);
}

boolean enseig=false;boolean about=false;

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
[Link](); // Clear the existing menu items
// ajouter une condition pour active le enu correspondant au fragment choisi
if (enseig) {
getMenuInflater().inflate([Link].menu_main_enseig, menu); // Inflate
menu for option 1
} else if(about) {
getMenuInflater().inflate([Link].menu_main_about, menu); // Inflate menu
for option 2
}

return [Link](menu);
}

4. Dans le navigation menu

Pour chaque item choisi ajouté :
if ([Link]() ==[Link].nav_home) {
[Link]("Enseignants");
enseig=true;about=false;
invalidateOptionsMenu();
getSupportFragmentManager().beginTransaction().replace
([Link].fragment_container, new homeFragment()).commit();
}
et vous poursuivez de la même façon

5. Evénement de clic
En gérant chaque événement de clic d'élément en remplaçant onOptionsItemSelected() , distinguez
chaque événement d'entité par son identifiant :
// action sur le menu d’option
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if ([Link]() == [Link].a_z) {
[Link](teachers);

Hend Ben Ayed Kharrat 2024/2025 10

 Atelier Développement
Mobile Native TP 7

return true;

} else if ([Link]() == [Link].z_a) {

[Link](teachers);
return true;

} else if ([Link]() == [Link]) {

showAddingDialog();
}

return [Link](item);
}
Les méthodes sortByName et reverseByName doivent etre définit dans le adaptateur puisque nous allons
manipuler les données du recyclerView
Utiliser les collections avec l’interface Comparator
[Link]
public void sortByName(List<Teacher> Teacher) {
…….
notifyDataSetChanged();

}
public void reverseByName(List<Teacher> Teacher) {
…..
notifyDataSetChanged();

Boite de dialogue personnalisé pour l’ajout de Teacher

Le click sur le menu add du menu d’option lance une boite de dialogue pour l’ajout d’enseignant
1. Appel boite de dialogue suite au click sur le menu add du menu d’option
//boite de dialogue pour ajout teacher
private void showAddingDialog() {
MyDialogFragment dialog = new MyDialogFragment();
[Link](getSupportFragmentManager(), "my_dialog");
}
}

2. Ajouter une classe MyDialogFragment:

package [Link].tp6recyclerviewmeu;

import …
public class MyDialogFragment extends DialogFragment {
@NonNull
@Override
public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
[Link] builder = new
[Link](requireContext());
final View dialogView =
[Link]().inflate([Link].layout_add_dialog, null, false);
//fait reference à une boite de dialogue (layout xml) à creer
[Link](dialogView);

Hend Ben Ayed Kharrat 2024/2025 11

 Atelier Développement
Mobile Native TP 7

//recuperer edit text du dialog view

final EditText nom = (EditText) [Link]([Link].edit_text);
final EditText email = (EditText) [Link]([Link]);
return [Link]("Ajouter Nouveau Enseignant\"")
.setMessage("Donner nom enseignant")
.setPositiveButton("Valider",new
[Link]() {
public void onClick(DialogInterface dialog, int whichButton) {
//action en cas de reponse positive

})
.setNegativeButton("Annuler", new
[Link]() {
public void onClick(DialogInterface dialog, int whichButton) {
//Action or
//do nothing, just close this dialog
}
}).create();
}}

Menu contextuel
Le menu contextuel apparaît lorsque les utilisateurs appuient longuement sur les éléments de l'interface
utilisateur, en appuyant sur l'élément et en le maintenant enfoncé jusqu'à ce que le menu apparaisse.
Dans notre Interface le click long sur un item du recyclerview affiche un menu contextuel qui permet ou
bien de supprimer l’item selectionné (bien sur d’autre action peuvent être ajoutées)

Hend Ben Ayed Kharrat 2024/2025 12

 Atelier Développement
Mobile Native TP 7

Étape 1: Création Item

Comme le menu d'options, il est également déclaré par le fichier xml dans le dossier res/menu
Étape 2: Création Menu Contextuel
Dans le code par programmation, créez ContextMenu en remplaçant onCreateContextMenu() dans la
classe du ViewHolder
Étape 3: Item sélectionné du Menu Contextuel
Et gérer chaque événement d'élément ContextMenu dans onContextItemSelected() dans le fragment en
question
 Définir la méthode public void removeItem(int position)
{………….} de la classe adapter pour l’item delete

Popup Menu
Un PopupMenu affiche un Menu dans une fenêtre contextuelle modale ancrée à une Vue. La fenêtre
contextuelle apparaîtra sous la vue d'ancrage s'il y a de la place, ou au-dessus s'il n'y en a pas.
Dans ce tp, nous montrons un PopupMenu lorsque vous cliquez sur un TextView, le gonfler et gérer son
événement de clic sur les éléments est si simple

Pour ce faire :
Étape 1: Création Item
Comme le menu d'options, il est également déclaré par le fichier xml dans le dossier res/menu
Étape 2: Appel du menu d’option
L’événement clic sur le textview lance une méthode onShowPopupMenu()

Hend Ben Ayed Kharrat 2024/2025 13

 Atelier Développement
Mobile Native TP 7

//popup menu
[Link](onShowPopupMenu());
Étape 3: Création du menu PopUp
private [Link] onShowPopupMenu() {
return new [Link]() {
@Override
public void onClick(View v) {
popupMenu = new PopupMenu(getActivity(), v);
[Link](onPopupMenuClickListener());
[Link]([Link].menu_pop_up);
[Link]();
}
};
}

Étape 4: Item sélectionné du menu PopUp

Définir la méthode onPopupMenuClickListener()
private [Link] onPopupMenuClickListener() {
return new [Link]() {
@Override
public boolean onMenuItemClick(MenuItem item) {
….
}

};

}
Utiliser [Link]() et [Link]([Link]|VISIBLE)
Pour visualiser et cacher le recyclerView

Hend Ben Ayed Kharrat 2024/2025 14