ENICARTHAGE 2025/2026
Développement mobile
Cours_TP6: RecyclerView
- Utiliser la classe RecyclerView pour afficher des éléments dans une liste défilante.
- Ajouter dynamiquement des éléments au RecyclerView lorsqu'ils deviennent visibles grâce au défilement.
- Effectuer une action lorsque l'utilisateur tape sur un élément spécifique.
- Afficher un FAB et effectuer une action lorsque l'utilisateur tape dessus.
[Link]
Android fournit RecyclerView pour la création des applications avec des listes. RecyclerView garantit une efficacité optimale,
même avec de longues listes, grâce à la réutilisation (ou au recyclage) des vues qui ne sont plus affichées à l'écran. Lorsqu'un
élément de liste n'est plus affiché à l'écran, RecyclerView réutilise cette vue pour l'élément suivant qui est sur le point d'être
affiché. Cela signifie que l'élément est rempli avec le nouveau contenu qui défile à l'écran. Ce comportement RecyclerView
permet de gagner beaucoup de temps de traitement et garantit un défilement plus fluide des listes.
Dans la séquence ci-dessous, les données ABC ont été affichées dans une vue. Une fois que cette vue est sortie de l'écran,
RecyclerView la réutilise pour les nouvelles données, XYZ.
Travail à faire :
L'application RecyclerView démontre comment utiliser un RecyclerView
pour afficher une longue liste de mots défilent. C’est possible de créer le
jeu de données (les mots), le RecyclerView lui-même et les actions que
l'utilisateur peut effectuer :
- Toucher un mot le marque comme cliqué.
- Toucher le bouton d'action flottant (FAB) ajoute un nouveau mot.
-1-
ENICARTHAGE 2025/2026
1- Créer un nouveau projet et un nouvel ensemble de données
Créer un nouveau projet pour l'application et un ensemble de données. Dans une application plus sophistiquée, vos
données peuvent provenir du stockage interne (un fichier, une base de données SQLite, des préférences enregistrées),
d'une autre application (Contacts, Photos) ou d'Internet (stockage en nuage, Google Sheets ou toute source de données
avec une API).
Le stockage et la récupération de données sont un sujet à part entière qui est abordé dans les TPs sur le stockage de
données. Pour cet exercice, On peut simuler des données en les créant dans la méthode onCreate() de MainActivity.
1- Activer la nouvelle interface utilisateur dans Android Studio Giraffe:
• à partir de la fenêtre "Welcome to Android Studio": Customize > All settings
• à partir de la fenêtre du projet ouvert: File > Settings
2- Pour activer la nouvelle interface utilisateur et afficher le menu principal dans une barre d'outils séparée, cocher les
deux paramètres suivants :
• Enable new UI
• Show main menu in separate toolbar
Une fois ces paramètres cochés, il faut redémarrer Android Studio pour que les changements soient appliqués.
1.1. Création du projet et la mise en page
1- Créer un nouveau projet avec le nom RecyclerView, sélectionner le modèle "Basic Views Activity".
2- Ouvrir [Link] et changer le parent de du thème de l'application par [Link] et
supprimer le fichier [Link] (night).
-> C'est juste pour avoir la même interface utilisateur, parce que le mode sombre peut être activé sur vos émulateurs ou
téléphones.
<style name="[Link]" parent="[Link]">
Le modèle Basic Views Activity fournit un bouton d'action flottant (FAB) et une barre d'application dans la mise en page
de l'activité (activity_main.xml), ainsi qu'une mise en page pour le contenu de l'activité (content_main.xml).
3- Supprimer le répertoire "navigation" sous les ressources (res).
4- Supprimer toutes les mises en page et classes Java des fragments.
[Link], [Link], fragment_first.xml et fragment_second.xml.
5- Supprimer la balise fragment de "content_main.xml" et la remplacer par un TextView qui contient "Hello World".
6- Supprimer les dépendances de la bibliothèque de navigation et synchroniser le projet.
implementation [Link]
implementation [Link]
7- Une fois la synchronisation du projet est terminé, nettoyer "[Link]" (les imports, methode de navigation
onSupportNavigateUp() et tous les variables en rouge en relation avec la bibliothèque de navigation...)
8- Exécuter l’application. Le titre de l'application RecyclerView "Hello World" doit apparaitre à l'écran.
-2-
ENICARTHAGE 2025/2026
1.2. Créer des données
L'étape suivante du processus de création de l'application RecyclerView consiste à ajouter des ressources.
Ajouter les éléments suivants au projet :
• Des mots à afficher dans l'application.
• Une source de données pour fournir une liste des mots à votre application.
=> Dans la plupart des projets de production Android, la récupération des données se fait à partir d'une base de données ou
d'un serveur. La mise en réseau et les bases de données ne sont pas couvertes dans ce TP. On va utiliser une liste de chaînes
de mots définies dans l'application.
Dans l'application RecyclerView, en plus d'importer les classes Android et Java, l’application va être organiser dans plusieurs
packages. Même si l’application ne contient pas beaucoup de classes, il est recommandé d'utiliser des packages pour les
regrouper par fonctionnalité.
=>En organisant le code de manière logique, nous et d'autres développeurs pouvons le comprendre, le gérer et l'étendre. À
l'instar des documents, que nous pouvons organiser en fichiers et dossiers, nous pouvons organiser le code en fichiers et
packages.
Qu'est-ce qu'un package ?
1- Dans la fenêtre Project (Projet) (Android) d'Android Studio, examiner les nouveaux fichiers de projet sous app > java
pour l'application RecyclerView. Ils doivent ressembler à la capture d'écran ci-dessous qui présente trois packages : un
pour le code ([Link]) et deux pour les fichiers de test ([Link] (androidTest) et
[Link] (test)).
2- Noter que le nom du package comprend plusieurs mots séparés par un point.
1.2.1. Créer un package "model"
1- Dans le volet Projet d'Android Studio, effectuer un clic droit sur app > java > [Link], puis
sélectionner New > Package.
2- Dans le pop-up New package, noter le préfixe du nom de package suggéré. La première partie est le nom du package
sur lequel le clic droit est effectué. Bien que les noms de package ne créent pas de hiérarchie de packages, des parties du
nom sont réutilisées pour indiquer une relation et une organisation du contenu.
3- Dans le pop-up, ajouter model à la fin du nom de package suggéré. Les développeurs utilisent souvent model comme
nom de package pour les classes qui modélisent (ou représentent) les données.
4- Appuyer sur Entrée. Un package est créé sous le package [Link] (racine). Ce nouveau package
contiendra toutes les classes liées aux données définies dans l’application.
1.2.2. Créer la classe de données "Word"
Il s’agit de créer une classe appelée Word. Une instance d'objet de Word représente un mot et contient "word"avec le mot en
question.
5- Effectuer un clic droit sur le package [Link], puis sélectionner New > Java Class.
-3-
ENICARTHAGE 2025/2026
6- Dans le pop-up, sélectionnez Class, puis saisissez Word comme nom de classe. Cette opération crée un fichier nommé
[Link] dans le package model.
7- Pour créer un mot on a besoin juste d'un constructeur pour initialiser le mot dans la classe Word et une méthode qui
retourne le mot pour l'affichage (getter) si l'attribut word est privé.
[Link]
package [Link];
public class Word {
private String mWord;
public Word(String word){
[Link] = word;
}
public void setWord(String word) {
[Link] = word;
}
public String getWord() {
return mWord;
}
}
1.2.3. Créer une classe en tant que source de données
Les données affichées dans l’application peuvent provenir de différentes sources (par exemple, d’un projet d'application ou
d'une source externe qui nécessite une connexion à Internet pour télécharger des données). Par conséquent, il se peut que les
données ne soient pas exactement au format dont on a besoin. Le reste de l'application ne doit pas se préoccuper de la
provenance ni du format d'origine des données. C’est donc conseillé de dissimuler cette préparation de données dans une
classe Datasource distincte qui prépare les données pour l'application.
La préparation des données étant un problème distinct, placer la classe Datasource dans un package data séparé.
1- Dans la fenêtre Projet d'Android Studio, effectuer un clic droit sur app > java > [Link], puis
sélectionner New > Package.
2- Saisissir data comme dernière partie du nom du package.
3- Effectuer un clic droit sur le package data, puis sélectionner New > Java Class.
4- Saisissir DataSource comme nom de classe.
5- Initializer un constructeur vide pour Datasource.
public DataSource(){}
-4-
ENICARTHAGE 2025/2026
6- Dans la classe DataSource, créer une fonction appelée loadWords().
La fonction loadWords() doit renvoyer une liste de mots. Pour ce faire, créer une liste et insérer-y une instance Word pour
chaque mot.
7- Déclarer LinkedList comme type renvoyé de la méthode loadWords().
8- Dans le corps de loadWords(), ajouter ce code pour générer 20 mots.
// Mettre les données initiales dans la liste de mots.
LinkedList<Word> wordList = new LinkedList<>();
for (int i = 0; i < 20; i++) {
[Link](new Word("Word " + i));
}
return wordList;
Le code concatène la chaîne "Word " avec la valeur de i tout en augmentant sa valeur. C'est tout ce dont on a besoin comme
ensemble de données pour cet exercice.
[Link]
package [Link];
import [Link];
import [Link];
public class DataSource {
public DataSource(){}
public LinkedList<Word> loadWords(){
// Mettre les données initiales dans la liste de mots.
LinkedList<Word> wordList = new LinkedList<>();
for (int i = 0; i < 20; i++) {
[Link](new Word("Word " + i));
}
return wordList;
}
}
1.3. Modifier l'icône FAB
Dans ce qui suit on va utiliserer un FAB pour générer un nouveau mot à insérer dans la liste. Le modèle d'activité de base
fournit un FAB, mais c’est possible de modifier son icône. Pour pouvoir choisir une icône parmi l'ensemble d'icônes
d'Android Studio pour le FAB, suivre ces étapes :
1- Développer res dans le volet Project > Android, puis cliquer avec le bouton droit (ou Ctrl-clic) sur le dossier
drawable.
2- Choisir New > Image Asset. La boîte de dialogue Image Asset s'affiche.
3- Choisir Action Bar and Tab Items dans le menu déroulant en haut de la boîte de dialogue.
4- Changer ic_action_name dans le champ Name par ic_add_for_fab.
-5-
ENICARTHAGE 2025/2026
5- Cliquer sur l'image clipart (le logo Android à côté de Clipart) pour sélectionner une image clipart comme icône. Une
page d'icônes apparaît. Cliquer sur l'icône choisie pour le FAB, comme le signe plus (+).
6- Choisir HOLO_LIGHT dans le menu déroulant Theme. Cela définit l'icône pour qu'elle soit blanche sur un fond de
couleur sombre (ou noir). Cliquer sur Next.
7- Cliquer sur Finish dans la boîte de dialogue Confirmer le chemin de l'icône.
8- Ouvrir activity_main.xml et remplacer l'icône du bouton flottant.
app:srcCompat="@drawable/ic_add_for_fab"
=> Pour une description complète de l'ajout d'une icône, voir Create app icons with Image A sset Studio sur ce lien :
[Link]
2. Ajouter une RecyclerView à l’application
La création et l'utilisation d'une RecyclerView reposent sur un certain nombre d'éléments. On peut les considérer comme une
division du travail. Le schéma ci-dessous donne une vue d'ensemble.
- item (élément) : élément de données de la liste à afficher. Représente un objet Word de votre application.
- Adapter (Adaptateur) : accepte les données et les prépare pour que RecyclerView les affiche.
- ViewHolders : pool de vues que RecyclerView peut utiliser et réutiliser pour afficher des mots.
- RecyclerView : vues affichées à l'écran.
Pour afficher des données dans un RecyclerView on a besoin des éléments suivants :
• Données à afficher : Utiliser le Datasource
• Un RecyclerView pour la liste défilante qui contient les éléments de la liste.
• Layout pour chaque élément de donnée. Tous les éléments de la liste se ressemblent.
• Un gestionnaire de mise en page [Link] gère la hiérarchie et la mise en page des éléments
View. RecyclerView nécessite un gestionnaire de mise en page explicite pour gérer l'organisation des éléments de liste
contenus en son sein. Cette mise en page peut être verticale, horizontale ou sous forme de grille. Il faut utiliserer un
LinearLayoutManager vertical.
• Un adaptateur, [Link] connecte les données au RecyclerView. Il prépare les données dans un
[Link]. On va créerer un adaptateur qui insère et met à jour vos mots générés dans nos vues.
• Un ViewHolder, dans notre adaptateur, on va creer un ViewHolder qui contient les informations de vue pour afficher
un élément de la disposition de l'élément.
Le diagramme ci-dessous montre la relation entre les données, l'adaptateur, le ViewHolder et le gestionnaire de mise en page
dans notre application.
-6-
ENICARTHAGE 2025/2026
Pour mettre en œuvre ces pièces, vous devrez :
• Ajouter un élément RecyclerView à la mise en page du contenu XML de MainActivity (content_main.xml) pour
l'application RecyclerView.
• Créer un fichier de mise en page XML (wordlist_item.xml) pour un élément de liste, qui est WordListItem.
• Créer un adaptateur (WordListAdapter) avec un ViewHolder (WordViewHolder).
• Implémenter la méthode qui prend les données, les place dans le ViewHolder et indique au gestionnaire de mise en
page qu'il doit les afficher.
• Dans la méthode onCreate() de MainActivity, créer un RecyclerView et initialiser-le avec l'adaptateur.
2.1. Modifier la mise en page dans content_main.xml
Pour ajouter l’élément RecyclerView element au XML layout, il faut:
1- Ouvrir content_main.xml dans l’application RecyclerView. Il affiche un TextView "Hello World" ajouté
précédemment en remplacement du fragment. Supprimer le TextView car il va etre remplacer par un RecyclerView.
2- Dans la Palette, sélectionner Conteneurs, puis rechercher RecyclerView.
3- Faire glisser une vue RecyclerView dans la mise en page.
4- Si le pop-up "Ajouter une dépendance de projet" s'affiche, liser-le, puis cliquez sur OK. (Si le pop-up ne s'affiche pas,
aucune action n'est requise.)
5- Si nécessaire, remplacer les attributs layout_width et layout_height de la RecyclerView par match_constraint pour que
la RecyclerView puisse remplir l'intégralité de l'écran.
6- Définir l'ID de ressource de RecyclerView sur recyclerview.
7- Revenir à la vue Code. Dans l'élément RecyclerView du code XML, ajouter LinearLayoutManager en tant qu'attribut
de gestionnaire de mise en page de la RecyclerView, comme indiqué ci-dessous.
app:layoutManager="[Link]"
Pour qu'il soit possible de faire défiler une liste verticale d'éléments plus longue que l'écran, vous devez ajouter une barre de défilement
verticale.
8- Dans RecyclerView, ajouter un attribut android:scrollbars défini sur vertical.
android:scrollbars="vertical"
-7-
ENICARTHAGE 2025/2026
La mise en page XML finale doit ressembler à ceci :
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<[Link]
android:id="@+id/recyclerview"
android:layout_width="0dp"
android:layout_height="0dp"
app:layoutManager="[Link]"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</[Link]>
9- Exécuter l’application.
2.2. Créer la mise en page d'un élément de liste
L'adaptateur a besoin de la mise en page d'un élément de la liste. Tous les éléments utilisent la même mise en page. La mise en
page doit etre spécifiée dans un fichier de ressources de mise en page distinct, car elle est utilisée par l'adaptateur, séparément
du RecyclerView.
Créer une mise en page d'élément de mot simple à l'aide d'une disposition LinearLayout verticale avec un TextView.
1- Cliquer avec le bouton droit sur le dossier app > res > layout et choisir New > Layout resource file.
2- Nommer le fichier wordlist_item et metter LinearLayout comme "Root element".
3- Les attributs de LinearLayout est comme suit:
Attribut (LinearLayout) Valeur
android:layout_width "match_parent"
android:layout_height "wrap_content"
android:orientation "vertical"
android:padding "6dp"
4- Ajouter un TextView pour l'affichage du mot au LinearLayout. Utiliser word_title comme identifiant du TextView:
Attribut Valeur
android:id "@+id/word_title"
android:layout_width "match_parent"
android:layout_height "wrap_content"
android:textSize "24sp"
android:textStyle "bold"
-8-
ENICARTHAGE 2025/2026
2.3 Créer un style à partir des attributs TextView
C’est possible d’utiliser des styles pour permettre aux éléments de partager des groupes d'attributs d'affichage. Un moyen
facile de créer un style est d'extraire le style d'un élément d'interface utilisateur déjà créé. Pour extraire les informations de
style du TextView de word dans wordlist_item.xml:
1- Ouvrir le fichier wordlist_item.xml s'il n'est pas déjà ouvert.
2- Cliquer avec le bouton droit sur le TextView créé dans wordlist_item.xml et sélectionner Refactor > Style. La boîte de
dialogue Extract Android Style apparaît.
3- Nommer le style word_title et laisser toutes les autres options sélectionnées. Sélectionner l'option "Launch Use Style
Where Possible'" et cliquer sur OK.
4- une fois invité, appliquer le style à l'ensemble du projet "Whole Project".
5- Trouver et examiner le style word_title dans values > [Link].
6- Réouvrir wordlist_item.xml s'il n'est pas déjà ouvert. Le TextView utilise désormais le style à la place des propriétés
de style individuelles, comme indiqué ci-dessous.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp">
<TextView
android:id="@+id/word_title"
style="@style/word_title" />
</LinearLayout>
2.4. Créer un adaptateur
Android utilise des adaptateurs (à partir de la classe Adapter) pour connecter les données aux éléments de vue (View) d'une
liste. Il existe de nombreux types d'adaptateurs différents, et c’est possible également d’écrire des adaptateurs personnalisés.
Dans de qui suit il s’agit de créer un adaptateur qui associe la liste de mots aux éléments de vue (View) de la liste de mots.
Pour connecter les données aux éléments de la vue, l'adaptateur doit connaître les éléments de la vue. L'adaptateur utilise un
ViewHolder qui décrit un élément de la vue et sa position dans le RecyclerView.
Tout d'abord, il faut créer un adaptateur qui fera le pont entre les données de la liste de mots et le RecyclerView qui l'affiche.
1- Effectuer un clic droit sur app > java > [Link], puis sélectionner New > Package.
2- Saisir adapter comme dernière partie du nom du package.
3- Effectuer un clic droit sur le package adapter, puis sélectionner New > Java Class.
4- Saisir WordListAdapter comme nom de classe.
5- Donner à WordListAdapter la signature suivante (ne pas oublier d'importer les classes nécessaire):
public class WordListAdapter extends
[Link]<[Link]> {}
-9-
ENICARTHAGE 2025/2026
WordListAdapter hérite d'un adaptateur générique pour RecyclerView afin d'utiliser un ViewHolder spécifique à l’application
et défini à l'intérieur de WordListAdapter. WordViewHolder affiche une erreur si on l’a pas encore défini.
6- Cliquer sur la déclaration de classe (WordListAdapter), puis cliquer sur l'ampoule rouge sur le côté gauche du volet
(ou Alt+Entrée). Choisir Implement methods.
7- Une boîte de dialogue apparaît pour choisir les méthodes à implémenter. Choisir les trois méthodes et cliquer sur OK.
Android Studio crée des placeholders vides pour toutes les méthodes. Noter comment onCreateViewHolder et
onBindViewHolder font toutes deux référence à WordViewHolder, qui n'a pas encore été implémentée.
2.5 Créer le ViewHolder pour l'adaptateur
Pour créer le ViewHolder :
1- À l'intérieur de la classe WordListAdapter, ajouter une nouvelle sous-classe WordViewHolder avec la signature
suivante :
public class WordViewHolder extends [Link] {
}
Une erreur apparaît concernant un constructeur par défaut manquant et c’est possible de voir les détails des erreurs en
passant la souris sur le code souligné en rouge ou sur toute ligne horizontale rouge dans la marge droite de la zone
d'édition.
2- Ajouter des variables à la sous-classe WordViewHolder pour le TextView et l'adaptateur:
public final TextView wordItemView;
final WordListAdapter mAdapter;
3- Dans la sous-classe WordViewHolder, ajouter un constructeur qui initialise le ViewHolder, TextView à partir de la
ressource XML word_title et définit son adaptateur.
public WordViewHolder(View itemView, WordListAdapter adapter) {
super(itemView);
wordItemView = [Link]([Link].word_title);
[Link] = adapter;
}
4- Exécuter l’application pour s’assurer qu'il n'y a pas d'erreurs. Toujours qu'une vue vide qui apparait.
5-Cliquer sur l'onglet Logcat pour afficher le volet Logcat, et noter l'avertissement E/RecyclerView: No adapter attached;
skipping layout. => attacherer l'adaptateur au RecyclerView va etre dans une autre étape.
2.6 Stocker les données dans l'adaptateur
On va stocker les données dans l'adaptateur, et WordListAdapter doit avoir un constructeur qui initialise la liste de mots à
partir des données. Suivre ces étapes :
1- Pour stocker vos données dans l'adaptateur, créer une liste chaînée privée de Word dans WordListAdapter et appelez-la
mWordList.
private final LinkedList<Word> mWordList;
-10-
ENICARTHAGE 2025/2026
2- Implémenter le constructeur pour WordListAdapter. Le constructeur doit avoir une liste chaînée de mots avec les
données de l'application. La méthode doit définir mWordList sur les données passées en entrée.
public WordListAdapter(LinkedList<Word> mWordList) {
[Link] = mWordList;
}
3- Remplir maintenant la méthode getItemCount() pour renvoyer la taille de mWordList. La méthode getItemCount() doit
renvoyer la taille de l’ensemble de données. Les données de l’application se trouvent dans la propriété mWordList
transmise au constructeur WordListAdapter.
Pour obtenir leur taille avec size:
@Override
public int getItemCount() {
return [Link]();
}
4- La méthode onCreateViewHolder() est appelée par le gestionnaire de mises en page afin de créer des conteneurs de
vues pour la RecyclerView (s'il n'existe aucun conteneur de vues pouvant être réutilisé). Ne pas oublier qu'un conteneur de
vues représente une seule vue d'élément de liste.
Dans la méthode onCreateViewHolder(), il faut obtenir une instance de LayoutInflater à partir du contexte fourni (context
du parent). Le système de gonflage de mise en page sait comment gonfler une mise en page XML dans une hiérarchie
d'objets de vue.
Une fois l’instance d'objet LayoutInflater est obtenue, ajouter un point suivi d'un autre appel de méthode pour gonfler la
vue d'élément de liste. Transmettre l'ID de ressource de mise en page XML [Link].wordlist_item et le groupe de vues
parent.
Le troisième argument booléen est attachToRoot. Cet argument doit être false, car RecyclerView ajoute automatiquement
cet élément à la hiérarchie des vues le moment venu.
Remplir la méthode onCreateViewHolder() avec ce code:
@NonNull
@Override
public [Link] onCreateViewHolder(@NonNull ViewGroup parent, int
viewType) {
View adapterLayout = [Link]([Link]())
.inflate([Link].wordlist_item, parent, false);
return new WordViewHolder(adapterLayout, this);
}
La méthode onCreateViewHolder() utilise deux paramètres et renvoie un nouveau ViewHolder.
- Un paramètre parent, qui est le groupe de vues auquel la nouvelle vue d'élément de liste sera associée en tant qu'enfant.
La vue parente est la RecyclerView.
- Un paramètre viewType, qui devient important lorsqu'une même RecyclerView contient plusieurs types de vue
d'élément. Si différentes mises en page d'élément de liste sont affichées dans la RecyclerView, il existe différents types de
vue d'élément. Vous ne pouvez recycler que des vues d'éléments ayant le même type. Dans votre cas, il n'existe qu'une
seule mise en page d'élément de liste et un seul type de vue d'élément. Vous ne devez donc pas vous soucier de ce
paramètre.
-11-
ENICARTHAGE 2025/2026
5- La dernière méthode qu’il faut remplacer est onBindViewHolder(). Cette méthode est appelée par le gestionnaire de
mise en page afin de remplacer le contenu d'une vue d'élément de liste.
La méthode onBindViewHolder() comporte deux paramètres : un WordViewHolder créé précédemment par la méthode
onCreateViewHolder() et un int représentant la position actuelle de l'élément dans la liste. Cette méthode vous permet de
trouver l'objet Word approprié dans l'ensemble de données en fonction de la position.
Il faut mettre à jour toutes les vues référencées par le conteneur de vues afin de tenir compte des données correctes pour
cet élément. Dans le cas présent, il n'y a qu'une seule vue : TextView dans WordViewHolder. Définir le texte de TextView
pour afficher la chaîne Word de cet élément.
Remplir la méthode onBindViewHolder() avec le code suivant :
@Override
public void onBindViewHolder(@NonNull [Link] holder, int
position) {
Word mCurrent = [Link](position);
[Link]([Link]());
}
Voici le code d'adaptateur terminé.
public class WordListAdapter extends [Link]<[Link]>
{
private final LinkedList<Word> mWordList;
public WordListAdapter(LinkedList<Word> mWordList) {
[Link] = mWordList;
}
/** * Créer de nouvelles vues
* (appelé par le gestionnaire de disposition "LayoutManager")
*/
@NonNull
@Override
public [Link] onCreateViewHolder(@NonNull ViewGroup parent, int
viewType) {
// créer une nouvelle vue
View adapterLayout = [Link]([Link]())
.inflate([Link].wordlist_item, parent, false);
return new WordViewHolder(adapterLayout, this);
}
/**
* Remplacer le contenu d'une vue
* (appelé par le gestionnaire de disposition "LayoutManager")
*/
@Override
public void onBindViewHolder(@NonNull [Link] holder, int position)
{
Word mCurrent = [Link](position);
[Link]([Link]());
} /
**
* Renvoyer la taille de votre ensemble de données
* (appelé par le gestionnaire de disposition "LayoutManager")
*/
@Override
public int getItemCount() {
-12-
ENICARTHAGE 2025/2026
return [Link]();
}
public class WordViewHolder extends [Link] {
public final TextView wordItemView;
final WordListAdapter mAdapter;
public WordViewHolder(View itemView, WordListAdapter adapter) {
super(itemView);
wordItemView = [Link]([Link].word_title);
[Link] = adapter;
}
}
}
6- Exécuter l’application pour s’ assurer qu'il n'y a pas d'erreurs.
2.7. Créer RecyclerView dans l'activité principale.
Pour terminer, il faut utiliser les classes Datasource et WordListAdapter pour créer et afficher des éléments dans
RecyclerView. Cette opération est effectuée dans MainActivity.
Grace à l’adaptateur avec un ViewHolder, c’est possible de créer un RecyclerView et connecter toutes les pièces pour afficher
les données.
1- Ouvrir MainActivity.
2- Dans MainActivity, accéder à la méthode onCreate(). Insérer le nouveau code décrit dans les étapes suivantes après
l'appel vers setContentView([Link]()).
3- Créer une instance de Datasource sous le nom mDataSource
DataSource mDataSource = new DataSource();
4- Appeler la méthode loadWords() sur l'instance mDatasource. Stocker la liste des mots renvoyée dans un variable local
nommé mWordList.
// Charger la liste des mots
LinkedList<Word> mWordList = [Link]();
5- Ajouter une variable membre de la classe MainActivity pour l'adaptateur. Par contre pour le RecyclerView, il faut
utiliser la bibliothèque de liaison de vues (View Binding), utilisée par le nouveau modèle d'activité de vue de base, au lieu
de la méthode findViewById():
private WordListAdapter mAdapter
La liaison de vues est une fonctionnalité qui facilite l'écriture de code qui interagit avec les vues. Une fois la liaison de vues
activée dans un module, elle génère une classe de liaison pour chaque fichier de mise en page XML présent dans ce module.
Une instance d'une classe de liaison contient des références directes à toutes les vues qui ont un ID dans la mise en page
correspondante.
La liaison de vues est une fonctionnalité très utile pour les développeurs Android, car elle permet de réduire la quantité de
code boilerplate nécessaire pour interagir avec les vues. Elle permet également de rendre le code plus sûr et plus maintenable.
-13-
ENICARTHAGE 2025/2026
Pour vérifier que la liaison de vue (View Binding) est activée dans un module, accédez au fichier [Link] au niveau du
module et vérifier que viewBinding est défini sur true comme le montre l'exemple suivant :
android {
...
buildFeatures {
viewBinding true
}
}
6- Notre RecyclerView est défini dans content_main.xml et nous utilisons include dans activity_main.xml pour l'inclure.
Comme il s'agit d'une mise en page imbriquée (une mise en page à l'intérieur d'une autre mise en page), la fonctionnalité View
Binding ne peut pas voir les vues à l'intérieur de content_main.xml. Pour les exposer, il suffit d'ajouter un ID à la balise
include dans activity_main.xml
Aller dans activity_main.xml et localiser la balise include, puis ajouter-lui content_main comme un ID:
<include layout="@layout/content_main" android:id="@+id/content_main" />
7- Revenir à la méthode onCreate() de MainActivity, ajoutez le code suivant qui connecte le RecyclerView avec l'adaptateur et
les données. Les commentaires expliquent chaque ligne. Vous devez insérer ce code après l'initialisation de mWordList.
// Créer une instance de l'adaptateur en passant la liste des mots comme paramètre
mAdapter = new WordListAdapter(mWordList);
// Lier RecyclerView à son adaptateur
// [Link] remplace findViewById([Link])
[Link](mAdapter);
8- Étant donné que la taille de mise en page de votre RecyclerView est fixe dans la mise en page de l'activité, c’est possible de
définir le paramètre setHasFixedSize de RecyclerView sur true. Ce paramètre ne sert qu'à améliorer les performances. Utiliser
ce paramètre si les modifications apportées au contenu n'ont pas d'incidence sur la taille de mise en page de RecyclerView.
[Link](true)
9- Exécuter l’application.
La liste de mots est affichée, et c’est possible de faire défiler la liste.
-14-
ENICARTHAGE 2025/2026
3- Rendre la liste interactive
Regarder des listes d'éléments est intéressant, mais c'est beaucoup plus utile si c’est possible interagir avec elles. Pour voir
comment le RecyclerView peut répondre à la saisie de l'utilisateur, il faut attacher un gestionnaire de clic à chaque élément.
Lorsque l'élément est tapé, le gestionnaire de clic est exécuté et le texte de cet élément change.
La liste d'éléments qu'un RecyclerView affiche peut également être modifiée dynamiquement, elle n'a pas besoin d'être une
liste statique. Il existe plusieurs façons d'ajouter des comportements supplémentaires. L'une d'entre elles consiste à utiliser le
bouton d'action flottant (FAB). Par exemple, dans Gmail, le FAB est utilisé pour composer un nouvel e-mail.
Dans ce qui suit il s’agit de générer un nouveau mot à insérer dans la liste. Pour une application plus utile, nous allons obtenir
des données des utilisateurs.
3.1. Faire réagir les éléments aux clics
1- Ouvrir WordListAdapter.
2- Modifier la signature de la classe WordViewHolder pour implémenter [Link]:
class WordViewHolder extends [Link]
implements [Link] {
3- Cliquer sur l'en-tête de la classe et sur l'ampoule rouge pour implémenter des stubs pour les méthodes requises, qui dans
ce cas est juste la méthode onClick().
4- Ajouter le code suivant au corps de la méthode onClick():
// Obtenir la position de l'élément cliqué
int mPosition = getLayoutPosition();
// Utilisez cela pour accéder à l'élément affecté dans mWordList. Word element =
[Link](mPosition);
// Modifiez le mot dans la liste mWordList.
[Link]("Clicked! " + [Link]()); [Link](mPosition, element);
// Notifier l'adaptateur que les données ont changé afin qu'il
// puisse mettre à jour le RecyclerView pour afficher les données
[Link]();
5- Connecter l'onClickListener à la vue. Ajouter ce code au constructeur WordViewHolder (sous la ligne [Link] =
adapter):
[Link](this);
6- Lancer l’application. Cliquer sur les éléments pour voir le texte changer
3.2. Ajouter plus de données (un nouveau mot)
Implémenter une action pour le FAB afin de :
• Ajouter un mot à la fin de la liste de mots.
• Notifier l'adaptateur que les données ont changé.
• Faire défiler jusqu'à l'élément inséré..
-15-
ENICARTHAGE 2025/2026
Suivre ces étapes:
1- Ouvrir MainActivity. La méthode onCreate() définit un OnClickListener() sur le FloatingActionButton avec une
méthode onClick() pour effectuer une action. Modifier la méthode onClick() comme suit :
@Override
public void onClick(View view) {
int wordListSize = [Link]();
// Ajoutez un nouveau mot à la liste de mots.
[Link](new Word("+ Word " + wordListSize));
// Notifiez l'adaptateur qu'une nouvelle donnée a été insérée.
[Link]().notifyItemInserted(wordListSize);
// Faites défiler jusqu'en bas
[Link](wordListSize);
}
2- Exécuter l'application.
3- Faites défiler la liste de mots et cliquer sur les éléments.
4- Ajouter des éléments en cliquant sur le FAB.
=> C’est possible d’utiliser le thème builder pour Material Design version 3([Link]
pour personnaliser les couleurs du thème.
-16-
ENICARTHAGE 2025/2026
Résumé
• RecyclerView est un moyen efficace d'afficher une liste d'éléments défilante.
• Pour créer une vue pour chaque élément de liste, l'adaptateur gonfle une ressource de mise en page XML pour un
élément de liste à l'aide de LayoutInflator.
• LinearLayoutManager est un gestionnaire de mise en page RecyclerView qui affiche les éléments dans une liste à
défilement vertical ou horizontal.
• GridLayoutManager est un gestionnaire de disposition RecyclerView qui affiche les éléments dans une grille.
• StaggeredGridLayoutManager est un gestionnaire de disposition RecyclerView qui affiche les éléments dans une grille
décalée.
• Utiliser [Link] pour connecter vos données au RecyclerView. Il prépare les données dans un
[Link] qui décrit un élément View et sa position dans le RecyclerView.
• Implémenter [Link] pour détecter les clics de souris dans un RecyclerView.
Travail à faire
Créer et exécuter une application
Créer une application qui utilise un RecyclerView pour afficher une liste de recettes. Chaque élément de la liste doit indiquer
le nom de la recette avec une courte description. Lorsque l'utilisateur appuie sur une recette (un élément de la liste), démarrer
une activité (Activity) qui affiche le texte complet de la recette.
• Utiliser des éléments et un style TextView distincts pour le nom et la description de la recette.
• Il est possible d'utiliser un texte d'espace réservé (placeholder) pour les recettes complètes.
• En option, ajouter une image du plat fini à chaque recette.
• Cliquer sur le bouton Haut ramène l'utilisateur à la liste des recettes.
La capture d'écran ci-dessous montre un exemple d'implémentation simple. L'application peut avoir un aspect très différent,
tant qu'elle dispose des fonctionnalités requises.
-17-