Expandable RecyclerView using ConcatAdapter

um hello there today we're going to learn something uh it's the new uh concate adapter it's very useful for building apps for building recycler views that can have expandable items for example like in this application so you can expand these items and you can also collapse them so i'm going to show you how this could be done first of all i would like to tell you that this concave adapter was made available in the 1.20 alpha release of the recyclerview but we're going to use the newest version the beta 0.1 it was released in december of 2020 this is the concate adapter here on google developer you have some documentation about this class so how are we going to make this thing happen concate adapter is nothing but it takes one adapter and links another adapter to it and links another adapter to it and another one and another one so pretty much this is one adapter this is the second adapter this is the third adapter you can expand this adapter this is still only one adapter this is the second linked adapter the third linked adapter so the first thing we're gonna do um is create a new project so i'm going to call it expandable youtube i'm going to save it in my expandable u2 click finish and wait for this thing to create so first thing we need to do to create this okay i'm going to do it all in one package i'm not going to do some fancy package creating so first thing we're going to do is create a grouped item this grouped item will have two uh parameters in the constructor one of them is going to be called a header of type header an item and the second is going to be called item list of type list of item the first class we're going to create here in esto class is going to be called header and this header class will have some parameters in the constructor and the second one is item and it's going to take some input here so mainly i want to keep this uh very very uh easy i'm going to make them uh take only one parameter and it's going to be header text of type string going to be item text of type string okay maybe the first thing that i should have done is added recyclerview so let's first delete this you're going to have to [Music] take you're going to have to first go into gradle and import the recyclerview so if we look at this page we need the recyclerview 1.2 uh beta so first thing is first we have to import that so we're going to do it here so android x recycle view column recycle view 1.2.0 beta after that is completed we're going to go here in the activity main layout and impor actually put it here i'm going to constrain it to each side and i'm going to give it an id just give it a name and a recycler view maybe i should immediately start on doing these little layouts as you can see we can go first to this layout file and i'm going to create a folder called a xml layout called expand expandable header so as you can see this expandable header is just a text is just one text view a little bit bigger text view textview so what we're going to do is go here into the design and add a textview then we're going to constrain it to each side even the bottom i'm going to give it 16 dp margin all around give it match constraint and then i'm going to give this height a wrap content so it's just this little piece uh the second thing i'm going to do is put here tools uh just so i can uh so what this tools do uh this will be only represented here on our design when we run the app this is going to be blank next thing i'm going to do is give it a appearance of large just so it stands out because it's a header and a very important thing i'm going to change its name header header header header text and that's about it for it the next thing we're going to create is a expandable item as we can see the item is also just textview just a little bit smaller so what i'm going to do is add a textview give it a constraint all around 16. match its constraints so with again tools i item item and appearance i'm going to give it small so style text appearance app compact small and then again wrap content so it's just this little piece now we have these two layouts when we uh if we now return to the grouped item we can now see uh why have where we have added here header text and item text it's just these uh two texts here and here but these layouts can be more complex and these classes could be more complex now the most important part is the adapter expandable adapter so our expandable adapter will have one parameter in the constructor it's going to be a grouped item and it's going to inherit recycler view import a dab tour and we're going to import and give it here x adapter view holder and i'm going to create here a sealed class view holder that is going to take parameter of type view import view and it's going to inherit from view holder item view and we're going to call here the constructor and i have to import i have to implement some of these methods so to put it into perspective again what i told this at this here so this here is one adapter this here is one adapter this here is one adapter uh together we have one two three four five adapters so we got five adapters um that's why we have a header and a item actually a list of items header and a list of items so there are some methods that we have to implement but first of all let's just write them okay oncreateviewholder very important onbindviewholder again important get item count very important view psi get item view type and one more thing to add as we can see we got two view holders one of them is a header view holder the other one is a item view holder so we're gonna have to specify here item view view uh you you oh actually i forgot your class view holder and make sure you take this view holder so from the expandable adapter and feed it with the item view so this view holder is going to have one private valve header text view item view we're going to find it now our id error text here okay the second one is going to be item view holder item view and so it expands this okay i think i didn't name it item textview and paste it here so we have these two view holders so the header is this big one header and the item is the smaller one so the first thing we're going to do is uh our well our header view holder is going to have two states a state where it is expanded state where it is collapsed but it's collapsed let's just yeah let's maybe just hold on with these view types how we're going to know uh which view type to take so pretty much uh first let's say a companion object uh constval so we know uh which one to return constable um view type header is equal to a zero constval view type is equal to a item is equal to a1 so what i'm going to do is pretty much let's just um focus on looking at this one if the position is zero that's going to be a view type header if the position is anything but zero it's going to be a view type of type item so we're gonna look at this uh if it's just one adapter so just look at this one adapter and that's what we're gonna write if position if position is equal to a 0 we're going to return a view type header and else we're going to return a view type and actually let's lift this out of here let me just format this a little bit so that's how we're going to get our view types but let's say let's stick with the get item code how we're going to calculate this so if you look at this adapter it's going to have either one of two uh one of two values either is going to be it has only one position it's the header or it's going to have one the item size one two three four in this case plus the header let's go so it's going to be um so it's going to be we're gonna say is expanded we don't have this variable by the way yet so if it is expanded then we're going to return grouped item item list size and plus that one plus that one uh header and in this case we're just going to return the one let's lift this out the one and that's the header so if it did not expand it it just has the header and that's only one position we're going to have something else we're going to have a variable called val wall is expanded and it is going to be of type boolean and initially we're going to set it to false so initially we don't want it to be expanded we don't want it to be expanded now we're going to create the viewholders and the viewholder is going to depend on the view type so we're going to say when actually we could even say return when so we're going to say return when when we have when we have view actually we're going to say you type here then when the view type is a type header we're going to do this else we're gonna do this and pretty much else is everything else uh one more thing i would like to create a layout inflator right sorry layout inflator layout inflator we create by saying from and then parent and get the parents context we're going to do here is we have to say return we're going to have to create a view holder of type header view holder what does it take it takes a item view of type view we're going to inflate this view by saying layout inflator inflate r.layout we're going to need a header expandable header and the next parameter is going to be apparent and false don't attach the root okay i'm going to leave it like this and that's what we're going to return and in else so the else could only be the item view holder uh we're gonna return this one again we're gonna return the view holder the item view holder and yeah because we have written this we don't need this and i'm just going to format this by pressing ctrl alt l okay now we're going to call the on byte the onbind is going to be really easy when when is when actually when what the holder is of type view holder type header do this and when is of type uh item view holder do this so what are we going to do in this case and what are we going to do in this case so what i'm going to do is create both of these classes a function called onbind in this one on bind so to bind this value you're gonna need a header of type grouped item header and you're going to need an item here of type grouped item item the next thing we're going to do is just in this onbindviewholder we're going to call it and what are we going to call we're going to call grouped item dot header and that's all we need in here we're going to call on bind so there's an error we're going to call the next thing we got the item list but it's not like usually we're going to say position the problem is our item list has a 0 1 2 3. our item list is of size three it has index zero one two and three but the positions that the adapter has is zero one two three four so if we call this it's first going to be incorrect the second we're going to get an index out of bound exception it's because we because we have four positions at some point it's going to get four fourth position and item list of four positions zero one two three and there's no fourth uh uh and then you're going to get an exception what we have to do is minus minus that header so uh zero is never going to get here because uh if you got zero uh zero is going to be of type uh header view holder and it's always going to go here one is going to go here and it's going to be one minus 1 and it's going to access the first item and that's about it for the onbindviewholder now what's only left is to call to render stuff here and that's really easy we're going to say header textviewholder dot text is equal to header item text view text is equal to item dot uh actually here i'm going to say item header header header editor did i leave it as a oops one little letter there i made it's just like it's not a member now it's a member of the class okay there's one little thing we have to do here on this adapter and and it's this one item view on click set on click listener so that click listener is actually this thing it's actually the thing that flips this is expanded from false to true and from true to false but this here variable isn't accessible in this class if you're writing java and using a static class it's going to be accessible but here in kotlin it is so what i'm going to write is here a private function on header clicked actually not this and i'm going to use here autocomplete and i'm going to say view on click listener and then i'm going to just implement the method here i'm just going to say here view and what are we going to do on the on click so is expanded is going to change its value we're just pretty much toggling it so whatever the value is just say not and it's gonna you have to put here var so it's immutable the next thing we're going to do is we have to notify that the that the layout has changed so we're going to say if it's expanded we're going to notify item range inserted so we inserted something from the position 1 to the position group item item list dot size and we have to notify uh item changed at position zero else else if it's false it's not expanded and then we have uh item range removed position one grouped item items and then size so from the position one to this position everything has been removed and again notify item changed at position 0. so here because there's just this way we can uh get it down here we can use it as a parameter we're going to say on click listen listener type view on click listener and here unbind is going to tell me an error so i'm going to say on header click listener i'm going to call it this is just going to create a listener and what we're going to do here is just call on click in this song click we'll just execute this the reason why i haven't done this here if you're asking yourself why have i done this is this is expanded you cannot uh [Music] it isn't visible here it is visible here the section the second option you could have done is just put here is expanded and then implemented here but i chose this way now the next thing i'm going to do [Music] for for a reason because this is just a small tutorial i'm going to copy some code i'm just going to copy some code just to create some data just to create some data create a group item list just this is just some kind of a data so we can just see what we have created so what is it going to do uh we're going to give it a header number how many headers we want and it's going to create a list of grouped items uh so it's going to go from one from zero to header number so if you say i want four headers we're going to have four headers and that's the job here uh what's the job here uh this job here is of creating uh items so creating these here what is it going to do we have an array here it's going to create a random number from two to five uh and we're just going to add these items here rather than really easy we're just going to say header of zero header one header three item zero item one uh item three um and when we have created this array and this header we're going to create one grouped item and put it into the list and then we're going to create another header another list of items put it here another header another list of items put it here and when we're finally finished we have to go here into uh main activity what we're going to do is say here grouped item list is equal to repository create grouped item and we're going to say okay one five headers that's the first thing we're going to do the second thing we're going to do [Music] actually i'm going to put it here we need an array list array list of what's of expandable arrays expandable adapters so we have an arraylist of expandable adapters we have to put these adapters inside so what are we going to do this here is just an array of adapters in a concat adapter they have been linked together this is one of them this is the second so how are we going to do it is we're going to say four four four four um i'm um group group item in grouped item list we're going to say ball at a tab terra is equal to expandable adapter and created we're going to create it by giving it this group adapter this group adapter will have a header that's called header zero and we'll have most likely item one two three four and maybe five um and what we're going to do is add that adapter to this list and it's going to create maybe five uh five of these adapters the next thing we have to do is create a configuration concrete adapter for configuration imported config builder set isolated view types false and build then we're going to create a concat adapter say concat adapter adapter config adapter actually adapter list adapter list and then i'm going to say one thing we didn't take is recycler view is equal to find view by id recycler view id recycler view and we're gonna say we need a linear uh a layout manager linear okay this layout manager thing you need it for uh every recycler view so this is typical stuff uh the stuff and this isn't typical we're going to usually we would initialize this with a normal adapter but now we're going to initialize it with a concave adapter and then we're going to run this i think i've done all of it okay let's see what it will run okay uh that's finished and it has created this uh expandable uh like expandable recycler view it seems really good i've tested some stuff seems pretty stable i'm going to put here like 20 just to see how stable it is how smooth it is when it uh actually not this one this one is just okay here's the 20 of them just see how good this is now what i have noticed is that this uh expandable like recycle view uh doesn't work work well with recycle view dividers so these when you have lines behind beneath uh every item but it's still in beta i mean it looks looks pretty smooth to me so this is a tutorial uh of how you can use the concat adapter to create a expandable recycler view i hope you enjoyed this video if you did and it if it did help you can you please leave a like maybe even subscribe thank you for watching and see you next time

Channel: MrBojler

Views: 2,154

Rating: 5 out of 5

Keywords: ConcatAdapter, RecyclerView, Expandable RecyclearView, Expandable Adapter, Android, Android Development

Id: GIow64uY7ow

Length: 33min 14sec (1994 seconds)

Published: Mon Dec 21 2020