Android RecyclerView Tutorial - In Depth Guide incl. Different View Types

so we want to become an Android app developer well then you need to know how to use recycler views because they are super important they're there in almost every relevant application that there is because very often there is more data then you can display in one screen so you need to swipe and in this video you are going to learn everything that you need to know about recycler views how to create your own custom layouts and how to get the data to be displayed in your recital view which is basically a scrollable view welcome to Android Friday on tutorial start you my name is Dennis Pagnotta and in this video you are going to learn something about Android but as you can see we are teaching other topics around programming as well on a weekly basis now please give a like for the YouTube algorithm as well as a sub for yourself because you're going to profit from it alright now let's get back to the video I hope you'll enjoy it alright so what are recycle views because we need to understand what a recycler view is before we can go further right so first of all it's a flexible view for displaying a large data set in a limited window so for example you're using Facebook and in facebook you have a bunch of data so all of your friends and all of the sites that you liked have updated their posts and Facebook decides based on an algorithm what it wants to show you and then each time that you scroll it needs to load the data that it wants to display to you in advance but then it will display the data in a certain format and this format is inside of a recycler view so basically this whole scroll view that you're using is the recycler view but then you have individual recycle view items that you can then display the data in and that's what we're going to build in this video so it's essentially a view group of containers called view holders which populate a particular item so there is an extensive recycler view class if you want to check it out in the documentation you can learn all the good stuff about it there's a lot to learn about recycler views so you can see here sister developer's documentation a bunch to read as you can see so if you want to spend a good night reading and following a sleep quite quickly that is the right reading material for you now why are we even using recycler views well the thing is in the past we had something called ListView or grid view so list views were used to create lists and grid views were used to great race well who would have expected that but the problem with those was that they weren't very efficient and that's why recycler views came in because they are basically a combination of list views and grid views but in an even more efficient way so if we look at this image here you can see that this recycler view app has a bunch of items for example that has an image then a text all right so this is one item within the recycler view which means basically one item within the list but now let's say we want to decide to make this a grid format well in the past we would have to use a completely different class and wouldn't be as efficient and all of that but now the beauty is it's just really one line of code that we would need to change and the whole format changes but not just that it's also way more resource efficient because it reuses old items so to speak as soon as they're not visible anymore so as soon as they are outside of the viewport of your application they will be then reused for the new data that you want to display so basically those individual items are view holders which are connected via an adapter to the actual data set so this data set can be very flexible it could be whatever kind of data you have for example data from the web data from a database in the web or in the cloud as it is for facebook for example so this data set communicates with the adapter which then communicates with the view holders a recycler view consists of multiple components and the most important one is the layout manager now the cool thing is you can tell the layout manager how it's supposed to look so for example you can use the linear layout manager that will position items to look like in a standard ListView so if you just want to scroll up and down that's the right laid out for you or the grid layout manager positions items in a grid format similar to a grid view and then there is also the staggered grid layout manager which positions terms in staggered grid format so they're on top of each other so if you want to use this kind of format you can use staggered grid layout managers now the thing is each time that we implement a recycler view we need to have those four things we need to have a list of data objects to work with then we need an XML file for the appearance of our items then we need the adapter as well as a view holder to populate the UI view from the XML item file that we just created in step two so these four steps are always required when you want to work with a recycler view and yeah let's basically get started and build that in Android studio therefore we are going to start with an empty activity and I'm going to call this one recycler view demo then you can select the language I'm going to use colon for this and the minimum SDK being android 5.0 lollipop is totally fine so just click finish for the project to load once your Gradle is loaded you can get started so the first thing that we need to do is to go to our build up Gradle and make sure that we have a certain dependency so we need to add the dependency make sure that you also sync the file once you made the changes so that you now can go ahead and use material classes now we have this main activity class by default right as well as this activity main.xml by default well what I want to add now is a recycler view now of course you could go ahead and just drag in the recycler view such as you can see here alternatively you can of course also go into the code and add the recycler view from here so let's just add it to put the designer real quick so I'm gonna get rid of this hello world and then I'm going to drag in recyclerview and as you can see it takes the whole width and height automatically now there is a little error here so let's look at it it says missing constraint in constraint layout in order to fix that you can click on those little bubbles here and that will automatically generate the constraint layouts if you want to look at it at the code you can see that it added those four lines if you checked it before you will see that this is actually the difference so it says constraint bottom to bottom and to end of parent it's basically saying that it's going to take the whole width and height of the parent which is in our case the complete screen size now what I don't like is that it automatically also generated a width and a height and I will just say okay please make sure that you match the parent in terms of width so just take the whole width as well as the whole height so also match parent which is just going to make sure that those constraints are really taken care of now this resource activity main.xml is under our resources folder and then in the layout folder you can see this is the file and the same folder I'm going to create a new layout resource file and I'm going to give it the name item underscore custom underscore row and the root element should not be a constraint layout this time but I'm going to use a linear layout because linear layouts are quite simple to code and it's a lot easier to code them rather than drag and dropping in them and then having to clean up afterwards so I'm just going to use a linear layout here and I have prepared some code now let's cookie look over it so we're using this linear layout then we have this name space called app which is rest Auto and this will allow us to use this app here which gives us a corner radius and a card elevation for our card view so if you look at it from a design point of view you can see now this whole thing this whole item that we have here is this cart and this card has a little elevation which creates a little shadow around it and it we'll be rounded even though unfortunately here in our designer we cannot see it but we will see it once we are in the app so this corner radius creates this little radius or this little rounded shape at the corners then we have a little bit of a padding a lay-up margin of 5 10 30 pixels as well as layout height that will only be as high as the content requires and the width will take the whole width of the screen and then we have this ID card view item which basically is an ID for this card view so that we can communicate with it via code later on in our main activity dot Katie or in our Kotlin code in general so you can see inside of this card view I have a linear layout with an image view and a text view so this linear layout is basically only there to make sure that this image view as well as this text view are next to each others and not on top of each other as it would be by default so we're using this linear layout to say okay please make sure that the orientation is horizontal and then we have this 50 density pixel width and height image as well as we have this textview which makes sure that we have a little bit of a text which is bold with 18 has the font size or text size a little bit of margin and that it's black text now for the tools it is called item so if you go to the designer you can see here it says item even though it will be a different text for us once we actually start implementing that all right now let's go to our main activity because we need a data set because what we have now is the recyclerview in our design we have a specific item so we have defined how an item inside of this list will look like and now we need to data to display and in order to display some data I'm just going to create this little function here which is going to be get items list it's going to return an array list of strings and basically we create a new ArrayList here of strings which is empty and then we run a for loop which will enter which will just add 15 items to our list here and those items will be called item 1 item 2 item 3 and so forth so we keep it super simple here of course this data could be from somewhere else it could be data from the web it could be data from an XML file from a JSON file from wherever you have the data you can use it pretty much in the same way and that is the beauty of it because we don't need to rewrite the whole code if we just have a different data set we just need to make sure that the data set is plugged in at the right spot and that's it ok now we need an adapter because you may be recall that we had view holders adapters and the data set so we have the data set already we have the adapter and we also have the view holder to a certain degree already and as you see will be the data objects list as we have just created we need an XML file for the item which we already created and now we need to create the adapter and by the way if you like this video then you will definitely love my complete Android and Kotlin master class you can find the link in the description and you'll get a huge discount and in this course you're going to learn everything that you need to know about Android dev development it's a 45 hour long course and I can tell you there's a lot of love in it and a lot of good content and at the end there is a huge project really from start to finish because that's what everyone was asking for so I decided to create this project and it's like a 15 hour mammoth but in this one you're going to learn really everything from start to finish of creating an application such as Trello so using firebase using recycle use as you will learn in this video and of course a lot more api's Google Maps cameras well everything that you can think of when it comes to Android app development so if you want to become a real app developer definitely check out that course so let's go ahead and create it there for you can create a new folder if you really want to make it clean so this one will be called adapters all right and inside of adapters you would then go ahead and create a new cotton file which will be a cotton class and you call that class item adapter so I'm going to overwrite this whole thing of course because well I don't want to waste your time and yeah type all of that in manually so I'm just going to paste it in and explain every single step along the way all right so what we need to do is we need to make sure that we import our so here you can see it creates issues otherwise so once we import it he you the tutorials that recycle you demo that are this error will disappear then when it comes to an item adapter class it's always the same structure because it inherits from recycler you dot adapter which is an item adapter dot view holder so the first thing that you need to do for an adapter is to make sure that it inherits from recycler view dot adapter item adapter dot view holder okay so here this colon indicates that it is inheriting then you pass in the context as well as the items that you want to pass and in our case the items will be an ArrayList of strings because if we look at it this is an ArrayList of strings and we're going to pass in our list of strings here then we need some predefined methods so the on create view holder this method is called as soon as the view holder is created so as soon as it is visible in our application and this is a default method as you can see we are overriding it and basically we are saying please use our item custom roll layout which is this item custom roll layout which we just created so this kart view item that we created just a couple of minutes ago the rest is pretty much the same every single time in most cases so we're just saying okay inflate from context and inflate our layout with for now the view group parent that is passed to us by default okay now we need to bind the view holder so we have this on bind view holder method which gets passed is view holder as well as the position of the item that we're looking at so basically if we have a list of 10 items then the position will start at 0 that will be the first item in the list so at the very top then the second item in the list will be at position 1 and so forth and what we say is we want to create this variable called items which will get the items position and if you were wondering where these items comes from well it comes from all the way up here so this is the items list that is passed to this item adapter that we have here all right so then we just say ok inside of this holder we want to use TV item dot txt and we want to set it to whatever the item that we are currently looking at for the position that we're looking at is so if we look at this one here so for the first entry it would be item 1 ok so we say item 1 will be our first entry and it will be the text for TV items so what is TV item well TV item is something that we have in our class view holder that is at the bottom of our item adapter okay so we have this class view holder which inherits from recyclerview view holder and we just say okay we have this value called TV item this variable which we get from view dot TV item name so TV item name where does that come from well that is something that we created here it's this textview which we call exactly like that so we call it TV item name inside of our item custom role XML file so that's something that we did and then we said ok for the card view item we want to use the U dot card view item okay so if we go back here you can see it's this ID it's card view item so basically at this point so in this class view holder you could now go ahead and add all of the elements for example we if we have this image view which we don't have an idea for yet because we're always using the same image but let's say you would get the images from the database and you would also give this image view and ID and you would then also define it inside of this class view holder so however many UI elements you want to have inside of your view holder that's what you would define in here as well as in here okay so they're connected to each other alright let's scroll up a little bit again so this is this holder TV item text as I said so we said this item that we have there and please assign the text to it and then we have a little check here we just say okay if the position is even then please go ahead and set the background color of the card view item to be color light gray now of course we need to define this color in our colors resource file so if you go to values here you will find this colors dot XML file and here I'm going to define those two colors so color white as well as color light gray and these are the hexadecimal values for those colors all right so arts the hex code so to speak alright so now the error disappears and we have color light gray as well as color white and now we can use those so every even position will be light gray and every odd position will be white and that's everything that we're saying here and then we have one last method that we need to override and you can see it's this fun get item count which will return an integer which basically returns the size of items that we have inside of our items ArrayList so if we look at it the items are radius that is passed to us well with this method we get the amount of entries that we have in this list so if we look at it here and our main activity you can see that it will contain 15 entries because we use this for loop to go from 1 to 15 to create 15 items now there's just one thing left to do and that is to connect the recyclerview to the adapter and in order to do that we need to create our recyclerview and we need to say which layout manager we want to use for it in order to do that we need to add these lines of code here so first of all we need to make sure that we set the layout manager of our recyclerview items so what is this recycler view items well it's our if we look at our activity main here it's this recycler view so I need to give it an ID here so Android ID and I'm going to set that to recycle view items so let me save that file and go back to our main activity and you can see this error disappears so basically I'm saying that the layout manager that I would like to use for my recycler view that we created in our activity main which is basically this list here or this list holding container for that one I want to use the linear layout manager and this is just one type of layout manager as I said there is also the grid layout manager as well as the stack graph layout manager so we have multiple options here all right and then I'm just saying okay well the item adapter which is our item adapter class so we need to import it here which is this item adapter class which we just created that item adapter should be using this context of our main activity because the main activity has a context as well as it should use this get items list in order to have some data to it so this get items list is basically this function we used here which gives us back this list of 15 items in it because we go from 1 to 15 so this is where you pass the data in and that's a cool thing so if you get data from somewhere else you would just have to replace this part here and that's pretty much it of course the data has to be in the right format so if the data is in a different format you would need to then adjust your item adapter accordingly and then finally you just set the adapter off your recycler view items result of view which is this recycler view here so basically this one here you make sure that it's the item adapter that you just created and once you run it you can see that this is the list view or in our case recycle view that we created so you can scroll around and these are the 15 items that we have here what you can see is that they have different background colors so gray for odd numbers and white for even numbers so what if you want to scroll towards the side or horizontally instead of vertically well beautifully enough it is achieved quite easily so here in the linear layout manager you not only need to pass in the context but also the style that you want to use so linear layout manager horizontal and then you need to pass in some flags and I'm just gonna or this reverse layout and just gonna set that to false alright so actually at this point we don't need a project so we can see the code altogether so let me rerun that so what you can see here is that we can now basically go ahead and say alright let's create an item that will take the whole screen size and we're not scrolling vertically but we're scrolling horizontally all right so now let's say you want to have a grid view instead now it's also achieved quite easily so instead of using a linear layout manager we can just go ahead and use a grid layout manager so here you will just say grid layout manager and of course you need to be careful with what you're passing so you're passing the context as well as the span count so how many columns do you want to have in your grid layout manager so let me rerun that and then we can see that now we have this grid layout here so it was achieved quite easily as you can see now of course if you have a lot more items then you could still scroll so let me add up a little bit more items here or some more items now it's going to be 30 so that we are now you can still scroll but you have to call now if you want to have three columns well you could do that as well even though it would look a little tricky because we don't have much space well it still works now let's say you want to have different types here so you don't only want to have these kind of items that we have here where the image is always on the left hand side and the Texas always on the right hand side but you would like to have a different appearance for your list items well then you are talking about different view types and we're going to implement different view types now so first thing we need to do is go back from grid layout manager because I want to make sure that I'm using a linear layout manager here and I'm going to keep it simple for this one so the context will just be this alright so I went back to the code that we had before where this was just a linear layout with this context then I'm going to go ahead and create another layout so here new layout resource file and I'm gonna call this one item on the score another underscore custom row and it should be a linear layout here as well so I'm gonna use linear layout instead okay and this will be the code that I'm going to use so I have another card view this time I'm changing the linear layout orientation so now it's vertical instead of horizontal as it was before so if you look at this design you can see this is how an item will look like now so we have an image and underneath we have the text so it's not next to it but it's underneath it okay so that's we're going to achieve by using the orientation in this case it's the orientation vertical now in order for this to work in a clean manner we are going to require data models and of course I could go ahead and create a new package here but for this time I'm going to keep it simple so I'm just going to create a new Kotlin file which I'm going to call data model which will be a class and this one will be super simple so it's a very basic data class that we're using here which I'm gonna call data model and it's going to require an item name as well as the view type which is an integer okay so we are going to use two view types view type 1 and view type 2 and this data model is going to take care of the handling of the data and by the way if you like this video then you will definitely love my complete Android and Kotlin master class you can find the link in the description and you'll get a huge discount and in this course you're going to learn everything that you need to know about Android dev development it's a 45 hour long course and I can tell you there's a lot of love in it and a lot of good content and at the end there is a huge project really from start to finish because that's what everyone was asking for so I decided to create this project and it's like a 15 hour mammoth but in this one you're going to learn really everything from start to finish of creating an application such as Trello so using firebase using recycle use as you will learn in this video and of course a lot more api's Google Maps cameras well everything that you can think of when it comes to Android app development so if you want to become a real app developer definitely check out that course so if you want to use a data model instead of just using a string ArrayList as we have done before you need to be very careful because now you need to go to your item adapter which we created before it's inside of our adapters folder here this item adapter and now it's not going to take a string but it should take a data model so this data class that we just created now once you do that you can see you get an error here because it's now complaining that item is not gonna work because item is not a string anymore but it's a data model so it's a data class as we can see here so it doesn't accept it as it was before so we need to make a change here we need to make sure that our item is going to be based on the holder so now we need to make sure that this is not just a you holder that we're passing here but we are actually passing recyclerview that viewholder because what we're also going to do in our item adapter now we don't use item adapter dot view holder but we are using recycler view dot view holder instead and why is that well because we now can have to view holders ok so let's go all the way down here so you might recall that we created this class view holder here at the bottom well now we need to have another class which will take care of the view holder which look differently because this was perfectly fine for our item custom role but now we have this item another custom role which is different so it's using different ID names and that's why just going ahead and using this ID that we used before in our item adapter which was the UTV item name is not going to cut it anymore so now we need to make sure that we are actually creating another class here which will take care of this item another custom role so I'm going to call this one another view holder and it's also going to inherit from recycler view holder it's also going to require a view but now it's not going to use TV item but it's going to use TV another item and I'm going to call this in another height name and it will be TV another item name so what do we have that from well from item another custom row so here this textview it had this ID name that's exactly the ID name that we use here TV another item name in order to use it however you can see we need to import it so let's import that and it will add a little row here at the top that allows us to use it now the card view item itself also needs to be changed so I'm going to call this one card view another item and it will take the card view underscore another item and now we need to make sure that we are binding the right data to the right view holder ok so how do we do that well the thing is we want to make it dependent on our data model so we need to make sure that the holder that this passed to us is of type viewholder if that's the case then we can go ahead and do all of the magic that we did before so let me paste that in there now of course the item will not be the item anymore because back in the day items so the individual item that we're looking at was just the item in our main activity list so from this get items this this was just a very basic list item but now it's not anymore it's actually from the data model so if I want to get the item name I need to get the item name from the data model itself so here in our item adapter instead of setting the text based on the item itself we do that by saying item dot item name so you can see we can get the view type as well as the item name from our item because we are using the data model which has item name and view type here now that works for view holder what is view holder well let's scroll down it's this class here so it's our recyclerview view holder which was the TV item name and the view card view item but how about another view holder so what if we want to use another view holder well then we need to do the same if statement for our else if holder is of type another view holder so now if it's another view holder well then we need to run pretty much the same code but with some variations so now it's going to be not TV item but TV another item name top text as well as it's not card view item but it's card view another item and the same goes here for this card view item at the bottom now at this point you might think we're done but the thing is we need to know of which item view type we are because we want to make changes based on our view type in our data model so we need to create another function in here which is going to take care of just that so override fun get item view type and that will run the get item view type super function but that's not really what we want we wanted to return something for us we wanted to return items at a position and we want to get the view type so that's what this get item view type will return for us which is basically this view type of the data that we're currently looking at now this was quite complicated and you might wonder at that point how is all of that connected to each other well no worries we're gonna get there in a bit it's not too far off so here in our main activity list you can see when we pass get item list to our item adapter it's not happy because get item list is actually returning an ArrayList but our item adapter if we look at it is now expecting a data model so it's not expecting a string as it did before but it's expecting a data model so just using get items list with a radius string is not going to cut it so we need to change that method let me overwrite it real quick you can see that we need to use get items list with data model now of course it doesn't know data model yet because we need to import it so let's import that as well as we need to create this item vector dot view type 1 as well as you type 2 so basically I created this list of 12 items of different view types and those view types they are not generated automatically but we are basically passing manually what kind of view type we want to do so do you want to use item custom row or do you want to use item another custom role so what I'm going to do is I'm going to go to my item adapter and I'm going to add a little companion object here which is a very basic way to have different kind of view types for us so view type 1 we'll take the value 1 and constable view type 2 is going to take the value of 2 so we basically declare the constant values inside of this companion object that we have here now at this point if we go back to our main activity you can see this error disappears so we're just saying item adapter view type 1 or view type 2 are the ones that we're passing so basically this is a clean way of using values of course you could have just said 1 or 2 here so you could have just passed it directly here but what if we decide to change those values later on what we don't have want to have magic text here or magic numbers inside of our get item lists code we want to have a clean way of having the data in a right manner and that's what we did here by using this companion object and having those constant values so now if we decide to add more view types in the future we can do so very easily so now there's just one last thing to do because how do we know which view type we should display well that should be created in the oncreate view holder or defined in the oncreate view holder so let's go ahead and say if the view type is of type 1 then we want to do it as we did before so we just want to return an item custom row but else or else--if if you want to be really sure you would go ahead and say view type is the view type 2 so if that's the case then we want to return the layout called item another custom row now at this point our IDE is complaining because our else--if here well yeah generates a situation where we are not having a return statement for all the entries and in this case I'm just going to use else instead to make sure that this error disappears but if you wanted to have multiple different entries you could go ahead and create another else/if and then have a third type of layout if you have a third type of layout then you would also have to go down here to create another type of view holder so the third view holder for example then you would have to adjust accordingly your companion object if you had a third type of view holder and of course you would need to create another XML file for the third type of you holders and in the end you would then have to go ahead and adjust your data here so that it also contains a third type of you holders so this is actually something that I would recommend you try to do so you try to create the third view type by yourself and then you adjust the code so that it shows you three different types of view types and well by doing so you will make sure that you really understood what you learned here because just seeing this code and typing it out and trying it for yourself are two different things so that's really something that I recommend you do and at this point there is only one thing that we need to change and of course it's the type of view holder that we are returning here so now we're not returning the view holder the generic one but we are actually returning our another view holder view holder so to speak okay so here returned another view holder for this to work now of course the oncreate view holder here cannot be just a basic view holder and has to be a recycler view that view holder for this to work because now we are saying okay we want to use the parent recycler view type of view holder for it to work for the view holder as well as for an another view holder because if you look at it both of them both of those view holders they are inheriting from recycler view view holder and that's why we need to make sure that we are using the parent one so that we can use the children for the both cases so this is a child of recycler view view holder as well as another view holder is also a child from recycle view view holder so basically those two are siblings and we to make sure that we expect a parent in order to accept both types so both sibling types in this case so the view holder as well as their another view holder because well that's what we need to pass here right and if we're not passing the right type then it won't work and now we can go ahead and test that again item one you type one item to view tab to item three you type one item four you type two and so forth so now you can see how you can basically generate an application that uses different view types and they are very flexible so for example in facebook some of them are just texts some of them are videos some of them are images some of them are images with text and so forth so they have different types of view types for example some of them are ads and those ads they have a different design and so forth and now you could go ahead and adjust your item custom row as well as your item another custom row and drag-and-drop some stuff in here but you would have to make sure that all of those elements that you drag in here have an ID as well as that they are added in your item adapter here at the very bottom so that they are assigned correctly in display correctly for every single view holder because we have different views so every single item so to speak is a view right so now you have seen how everything comes together so basically in the main activity we went ahead and we created the combination or the connection between a recycler view with its layout style and in this case the linear layout manager then the item adapter that we created and we assigned that item chapter to the recycler view which is our linear layout manager recycler view so basically it's the one in the activity main so this one here then we created individual items or those rows that we will have so in our case which related two of them then we made sure that we have a data model which allows to create different view types because we have different types we gave it a name as well as type then we have this item adapter which inherits from recycling you adapter recycle view view holder we pass it a list which is our data model and that's a cool thing now you could go ahead and use a very different data model and based on whatever data model you're using you could pass in the data and where does it come from well in our case it comes from this get items list and you could just modify this method in order to you take the data from the web from an XML file or whatever you are using there and you of course need to make sure that your item adapter has the correct settings for your own create view holder or your unbind view holder as well as your inner classes for the different view holder types that you have so I'd say at this point you know pretty much everything that you need to know to create your very own recycler views and lists and all the good stuff alright if you made it this far then you know how to create recycle views at this point and then you know how to connect the different parts and basically create your very own types of list items and so forth so this is really an important integral part of being an Android developer and writing great apps or developing great apps and I hope you enjoyed this video it is a long one but I wanted to make sure that we are covering everything that you need to know regarding view holders and recycler views and basically creating these different kinds of lists views so to speak alright so I hope to see you in one of those videos and if you made it this far then I hope I deserve a like because well otherwise you wouldn't have States for so long I guess and also don't forget to subscribe ok so I hope to see you in the other videos have a nice day

Channel: tutorialsEU

Views: 12,793

Rating: 4.9315405 out of 5

Keywords: Tutorials, Tutorial, Programming, Course, Learn, recyclerview android, recyclerview android studio, android recyclerview tutorial, android recyclerview kotlin, android listview tutorial

Id: oDfl-xLXiac

Length: 43min 56sec (2636 seconds)

Published: Fri Jul 17 2020