RecyclerView | Everything You Need to Know

so you're trying to add a recycler view into your app well i think you've come to the right place what i'm going to do in this video is show you everything you need to know about the recycler view things like how to add in your rows how to customize each of the rows so they match the theme of your app along with what each of the methods are doing in the adapter class and just a smidge bit of what the recycler view is doing in the background i think this video is going to help a ton of you out so let's get started all right so in this video we're going to be making a recycler view that looks very similar to this now before you even start working on your recycler view the very first thing you should probably do is figure out how you're going to grab your data whether that be from a database you're uploading files to your project or just creating string arrays in the string.xml file if you want to follow along with this video what we're going to be using are a few vector assets and three strings for each of our rows so to add in the vector assets all you have to do is come over to the far left expand the resources folder come down to drawable and then within here what we need to do is add in those vector assets now i already have all the vector assets that we're going to be using for this video but to add in some vector assets all you have to do is right click on drawable come down to new and then click on vector assets this window should open up come over to clipart and then you should see this little clipart section right here click on this little image and you should be able to add in a bunch of different vectors now i have 20 for the 20 essential amino acids you can add in as many of them as you want but i would say you're going to need at least 10 of them so come through pick 10 of these and you should be good to go there then the next thing that we're going to do is come over to values and then double click on strings.xml file and again i already have all the strings added in so create a few string arrays for each of your rows so i have three the name of the molecule the three letter abbreviation along with the one letter abbreviation once you have all of your data set up the next thing we're going to do is come over and actually add in the recyclerview to one of our activities so in my case it's going to be the activitymain.xml file you can add it to whatever activity you want to i have this little hello world text here i'm going to delete it so the recycler view is in the common tab for our palette so i'm going to go over to the left here common recycler view and i'm just going to drag it on to our layout in terms of constraints i'm just going to constrain it to each of the sides of the parent view so once you have your constraints for your recyclerview we're going to give it an id so come over to the attributes panel towards the far right and then at this topmost bar right here it says id we're going to give it an id i'm going to call it m recyclerview for my recyclerview hit enter and then we should be good to go for our recyclerview okay so now that we have our recyclerview of set up what we're going to do now is make a base layout for our rows so to do this let's come back over to the far left and then in our resources folder we're going to come down to layout and then we're going to right click on it come down to new layout resource file and then i'm just going to call this recyclerview row and then hit enter and we should be presented with a new xml file so within here i'm going to add in a few things that you should probably add in each time you're creating a new recycler view and then after that you're free to go off on your own and make your own layout so the first thing i always like doing is adding in a card view so if we come back over to the palette in the container section you're looking for this guy right here card view so take it drag it into the layout and then the next thing i'm going to do is add constraints to the sides of the parent once you have the constraints for the card view it should be centered towards the middle of the layout and then we're going to add another constraint layout within the card view so drag that in here and we should have a constraint layout there and then within this new constraint layout what we're going to want to do is add in views to hold all the data we want displayed in each of our rows if you take a look at the example here we're going to want four views in image view and three text views here so the first view i'm going to add in is the image view so let's come over to common image view i'm going to come down to the component tree because i think it's a little bit easier to drag all these views into the second constraint layout and for this one i'm just going to give it a default of arginine so we should have this and then i'm going to throw in three more text views so by the end of this you should have a component tree that looks very similar to this i would say you can veer off and make your own layout once you add in this card view and constraint layout so i'm going to go ahead rearrange these views and then i'll explain what i did once i get back okay so i finally have the layout for our recyclerview row all set up so what i did was i took the image view moved it over to the left gave a constraint to the top bottom and left of our constraint layout and then i took the text view put it above constraints to the image view and the top part of our constraint layout and then i took these two text views and then put them below the name so i'm going to do now is go ahead and change the style for each of these views and then i'll come back all right so i have the overall style for our row completed so here's what i did i have the card view here and then these are all the extra attributes that i gave so i set a few margins here i gave it a background color of blue black now where did i get that from i added in these two additional colors within the colors.xml file add those in if you want to use the same colors as me but back to the row i also gave it a corner radius of 20 dp and an elevation of 8 db and then for our image view what i did was added in a tint to the molecule so i gave it a tint of 10 accent and then for our textview i made the text bold change the size and the color and the same thing for these textviews as well so our recyclerview row the base theme is done now i'm going to specifically leave out one last thing we have to do for our row so you can see what happens when we fail to do this step now i'm being very vague with this but you'll see what i mean later in the video for now what we're going to do is create a model class for our data so this is just a class that's going to contain all the data it's going to make our code much less cluttered and more readable which is always a plus so let's come over to the far left and you're going to come down to this folder right here now it's probably named something different but it's the folder that's holding your main activity class so we're going to right click on it come down to new and we're going to create a new java class i'm going to call mine amino acid model but you could call it something different so if you're doing like the planets i would call it planet model and then once you have a name for it hit enter and then we're going to hit enter again and you should be presented with something that looks very similar to this so then within our model class what we want to do is create variables that's going to hold all the data that represents one of our items so in my case the amino acid i'm going to have strings for the abbreviations the name and i'm going to have an integer that's going to hold the vector image so if you're doing the planets again maybe you have a string for the name and you have an integer for the distance away from the sun maybe the diameter of the planet whatever it is you're going to create variables to store all that data so i'm going to go ahead and do that really quick so i have all the variables created that's going to hold the data for my amino acid the next thing we should do is create our constructor now a cool thing about android studio is that it could create the constructor for us so let's double click this right click on it come down to generate and then we're just going to click on constructor make sure you select all the variables that you created and then we're just going to click ok and then i'm going to enter this over so it's not going off the screen and then we should have our constructor created for all of our variables the next thing we're going to do is create getters for each of our strings we don't need setters but we do need the getters here so it's the same process as creating the constructor and we should be good to go for our model class so now that we have our model class done what we're going to do is come back over to the mainactivity.java file and we're actually going to create a bunch of models and we're going to store them within an arraylist so let's come outside of the oncreate method in our main activity and we're going to type in arraylist and it's going to be of type amino acid model or if you created the planets again it would be of type planet model and then i'm just going to call this amino acid models set that equal to a new array list so this list is going to hold all the models and then we'll send that over to our recyclerview adapter later on now outside of the oncreate but below it i'm going to create a private method so i'm going to call it private void set up amino acid models so then within here what we need to do is create all the model classes for each of our items so in my case i have a few string arrays in the strings.xml file i need to pull each of these out and store them with an array within our main activity so i'm going to go ahead and do this so we're going to type in string array i'm going to call this amino acid names and then i'm going to set this equal to a get resources dot get string array and then all i have to do is pass in the id so it's r dot array dot amino acid full text which is my names and then i'm gonna go ahead and do the same thing for the abbreviations so now i've grabbed all the string arrays that i have in the strings.xml file and what we should do now is loop through each of these arrays and then create our model based on what iteration we're in on the for loop so let's go for int i is equal to zero and then we're going to say while i is less than the amino acid names dot length and then we'll just do an i plus plus now the reason we can do this is because each of these should be of equal length and then all we have to do is type in the amino acid models dot add and we're going to create a new amino acid model and then we have to pass in all of our data so it's going to be the amino acid names we're going to have the amino acid abbreviation this is the three letter one we're gonna have the amino acid small abbreviation so the one letter and then i forgot to set up the arraylist for our images so if we come back up to the top below our amino acid model arraylist i'm going to type in an int array we're going to call this the amino acid images and i'm going to set this equal to and to grab each of our images we just go r dot drawable dot your image that you want so here's the first one i have alanine and you're going to want to make sure these are in the same order as the arraylist in your strings.xml file so i'm going to go ahead i already have this written out in another file so i'm just going to paste that all in here's all of my drawables in the correct order so we're going to come back down and i'm just going to type in the amino acid images and then we just need whatever iteration we're on okay so just a quick summary we grab all of the values from our strings.xml file then we iterate through each of the amino acids or the items we're going to display to the user and then we just create a model class for each of those items and store them within our amino acid models up here all right so our setup method is all done let's add it into the oncreate method so i'm just going to type in setup amino acid models or whatever you happen to name it and now that we have this within our oncreate method what we have to do now is set up the adapter class for a recyclerview but before we go ahead and do that what i want to do is explain a little bit of what the recyclerview is doing in the background so while we're setting up our adapter it makes a little bit more sense all right so what do we have here let's say that this blue rectangle represents our phone and then we're going to say that one of these pink rectangles is going to represent the row slash item within our recycler view now let's say that we had 100 items that we needed to display to the user the cool thing about the recycler view is rather than generating 100 items like what would happen in the list view the recycler view is only going to generate enough items to fit on the user's screen so in the case of this phone it's just going to generate seven of these and as the user's scrolling so let's say they're scrolling in this direction here this item goes off screen it's going to be scrapped so let's say it comes over here we're going to say this is a scrapped view now because it's no longer on the user's screen so it'll just sit in this little like garbage pile almost right over here as the user scrolling right we have an item that goes off screen but we also have an item that goes on screen right so that's going to be this item view right here and we're going to call this process our binding process and right here this is going to be where we're updating all of the data that's on each of these views so in the case of our example right here so if i pull up the old recycler view as i'm scrolling here these views are being recycled so they're going to come back down around here and their data is going to be updated with different text so if this is a little bit confusing i think as we create the adapter class for a recycler view it's going to clear a ton of things up so let's go back over to android studio and create our adapter class to make the adapter class what we're going to do is go over to the far left and then expand the innermost folder within our java folder right here so the one holding our main activity.java file we're going to right click on this come down to new java class and then you're going to name your recyclerview adapter now i'm going to call mine a a for amino acid underscore recyclerviewadapter and then i'm just going to hit enter and hit enter again and you should be left with a file very similar to this but probably a different name okay let's get started with this adapter class to start off we're going to do a few very standard things we're going to extend the recyclerview.adapter class and then within angle brackets what we're going to have to pass in here is the name of our recyclerviewadapter class so i'm going to copy this paste it in here and then we're going to go dot my view holder now what is this myviewholder well eventually we're going to define an inner class to our recyclerview adapter but before we go ahead and do that we need to implement a few methods so if you click on this little error message here you should see a red light bulb towards the left click it come down to implement methods and you just want to implement all three here come down click ok and you should have this following code added in for you it might look a little scary don't worry about it just keep following along so go past these three new implemented methods and we're going to create this myviewholder class so we're going to type in public static make sure you make this class static it has to be static so public static class we're going to call it the myviewholder and this is going to extend the recyclerview.view and then this class is still a little upset so if you click it we get the red light bulb again click this implement the constructor and we have the basic skeleton for our recyclerview adapter all right so now that we have all these really cool methods what do they even do you know i think that's one big problem that i had when i was first learning about recyclerviews is no one really explained what was happening in each of these methods you just kind of followed along cut and paste and it's like it just kind of works so what i want to do is go through each of these methods and write a little blurb about what they're doing so in our oncreate view holder this is where we're going to be inflating the layout and giving the look to each of our rows and the on bind view holder remember there's that word bind so that binding process so this is where we're going to be assigning values to each of our rows as they come back onto screen and that's all going to be dependent on the position of that recycler view now this little method right here all it really wants to do is just how many items do you have in total right so this is going to help with the on binding process so it knows what data to update each views and then finally we have this inner class that we created and maybe this is a terrible way of looking at it but i like thinking of it as our oncreate method because within here what we're going to be doing is grabbing all the views from our recyclerview row layout so these guys right here and assigning them to variables and that's pretty similar to what we're doing in our oncreate methods i think we should start writing our code here because it's very similar to what we're used to doing so what we have is a few views right so if we go back over to the recycler view row layout we have an image view and three text views so let's go ahead make a few variables in here we have the image view so image view we'll just call it image view keep things simple and then we have our text views as well so we'll just call it text view name or maybe i'll make this a little bit shorter we'll do tv name we'll do text view three letter and then we'll have the text view one letter right so this is just gonna be our three letter abbreviation the one letter abbreviation and then within the my view holder part right here within here we're just gonna do our image view set that equal to the item view right so that's this right here dot find view by id and then what id did the image view have i'm assuming just image view so i'm going to copy this come back over r dot id dot the image view and then i'm going to go ahead and do the same exact thing for our text views and then i'll be back okay so now i have all that set up right here so we grabbed each of our views from our xml file and we're storing them in a variable within our java code now let's come up to the get item count and what i like to do is find the length of all the data that we're passing in so what data we're going to be passing in we're going to be passing in this amino acid models right so let's go ahead and create a constructor for our adapter class so we can do this by typing in the public amino acid recyclerview adapter and then we're going to need a few things we're obviously going to need the data but we're also going to need the context later on so we're going to take in a context call it context and then we're also going to take in an array list of type amino acid models so i'm just going to copy this we're going to go this and i'm just going to call it the amino acid models and then i'm going to create class variables up here so i'm going to type in the context context just some really basic stuff models and then we're just going to do the usual this dot context equals the context and the same thing for the array list so now we have all of our data within our recyclerview adapter so let's go back down to the get item count and all we should do is amino acid models dot size right i could do this because i know there's 20 essential amino acids but hard coding in values is always frowned upon so it's better doing something like this so now that we have the item count what we should do is tell our adapter to update the data on each of our rows what we need to do is change the value within the holder that's passed in you can see we have this holder variable here that's of type our inner class right so it's of this type and each of these has our variables that we grab from our layout so we could do is type in holder dot right so if we want to change the name so i call this text view name so that's this part right here this arginine so if i want to change the value of this text view all i have to do is holder dot whatever you name that and then we're going to do a set text since it's a text view and then we could do the aminoacid models dot get the position within our arraylist dot get we want the amino acid name so that's why we created this model class it makes things a little bit more readable so i could copy this little bit right here because we're going to be using it all the time so we can do the holder dot let's do the three letter abbreviation set text to this part and then all we want to do is get the three letter abbreviation so i'm going to go ahead and do this to the rest of the views and then i'll be back all right so i got that all done and i should mention if you do have an image we're not going to use the set text we're going to use the set image resource and then you're just going to pass in that image so let's go up to the very last method within here what we need to do is just inflate our layout so this one right here our recyclerviewrow.xml so to do this very simple we're going to type in layout inflator we're just going to call this the inflator set this equal to a layout inflator dot from the context right so we grab this from our constructor that was given to us and then we're going to type in view view is going to equal the inflator that we just created right here dot inflate and then we're just going to pass in the layout that we want to inflate it with so in our case it's going to be r dot layout dot the recycler view row and then we're going to pass in the parent where did that come from again it was given to us here and then we don't want to attach it to the root so then the very last thing we have to do in this method is rather than returning null what we want to do is return a new amino acid recyclerview adapter dot my view holder and then we just want to pass in that view so that should be everything that you need for the recyclerview adapter class so i'll go over this all again really quick we set up two variables here a context which we need for inflating our layout and then we set up an arraylist which holds all of our models we created a constructor to get the values for these variables and then we have these three methods right so we have the oncreateviewholder which is essentially giving the layout for each of our rows the onbindviewholder which is going to change the data based on the recyclerview's position for each of our items we have the git item count recyclerview just wants to know how much data we have to display to the user and then finally we created this inner class which is pretty much like the oncreate all right so our adapter is done we're about 99 of the way there this is probably the hardest part so let's go back over to our main activity because what we have to do now is attach our adapter to our recyclerview and that's it pretty simple stuff so what did i call my recyclerview here so i called it my recyclerview so i'm going to copy this id because we need to pull it into our java code so let's go back over to our main activity in the oncreate what i want to do is go recyclerview our recyclerview is going to equal the usual find view by d that's our r dot id dot whatever you call your recycler view so i have this guy our recyclerview stored in this variable here and then what you need to do now please don't make this mistake is create the adapter after you set up your models because our adapter we pass in our model list right here if you set it up before you actually create all of your models you're just passing in an empty arraylist and nothing's going to show up so let's come past the setup method and what we're going to do is call our amino acid recyclerview adapter we're just going to call this adapter and then we're going to set this equal to a new amino acid recyclerview adapter and we have to pass in our context so this followed by the amino acid models remember we created our adapter after we set up our models so now that we have our adapter we need to attach it to our recyclerview we can do this by typing in recyclerview.setadapter and we just pass in our adapter and one last thing recyclerview.setlayoutmanager to a new linearlayoutmanager and we're just going to pass in this and that should be everything you need for the recycler view so assuming i didn't make any weird mistakes i'm going to change this to the pixel 4 run it and let's see what we get ah i forgot okay cool so if you remember back to the beginning of this video i said i left out one part in the recyclerview road.xml file well this is what i left out i didn't wrap the content for both of our constraints and we get something that looks like this it could be very difficult to debug because it looks like you have everything right but it's just the spacing so we're going to close out of this i'm going to show you how to fix this issue so going back over to the recyclerview.row what we need to do is in the outermost constraint layout we need to change this layout height to wrap content and we also need to change the card view height to wrap content as well and it's already wrapped content cool so you only have to change this one this item view should snap up towards the top and then we're going to rerun this and we should be good to go that's what we were looking for so don't forget to do that very common mistake but everything else is looking good i think alright so that's all i have for you guys i hope you guys really enjoyed this video i put a lot of time into it as always if you guys have any questions or if you're just having trouble getting something to work leave a comment down below i'd be more than happy to help you guys out or you could join the discord server that i set up for this channel link to that down in the description as well thanks for watching don't forget to like and subscribe and i'll see you guys in the next video

Channel: Practical Coding

Views: 1,094

Rating: 4.8032789 out of 5

Keywords: RecyclerView, recyclerview android studio, recyclerview android, recyclerview android studio java, recyclerview with cardview android, recycler view, recycler view android, recyclerview adapter, recyclerview basics, Android Studio recyclerview, android studio, app development, intro to recycler view, recycler view card view, Android, Practical Coding

Id: Mc0XT58A1Z4

Length: 25min 7sec (1507 seconds)

Published: Fri Oct 22 2021