Expandable Nested RecyclerView || Android studio Tutorial 2023

Summary

This 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

00:00

📱 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.

05:00

🔨 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.

10:00

🖼️ 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.

15:02

🔄 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.

Keywords

💡Nested Expandable RecyclerView

A Nested Expandable RecyclerView is a user interface component that allows for a hierarchical list where each parent item can contain multiple child items, and these child items can also be expanded or collapsed. In the video, this concept is central to the tutorial, as the presenter demonstrates how to create a parent RecyclerView that, when an item is clicked, reveals a child RecyclerView with additional items.

💡Model Class

In the context of Android development, a Model Class is a blueprint for creating objects that represent data structures. The video mentions creating two model classes, one for the child items and another for the parent items, which include properties like title, image, and a list of child items, essential for defining the structure of the data displayed in the RecyclerView.

💡Adapter

An Adapter in Android is a critical component that connects a RecyclerView with the data it displays. The video script discusses creating two adapters: one for the parent RecyclerView and another for the child RecyclerView. These adapters are responsible for binding data to the views and handling the expandable functionality.

💡LayoutManager

LayoutManager in Android RecyclerView is used to specify how items should be laid out on the screen. The video mentions setting a LinearLayoutManager for the parent RecyclerView and a GridLayoutManager for the child RecyclerView, indicating different orientations and arrangements for the parent and child items.

💡Material Card View

Material Card View is a UI component that provides a rectangular container with material design elevation and shadow effects. The script describes using Material Card View to create a visually appealing layout for both parent and child items within the RecyclerView.

💡Constraint Layout

Constraint Layout is a flexible layout manager in Android that allows complex designs without nested layouts. The video script refers to using Constraint Layout to organize the child items and to create the parent item layout, which includes another RecyclerView for the child items.

💡Expandable Functionality

Expandable functionality refers to the ability of an item in a list to reveal additional content when interacted with, typically by clicking or tapping. The video's main focus is on implementing this feature, allowing parent items in the RecyclerView to expand and show a child RecyclerView.

💡OnClickListener

An OnClickListener in Android is used to set up a click listener for views. In the script, the presenter sets an OnClickListener for the Constraint Layout of the parent items to toggle the expandable state of the child RecyclerView when the parent item is clicked.

💡Data Binding

Data Binding is the process of connecting data sources directly with UI components in memory. The video involves data binding by setting properties like title and image for the parent and child items within the RecyclerView, demonstrating how to dynamically populate the views with data.

💡Fixed Size

In the context of RecyclerView, a fixed size indicates that the number of items in the list is not expected to change. The script mentions setting the parent RecyclerView to have a fixed size, which optimizes layout performance by avoiding unnecessary recalculations.

💡Source Code

Source Code refers to the human-readable form of a program. The video script mentions providing the source code in the description box, which implies that viewers can access and use the code to understand or replicate the tutorial's implementation of the Nested Expandable RecyclerView.

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