Expandable Nested RecyclerView || Android studio Tutorial 2023
Summary
TLDRThis tutorial video guides viewers on creating a nested expandable RecyclerView in Android. It demonstrates combining a standard RecyclerView with an expandable one, showcasing how to implement a parent RecyclerView that, when tapped, reveals a child RecyclerView. The video covers setting up the layout, creating data classes for parent and child items, and writing custom adapter classes. It also explains the expand and collapse functionality, ensuring only one item is expanded at a time. The source code is provided for further learning.
Takeaways
- 📱 The video tutorial demonstrates how to create a nested expandable RecyclerView in Android development.
- 🔄 It builds upon previous videos that focused on upgrading a basic RecyclerView and an expandable one.
- 🏗️ The app design includes a 'parent RecyclerView' that can be expanded to reveal a 'child RecyclerView' within each item.
- 🔑 Key components required are two model classes, two adapters, and two RecyclerViews for both parent and child views.
- 📝 The script walks through the creation of XML layouts for both child and parent items, using Material CardView and ConstraintLayout.
- 📚 Two data classes are created: 'ChildItem' with a title and image, and 'ParentItem' with additional properties for child items and expandability.
- 🔧 The 'ParentRecyclerViewAdapter' and 'ChildRecyclerViewAdapter' are explained, detailing their constructors, view holders, and methods.
- 📲 The tutorial covers setting up the RecyclerView with fixed size, layout managers, and binding data to views.
- 🔄 The expand/collapse functionality is implemented by toggling the 'isExpandable' Boolean property and updating the child RecyclerView's visibility.
- 🛠️ The script mentions creating a function to ensure only one item is expanded at a time by collapsing others when a new item is clicked.
- 🔗 The source code for the tutorial is provided in the description box for those interested in following along or using as a reference.
Q & A
What is the main topic of the video?
-The main topic of the video is creating a nested expandable RecyclerView in Android.
What are the two concepts combined in this video?
-The two concepts combined in this video are the upgraded RecyclerView and the expandable RecyclerView.
What is the purpose of the Parent RecyclerView in the app?
-The Parent RecyclerView is used to display items that can be expanded to show more details, such as a nested RecyclerView.
How is the layout for the child item designed in the video?
-The layout for the child item uses a Material Card View inside a ConstraintLayout, containing another Card View for the image and a TextView for the text.
What are the two model classes created in the video?
-The two model classes created are 'ChildItem' with properties like title and image, and 'ParentItem' with properties like title, image, a list of child items, and an isExpandable boolean.
What is the role of the 'isExpandable' boolean in the ParentItem class?
-The 'isExpandable' boolean in the ParentItem class determines whether the item can be expanded to show its child items.
How many methods need to be implemented in the Parent RecyclerView Adapter class?
-Three methods need to be implemented in the Parent RecyclerView Adapter class: onCreateViewHolder, onBindViewHolder, and getItemCount.
What is the purpose of the Child RecyclerView Adapter class in the video?
-The Child RecyclerView Adapter class is used to manage the child items displayed within the nested RecyclerView when a parent item is expanded.
How does the video handle the expansion and collapse of items in the RecyclerView?
-The video handles the expansion and collapse by setting an OnClickListener on the ConstraintLayout of the parent item, which toggles the 'isExpandable' boolean and updates the visibility of the child RecyclerView.
What is the function of the 'isAnyItemExpanded' function in the Parent RecyclerView Adapter?
-The 'isAnyItemExpanded' function checks if any item is currently expanded and ensures that only one item can be expanded at a time by collapsing others when a new item is clicked.
How does the video ensure that only one parent item can be expanded at a time?
-The video ensures that only one parent item can be expanded at a time by iterating through the parent item list, collapsing other items when a new item is clicked, and using the 'isAnyItemExpanded' function.
What is the final step before running the app to see if it works?
-The final step before running the app is to initialize the adapter with the prepared data and set the RecyclerView with this adapter.
Outlines
📱 Introduction to Nested Expandable RecyclerView
This paragraph introduces the tutorial's main topic: creating a nested expandable RecyclerView. The speaker explains that they will combine concepts from previous videos to demonstrate how to build an app with a parent RecyclerView that, when an item is clicked, expands to reveal a child RecyclerView. The speaker shows an example app with categories like 'Android Development' that can be expanded to show subcategories. The process begins with setting up the main activity to include a RecyclerView and configuring its properties, such as using a LinearLayoutManager. The speaker also mentions the need for two model classes, two adapters, and two RecyclerViews for the child and parent views.
🔨 Setting Up the Adapters and ViewHolders
The speaker proceeds to guide through the creation of adapter classes for both the parent and child RecyclerViews. They start by defining a 'ParentItem' data class with properties like title, image, child item list, and an 'isExpandable' Boolean. A 'ParentRecyclerViewAdapter' class is then created, extending RecyclerView.Adapter, with a custom ViewHolder that includes references to UI components like TextViews and ImageViews. The speaker explains the implementation of the required methods: onCreateViewHolder, onBindViewHolder, and getItemCount. Additionally, the setup for the child RecyclerView's adapter is briefly mentioned, emphasizing the need for a similar ViewHolder and adapter class.
🖼️ Creating the Child RecyclerView Adapter
In this section, the speaker focuses on the 'ChildRecyclerViewAdapter', detailing its creation and setup. The adapter is responsible for managing the child items within an expanded parent item. The speaker writes the code for the adapter, explaining the constructor that accepts a list of child items, the ViewHolder that finds widget IDs, and the methods for inflating the child item layout, binding data to the views, and returning the item count. The speaker also integrates this adapter into the 'ParentRecyclerViewAdapter' by setting it to the child RecyclerView within the parent item's ViewHolder.
🔄 Implementing Expand and Collapse Functionality
The speaker discusses implementing the expand and collapse functionality for the nested RecyclerView. They describe adding an 'isExpandable' Boolean property to the 'ParentItem' class and using it to control the visibility of the child RecyclerView. The click listener for the parent item's constraint layout is set up to toggle the 'isExpandable' state and update the child RecyclerView's visibility accordingly. The speaker also addresses an issue where multiple items could be expanded simultaneously and introduces a function to ensure only one item is expanded at a time by collapsing others. The tutorial concludes with the speaker running the app to demonstrate the functionality and inviting viewers to find the source code in the description and subscribe to the channel for more content.
Mindmap
Keywords
💡Nested Expandable RecyclerView
💡Model Class
💡Adapter
💡LayoutManager
💡Material Card View
💡Constraint Layout
💡Expandable Functionality
💡OnClickListener
💡Data Binding
💡Fixed Size
💡Source Code
Highlights
Introduction to creating a nested expandable RecyclerView in Android.
Combining concepts of a regular and expandable RecyclerView.
Demonstration of an app with a parent RecyclerView and expandable child RecyclerViews.
Setting up the main activity with an empty layout and adding a RecyclerView.
Configuring the parent RecyclerView with a fixed size and linear layout manager.
Explanation of the need for two model classes, two adapters, and two RecyclerViews.
Walkthrough of the XML layouts for child and parent items in the RecyclerView.
Creation of data classes for child and parent items with relevant attributes.
Development of the ParentRecyclerViewAdapter class extending RecyclerView.Adapter.
Implementation of the onCreateViewHolder, onBindViewHolder, and getItemCount methods.
Inflating the layout for the parent RecyclerView items and setting up the ViewHolder.
Setting the title and image for parent items and configuring the child RecyclerView.
Creating the ChildRecyclerViewAdapter class for the child items.
Explanation of the expandable functionality and its implementation.
Adding click listeners to toggle the visibility of the child RecyclerView.
Ensuring only one item is expanded at a time by collapsing others.
Final demonstration of the app's functionality with correct item expansion and collapse.
Providing the source code in the description box for tutorial reference.
Conclusion and call to action for subscribing to the channel.
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
浏览更多相关视频
SUPER() in Python explained! 🔴
useContext Hook | Mastering React: An In-Depth Zero to Hero Video Series
AR Indoor Navigation from scratch in under 30 minutes with Unity 6
Cara Membuat Tetris sederhana untuk pemula di Mit App inventor GRATIS 2024 | programmer pemula
Components, Props and JSX in React | Sigma Web Development Course - Tutorial #106
Documenting Your JavaScript | JSDoc Crash Course
5.0 / 5 (0 votes)