Expandable Nested RecyclerView || Android studio Tutorial 2023

Summary

Dans cette vidéo de programmation, l'hôte explique comment créer un RecyclerView imbriqué et extensible. Après avoir amélioré un RecyclerView et un RecyclerView expansible dans des vidéos précédentes, cette vidéo combine ces deux concepts. L'application présentée permet d'agrandir des éléments de RecyclerView pour révéler des sous-éléments, tels que des images et d'autres RecyclerViews. Le tutoriel couvre la création de modèles de données, d'adaptateurs et de la mise en page, ainsi que l'ajout de fonctionnalité d'expansion en cliquant sur des éléments. Le code source est disponible pour aider les téléspectateurs à suivre les étapes.

Takeaways

• 📚 Le tutoriel présente la création d'une vue réutilisable à plusieurs niveaux (nested expandable recycler view).
• 🔗 Il combine les concepts d'une vue réutilisable ordinaire et d'une vue réutilisable étendue (expandable).
• 💻 L'application créée permet l'expansion et la réduction d'éléments dans une liste, comme illustré avec le développement Android.
• 📱 L'interface utilisateur est basée sur des vues de carte (card view) et des vues réutilisables imbriquées pour les sous-éléments.
• 🛠️ Le développement implique la configuration d'un gestionnaire de disposition (layout manager) pour la vue principale et les vues enfants.
• 📝 Deux classes de modèles (data classes) sont créées pour gérer les données des éléments parents et enfants.
• 📑 Les classes d'adaptateurs (adapter classes) sont utilisées pour lier les données aux vues réutilisables correspondantes.
• 🖼️ Des exemples de données, comme les titres et les images, sont incorporés dans les classes de données pour le tutoriel.
• 🔄 La fonctionnalité d'expansion est gérée par un mécanisme qui contrôle la visibilité de la vue enfant en fonction de l'état de l'élément parent.
• 🔄 Lorsqu'un élément est cliqué, la fonctionnalité d'expansion inverse l'état d'expansion et met à jour les autres éléments pour qu'ils soient collapsés.
• 🔗 Le code source complet est fourni dans la description de la vidéo pour permettre aux téléspectateurs de suivre et de mettre en œuvre le tutoriel.

Q & A

Quel est le sujet principal de la vidéo?

Le sujet principal de la vidéo est la création d'une vue réutilisable imbriquée et extensible dans une application.

Quels sont les deux concepts combinés pour créer cette vue réutilisable?

Les deux concepts combinés sont la vue réutilisable de base et la vue réutilisable extensible.

Comment appelle-t-on la vue réutilisable dans laquelle on peut cliquer pour l'agrandir?

Cette vue réutilisable est appelée 'vue parente' ou 'recycler view parent'.

Quel est le rôle du modèle de données 'ChildItem'?

Le modèle 'ChildItem' est utilisé pour stocker les informations telles que le titre et l'image pour les éléments individuels dans la vue réutilisable enfant.

Quelle est la différence entre 'ParentItem' et 'ChildItem'?

Le 'ParentItem' contient un titre, une image, une liste d'éléments enfants et un état d'expansion, tandis que le 'ChildItem' contient simplement un titre et une image.

Combien de méthodes doivent être implémentées dans l'adaptateur de la vue réutilisable parente?

Trois méthodes doivent être implémentées : onCreateViewHolder, onBindViewHolder et getItemCount.

Quel est le but de l'état 'isExpandable' dans le modèle 'ParentItem'?

L'état 'isExpandable' détermine si l'élément parent peut être agrandi pour révéler les éléments enfants.

Comment la fonctionnalité d'expansion est-elle gérée dans la vidéo?

La fonctionnalité d'expansion est gérée en inversant la valeur de 'isExpandable' et en modifiant la visibilité de la vue réutilisable enfant.

Quel est le problème rencontré lors du test de l'application et comment est-il résolu?

Le problème est que plusieurs éléments peuvent être agrandis simultanément. Il est résolu en créant une fonction pour vérifier si un autre élément est agrandi et, si oui, le réduire avant d'agrandir un nouvel élément.

Où peut-on trouver le code source de l'application présentée dans la vidéo?

Le code source peut être trouvé dans la zone de description de la vidéo.

Outlines

00:00

😀 Création d'une vue réutilisable imbriquée

Dans ce paragraphe, l'animateur présente un didacticiel sur la création d'une vue réutilisable (recycler view) imbriquée dans une application Android. Il explique comment combiner les concepts de vue réutilisable et d'expansible pour créer une interface où chaque élément peut être étendu pour révéler un deuxième niveau de vues. L'animateur montre un exemple d'application avec une vue principale qui, lorsqu'un élément est sélectionné, révèle une liste de sous-éléments. Il explique également les étapes de configuration de la vue principale et la préparation des layouts nécessaires pour la vue enfant.

05:00

👨‍💻 Développement de l'adaptateur pour la vue parente

Le deuxième paragraphe se concentre sur le développement de l'adaptateur pour la vue parente de la recycler view. L'animateur crée une classe d'adaptateur qui gère la liste des éléments parent et implémente les méthodes nécessaires pour la vue réutilisable, telles que la création de l'affichage, la liaison de données et le décompte des éléments. Il détaille également la création d'une classe interne ViewHolder pour stocker les références aux vues de l'élément parent et la configuration initiale de la vue enfant à l'intérieur de la vue parente.

10:00

🔧 Configuration de l'adaptateur pour la vue enfant

Dans ce paragraphe, l'animateur se concentre sur la configuration de l'adaptateur pour la vue enfant. Il crée une nouvelle classe d'adaptateur pour gérer les données des éléments enfants et les affichages associés. L'animateur explique comment lier les données aux vues de la vue enfant et comment mettre en place la logique pour l'expansion et la réduction des éléments. Il insiste également sur l'importance de la mise en place de l'écouteur de clics pour permettre l'interaction avec les éléments de la vue.

15:02

🔄 Fonctionnalité d'expansion et de réduction des éléments

Le dernier paragraphe décrit l'ajout de la fonctionnalité d'expansion et de réduction des éléments dans la recycler view. L'animateur explique comment gérer l'état d'expansion des éléments et comment assurer que seul un élément est expandé à la fois en collapsant les autres éléments lorsqu'un nouveau clic est effectué. Il crée une fonction pour vérifier si un élément est déjà expandé et met en place la logique pour gérer l'état de tous les éléments. Enfin, il teste l'application pour s'assurer que la fonctionnalité fonctionne comme prévu et invite les téléspectateurs à s'abonner à la chaîne pour plus de tutoriels.

Keywords

💡Recycler View

Recycler View est un composant de l'interface utilisateur en développement Android qui permet de créer des listes et des grilles de manière efficace. Dans le script, il est utilisé pour créer une vue 'parent' qui peut s'étendre et qui contient d'autres vues 'enfant', illustrant ainsi le concept de liste imbriquée.

💡Expandable

Le terme 'expandable' fait référence à la capacité d'un élément à s'étendre ou à se réduire. Dans le contexte de la vidéo, cela signifie que le Recycler View 'parent' peut être élargi pour révéler plus de contenu, comme le montre l'exemple de la vue s'étendant lorsqu'on clique sur 'Android development'.

💡Adapter

Un 'adapter' dans le développement Android est un objet qui joue le rôle d'intermédiaire entre une vue (telle qu'un Recycler View) et une source de données. Dans le script, l'adaptateur est utilisé pour lier les données des éléments enfants et parents avec les vues correspondantes.

💡Data Class

Une 'data class' est un type de classe en Kotlin utilisé pour représenter des objets de données simples. Dans le script, des classes de données sont créées pour les éléments 'child' et 'parent', définissant ainsi les propriétés de ces éléments, comme le titre et l'image.

💡Constraint Layout

Un 'constraint layout' est un type de disposition dans Android qui permet de créer des interfaces utilisateur complexes avec des contraintes entre les éléments. Dans la vidéo, il est utilisé pour organiser les éléments de l'interface utilisateur, comme les images et les titres, au sein des vues de Recycler View.

💡Material Card View

Le 'Material Card View' est un composant de l'interface utilisateur qui implémente le design Material Design. Dans le script, il est utilisé pour créer des cartes contenant les éléments de liste, offrant une apparence cohérente et attrayante.

💡Image View

Un 'image view' est un élément de l'interface utilisateur qui permet d'afficher des images. Dans le script, il est utilisé pour afficher des icônes et des images associées à chaque élément de liste, améliorant ainsi l'expérience visuelle de l'utilisateur.

💡Layout Manager

Un 'layout manager' est une classe qui gère la disposition des éléments dans un Recycler View. Dans le script, le linear layout manager et le grid layout manager sont mentionnés pour organiser les éléments de la liste de manière linéaire ou en grille.

💡XML

Le format XML est utilisé pour décrire les layouts et les ressources dans Android. Dans le script, il est mentionné que le code source incluant les layouts est fourni dans la description de la vidéo, permettant aux utilisateurs de copier et d'utiliser ces layouts XML.

💡OnClick Listener

Un 'on click listener' est un mécanisme utilisé pour détecter et gérer les événements de clic sur un élément de l'interface utilisateur. Dans le script, il est utilisé pour gérer l'expansion et la réduction des éléments de liste en réponse aux clics de l'utilisateur.

💡Fixed Size

La propriété 'fixed size' est utilisée pour indiquer si un Recycler View a une taille prédéterminée. Dans le script, elle est activée pour le Recycler View 'parent', ce qui peut optimiser le rendu en évitant le redessin de la vue.

Highlights

Introduction to creating a nested expandable RecyclerView in Android.

Combining concepts from previous videos on Mr. RecyclerView and expandable RecyclerView.

Demonstration of the app with a parent RecyclerView that can expand to show child RecyclerViews.

Setting up the main activity with an empty layout and adding a RecyclerView.

Explanation of the layout setup for the child item with Material CardView and ConstraintLayout.

Details on the parent item layout, including another ConstraintLayout and child RecyclerView.

Providing source code in the description for XML layouts.

Creation of two data classes for child and parent items, including attributes like title, image, and child item list.

Introduction of the Parent RecyclerView Adapter and its inheritance from RecyclerView.Adapter class.

Implementation of three methods for the RecyclerView Adapter: onCreateViewHolder, onBindViewHolder, and getItemCount.

Explanation of inflating the layout and setting up the ViewHolder for the parent RecyclerView.

Setting up the child RecyclerView with a Grid Layout Manager and creating a Child RecyclerView Adapter.

Adding expandable functionality with a Boolean variable and toggling the visibility of the child RecyclerView.

Click event setup on the ConstraintLayout to toggle the expandable state of the parent item.

Ensuring only one item is expanded at a time by collapsing other items when a new one is clicked.

Final demonstration of the app in action with correct expand and collapse functionality.

Availability of the source code in the description for those interested in the tutorial.

Conclusion and call to action for viewers to subscribe to the channel for more tutorials.

Transcripts

[Music]

hey guys welcome back to coding stuff

and in this video we'll see how we can

create nested expandable recycler View

and in the previous two videos we have

upgraded our Mr recycler View and then

expandable recycler View and in this

video we're gonna combine those two

concepts and yeah so let me show you the

app that we will be creating

so this is recycler view you can call it

parent recycler view if I click on uh

any item let's just click on Android

development as you can see the recycler

view is expanded and inside this uh card

item we have one text to image you and

another recycler view which is great

recycler view so let me click on front

end web

back end yeah so you can see this one is

recyclable as well so

let me just minimize this so the main

activity is empty activity main is empty

so let's just switch to the split mode

and instead of text view we will have

the recycler View I'll make uh it's

width as a 0 DP DP and height will be 0

DB as well

and I'll delete this text View

cool so now in the main activity

will have led unit wire for a recycler

view so let's just name it as a parent

recycler View

and up type recycler View

I'll just find its ID but before we'll

give it ID so the ID

parent

recycler View

and it will go on the main activity

will find the ID of Parental cycler view

so find your ID

r dot ID dot or enter cycle View we'll

set some properties to it so so it has

fixed size will make it true

will have the layout manager for this so

parent recycle view dot layout manager

we'll use linear layout manager

and will pass the context this cool so

what we need is uh we need two model

class two adapters and two recycle view

for child recycler View and parent

recyclerview so first of all uh let me

just walk you through the layouts that I

have prepared

so child item it is pretty simple so I

have used this material card view inside

that I have constraint layout another

card view for image and then image and

then the texture this one is pretty

simple

and then the parent item

so parent item is

we have one material card here then the

constraint layout inside this constraint

I have another constraint and one

recycler view which is child recycler

view as you can see so inside this

constraint simply we have card View and

the image view then the text view so

I'll be providing source code in the

description box so if you want you can

just copy this XML from there so let me

just close this and

first of all we'll create two model

class or two data class

so I'll select data class and this will

be child item

and we'll have

Val title of type string then we have

image

of type and because we will be using

drawables for this tutorial again you

can use uh images from the rest API or

Firebase it's totally depends on you

just for the tutorial purpose I have

selected some raw images from the

drawable cool so this one is the child

item it is pretty simple as you can see

so now we will create on the package and

we'll create another data class for our

parent item

so parent item

so the first parameter will be your Val

title up type string

well

sorry image of type int and then we'll

have the child item list so child item

list

of type on the list child item

cool then we'll have another parameter

which is is expandable

and we'll make it false this one is

Boolean let's just

keep it as aware and just specify the

type so this one is the expandable which

is Boolean so we'll need this variable

in the future I'll explain it there in

the adapter class cool so let's just

create a adapter class for our parent

item so I'll name it as parent

recycled view adapter

cool

so we'll pass list here

private file

parent item list

type list of parent items cool and then

this class will extend or inherit from

the recycler View

dot adapter class

and this we need to pass the

in a glass so let's just create it so

class or we can name it we can make it

in a class as well so in a class

parent recycler View

we can just name it as parent recycler

view holder

and we need to pass the item view here

so item view of type

View

and this class will generate from the

recitalview.viewholder you need to pass

item view there

cool

so now let me just close the project too

I need to pass this one here so

[Music]

parent recycle adapter cycler view

folder now this is giving us error so we

need to implement three methods of

the recyclerview adapter Alt Enter and

Implement methods we need to implement

just three methods on create view holder

on bind view holder and get item count

cool so inside the gate item count what

we need to do we just need to return the

list right so for entire term list dot

size and inside the on create view

Holder will inflate the layout so while

uh let's just name it as a view this

will be equals to layout inflator

Dot from parent dot context

and then dot inflate dot load dot parent

item parent as a View group and then

false as attached root then we need to

return

the parent array cycle view folder and

we need to pass this view that we just

inflated so in this parent recycler view

holder class what we'll do I'll just

find the IDS of our

uh widgets in the layout so let's just

open the layout we have the text View

and these images

so while

parent image

View

Type image View

this will be equals to item view dot

find yd r dot ID Dot

parent logo IV I'll duplicate this

this will be parent title

up type text View

and its ID will be parent

title TV

then we need the ID of child recycler

view so child recycler View

up type recycler view this will be close

to item View find it ID r dot ID dot

child recyclerview cool

so now we need to work on this on bind

view folder

here first of all we'll we'll create one

object of parent item this will come

from parent list

of the position that you get past and

the bind view folder this one

cool so first of all uh let's just have

access to the holder we'll set the title

and image so title text will be current

item dot title then holder dot parent

major

set image resources dot

we can get it from planet items sorry

dot the image now we'll have access to

our recycler view which is child

recycler view so

we'll set some properties to it like set

has fixed size then we'll set the layout

manager so child recycle View dot layout

manager so we will use grid layout

manager here we need to pass two

parameters so if you will pass

holder Dot

w dot contacts and then another

parameter which is Spam count so I'll

pass three so now we need to create

another adapter for our childhood cycle

view so I'll go to the project view I'll

click on the package name then I'll

create new cartoon class this will be

child cycle of you

adapter

so this class so this adapter will be

simple let me just pause the video and

I'll write the code and I'll explain it

to you so this class is done as you can

see we need to pass the list in the

Constructor of this class then similarly

in our class which is view holder we are

finding the IDS of the widgets then in

oncreate view holder we are inflating

the child item

then in on bind view folder we also

simply setting the data and in the gate

item count we are returning the list

cool so now we'll go to the parental

cyclerview adapter

what we will do I will create one

adapter

and this will be child recyclerview

adapter

we need to pass

the child list here so parent item will

get the list from the parent item Dot

dot child item list and this will be

happy then hold a DOT child recycle View

dot adapter equals to adapter and that's

it

cool so everything is done now we just

need to work on our expandable

functionality

so in here this

I'll just have one comment spine table

functionality

cool so first of all I'll create one Val

which will be is expandable

and this will be equals to parent item

dot is expandable

and then we'll play with the visibility

of the child recycler view so visibility

this will be equals to if the is

expandable is true

then view Dot

visible else

view.com

cool

so if the is expandable is true we'll

make it visible and if not then we'll

make it gone

so we want to expand our child recycler

view when we click on

we'll just move to the parent item so

when you click on this constraint layout

which contains parent items contained

like uh

text and title and Logo so when we click

on this constraint layout we'll just uh

make our child recycler view visible

or will make it expandable so yeah for

that

we need to find ID of our constraint

layout as well so constraint layout

equals this will be of type constraint

layout and this will be close to item

View

fine with ID r dot constraint layout

cool so in here

hold a DOT constraint layout set on

quick listener

so the logic inside this set on click

listener will be parent item dot is

expandable

we'll just reverse it so parent item dot

is expandable so if any item is expanded

we will collapse it and if any item is

not expanded we'll expand it so that's

so that's the simple logic there

we need to call the notify item change

method here

will pass the position cool

okay so guess we have done pretty much

stuff here but we need to do one thing

I'll explain you that later when we run

our app for the first time

so I'll open the main activity and I'll

call one function here which will be

prepared data

we'll click create one list here so

private

uh we'll name it as a parent list

that you need to add as well so this

will be our type only list

of type parent item

will initialize it over here so

parent list equals to

on a list this will be happy then we'll

create this function over here just

after the on create View

on create

not on create View

so in here what we need to do so in here

we'll prepare our data so parent list

dot add

and in here we need to pass

the parent item which takes a title

image child item list and is expandable

parameter so what we will pass here

first will be game development

development

so for the image I'll use r dot drawable

dot console yeah this one then I need to

pass the array list of child items so

first of all we need to create a list of

child items so well

child item one items one I can name it

like that this will be equals to

arraylist of

child items

cool then we'll add some data to it so

child items dot add

child item you need to pass the title so

I'll pass C language there and then the

logo so see cool I'll just duplicate it

few times

and this will be

okay this will be C plus plus

C plus plus cool then we'll use

Java here so Java

then Java

cool we'll use C sharp

C sharp

I guess that will be it then we can pass

these child items over here so child

items one and this will be happy so now

I'll pause the video and I'll add rest

of the data cool so I have added

uh child item one two three four five so

I added five items to this parent list

as you can see back in web AI front end

Android and yeah the game development as

well so just after this we will

initialize the adapter as well adapter

equals to parent recycler view adapter

and we need to pass the parent list

there so parent list then we can just

set this recycler View

with this adapter so adapter cool

so now I'll run the app and we'll see

it's working or not so the app has been

installed

and let me just click on the game

development

so as you can see it is expanded and if

I click on it again so it is collapsed

Android development it is expanded so

this one is working but the problem with

this is if I click on front-end web this

will also expand and this will also

expand if I click on AI this will also

expand so we can do one thing here uh if

we want to expand any item we'll make

sure rest of the items are collapsed so

for that we just need to create one

function

so in the parent recyclerview adapter

and here I'll call one function which

will be is any are done expanded

and will pass the position there

and create that function over here so

plot one is any item expanded will

receive the position

so position of type and

cool and in here I'll create one temp

variable so while temp this will be

equals to will iterate through parent

item list so index of first which will

give us the results

uh based on this condition so it dot is

expandable this will give us the first

result which will match this condition

so after that what we will do

I'll check if the temp is greater than

or equal to zero which means it is valid

then

I'll check if the temp is not equals to

the position that will get passed means

it is not the item that has been clicked

we want to make sure that other items

are collapsed when new item is expanded

cool so in this if condition what we'll

do

parent item list

will pass the temp there

and

is expandable will make it false

and then we can simply call notify item

change will pass the position

which is stamp

cool so we needed this position just to

make sure that uh the item we want to

click that should not be collapsed you

want other items to be collapsed so for

that we are checking if this stamp is

not equal to position

yeah means the rest of the views will be

collapsed if we click on the new item so

yeah let's just try to run the app again

and we'll see it's working or not

so it is installed let me click on

Android development and I'll click on

front end so yeah this one is collapsed

let me click on the backend vape and

yeah so I guess you have seen some

lagging that's because of the on my PC

not the device so the app is working

fine and you can find the source code in

the description box so if you like the

tutorial you can subscribe to channel

so yeah that's it do subscribe and thank

you for watching