RecyclerView

in this video I'm going to show you how to set up a basic vertical recycler view and display images and text like you're seeing on the screen here also if you click on one of the items it will display a toast message at the bottom there and print out the name just like you can see right there we're gonna be using the glide library to display the images and another external library for turning the images the image views into circle image views so we'll start by we're going to start from complete scratch just so you can see what it's like to build it from the absolute bottom I'm going to create a new project I'm going to call it our ebooks recycler just recycler view I guess go next and just do empty activity and main activity and activity main is fine and let Android studio build your project so to start off we need to get all the dependencies that we're going to need to build the recyclerview so let's go and open a new chrome window and just I've already googled it obviously but just Google Android recycler view support library and that's where you're going to go to get the library so we can just click this first link here and if you scroll down to the right or just search recycler view you can see the v7 recycler view library right there so we're going to click that and here's the dependency so we're going to copy this so I got that copied now go back to Android studio go to the build up Gradle app file right here and actually I want to change the targeted SDK and the min SDK to 27 also and that means I'm also going to change this so 27 point zero point two if that if you're confused don't worry about that just copy basically exactly what I have here and you'll be okay so now let's put in the dependency I'm gonna say recycler view and then just write compile and there's our defense II so that's that's the recycler view 1 now let's get the glide dependency so I'm gonna write a little heading here saying collide and then we're gonna open up a chrome window again to get that next dependency so if you remember from my demo I was displaying images in the cycle of view and that's what we're gonna use glide for Glide is actually what's going to be retrieving the images from the internet and so I have the link open here you can just go to github.com slash bump tech slash glide or just Google Android glide and that'll be the first link right here so scroll down and here we can see here our other dependencies so we can just copy that and once again go back to Android studio and we're gonna paste in those dependencies just below this little glide heading right here and we're almost done now we just need one more dependency to make these image image view widgets into circles it just makes it easier you can you can code it up yourself but it's much easier just to use an external library so once again I have it open right here github.com I don't know how to say this word slash circle image view alternatively you could just go Android circlips circle circle image view google that and first link right here so we can just scroll down and there is the dependency and go back to Android studio and once again type a heading so circle image view and we can paste that in and now we're ready to press sync so things you want to watch out for here is make sure that the recyclerview version matches your appcompat version and also that will match your compiled SDK version and your targeted SDK version otherwise you might get issues ok so now we have everything we need to get started before we start I want to go into the manifest and just allow internet permission so that I don't forget later so just do users permission and start typing Internet and that's that's gonna allow us to make requests because if you recall from the demo once again we're using the glide library to make requests to the Internet and retrieve images so we need to use internet permission to do that so that's what this line is for right here now we can close the manifest and start building our recyclerview so the way recyclerview works is basically each one of these entries has its own layout and then the recyclerview uses what's called a view holder to fill though those little layouts with information so each one is going to be different obviously so this is a different image than that image and it just adds new information to these little individual layouts and then it recycles them so to get started we need to first add in our entire recyclerview container which is this whole screen right here that contains all of the entries and then we're going to need to build a layout for each individual entry itself that might have some confusing so I'll just do it and hopefully it'll make sense so go into activity main and we can delete this textview and just change this to a relative layout it doesn't really matter but I'm going to use the relative layout and now we're going to add a recycler view here so you can see the Android support v7 recycler view do match parent match parent and just give it an ID of recycler view and that's really all we need here this is just the container that's going to contain the entire list of items that's it so we can actually close activity main next we're going to build the layouts for each individual item as I just mentioned so go into your resources folder here click on layout right click on it go to new layout resource file and I'm gonna change this to a relative layout and in here I'm just gonna call this layout list item because that's what it is it's a layout for each individual list item in the recyclerview okay so let's start building this too first we're going to add the circle image view widget so you can start typing de and you can see there it is right there and I'm gonna make it a TDP by a TDP and then we're going to give it an ID of just image and we can actually add an image to it so just type SRC and you can see there's a MIT map image that pops up just so we can get an idea of what our layout is going to look like so we want to put kind of like a dummy image in there and now we need a text view this is going to be for displaying the name and you can just use wrap content wrap content and do text I'm just gonna put in some text just so this is like dummy text so we know kind of what its gonna look like and where it's going to be positioned and let's change this actually to to wrap content and wrap content or not we want actually match current for the width there we go and we're gonna give this one an ID of image name and we want to align it to the right of the image view so we just do image now it's to the right of the image you can see it's kind of slide it over now and I change the text color to black so just go number sign zero zero zero that's the hex color for black and I want to align this vertically whoops vertical center vertical true then I'll kind of drop it down into the center of the layout there and now do margin left to slide it over away from the image a little bit and I'm going to change the text size to 17 SP just to make it a little bigger so that's generally what we want this layout to look like I'm just gonna add a little bit of padding to the top here 15 DP just to kind of bring it all in to the center but that's generally it that's pretty much what we want this to look like so these are the individual list items that are getting recycled inside of the container so this is this is the container and then it's going to contain all these individual items they get recycled over and over again so we can close this and close this now we're ready to build our recycler view adapter so what this does is it actually kind of it adapts the individual list items so like this list item right here it adapts it to the main container layout so you can't just kind of shove them in there you have to make a special class to adapt it and that's what this list adapter is going to be called so create a new Java class and we'll go recycler view adapter and before we extend anything or anything like that first of all let's type a log so just type log T and you can see the log comes up there that's just for debugging if you don't know and now we're going to create a view holder class so go public class view holder and extend we can just type just get view holder you can see Android support v7 widget recycler view and get that right there then squealy bracket and that's good so now you can see this is underlined it's red it's angry if you click on it you can see this little red light bulb pops up click on create constructor matching super and there we go so what this view holder is gonna do is it it actually holds the widgets in memory of each individual entry so like this entry this entry this entry it will hold each one individually in memory and that's what actually gets recycled that's why it's called a view holder because it's holding that view and getting ready to add it getting ready to add the next one or whatever so we need to declare all of our widgets in here so we can go circle image view our image and the text view for the image name and we're also going to need to add the relative layout which I forgot to actually give an ID to to give an ID to this and say parent layout course ID right layout I'm giving this an ID because this is what I'm going to use to attach the onclick listener so pair eclipses parent layout now I'll top we'll talk more about that later so it's going to give a little more space down here okay so now we need to attach the widgets to their IDs so image equals find whoops equals item view define view by ID card ID dot image should be just image and image name item view fine view ID card ID dot image name and then the parent layout which is the layout that I just gave that ID to so fine view ID are two ID dot parent layout cool so that's all we need to do for inside of our view holder now that we have our view holder class created we can extend our recycler view adapter class so we just go extend and then to start typing recycler view and then do recycler view dot adapter and then we can specify an adapter type so inside of our adapter type we actually have the view holder class that we just created so that's that's referring to this view holder class right here so it's saying I'm creating an adapter by extending the recycler view adapter class I'm specifying the type which is it's going to be a view holder type which is what we just created and once again you can see the red underline here it's angry so just click on it and then click the red light bulb and go in methods select all those methods those are required for this class and then just click and it will pop them in there now we're ready to declare all of our variables that we need for this class so just kind of go go below the tag here and the first thing we need is an ArrayList and this ArrayList is going to be a string type and this is what's gonna hold our image image name so I'm gonna go M image names equals new ArrayList and then we're gonna create another ArrayList oops ArrayList and this is going to be M just images equals new ArrayList and last one is we need the context so M context and we'll talk about more more about those in a sec here oh we need the constructor too so the default constructor for the recyclerview adapter so just hit control shift insert whoops no alt shift insert alt shift insert and you can select the constructor there and then you select all of the variables that we just created there we go this is actually kind of taking up a lot of room there we go and so now the default constructor will get the image names the images and the context for us I'm gonna move the context to the front just kind of where I like it not there's no reason for that I just like to put it there and that's that's good so now move on to our on create view holder here so this method is the one that's actually responsible for inflating the view so we need to go view view equals layout inflator dot from and then we can get the context so go parent dot get context and let's close that and then to dot inflate and then we specify the layout file for our list items so we go layout list item and then just type parent and false now we need to get the view holder so I'm gonna create a view holder object whoops view holder object which is this class right here so I'm creating an object of this class right here so if you hold our view holder equals new view holder and then we can pass the view and then we just want to you return the viewholder and that's it if this doesn't make sense to you or this this kind of portion right here it's not really like super important to understand how it works this is pretty much gonna be the same for any recyclerview adapter that you make you could just copy this straight up without changing a thing other than obviously the layout so I wouldn't even worry about that just just know that it it's recycling the view it's recycling the view holders basically it's putting them into two positions that they should be put into so that's going to on buying the view holder and this is kind of the important method that's gonna change based on what your layouts are and what what you want them to look like so I'm gonna start by actually writing a log just because this methods gonna get called every single time a new item is added to the list so you've seen the log that if we have 1 2 3 4 5 6 7 8 9 items in the log this is going to print 9 times so just it's it's good for debugging so we know if one of them failed where it failed it'll tell us and we'll know okay if it failed if you'd only put 4 items in there then I know the fifth one caused it to fail so it's kind of just a good idea to stick that log in there okay so the first thing we'll do is we need to get the images so we're going to go glide with context oops and then do as bitmap because we're going to be getting fit Maps and we do load and this is where we would reference the image URLs so get position and then we wanted to into the target which is the image view widget so we just do that so this is just takes the context tells Glide that we want it is a bitmap we're loading the this is the image URL so this is kind of like the resource where it's coming from and then we're loading it into the image view and to reference the image view we reference our view holder and then we reference our image widget which is this widget right here labeled image ok so then next we want to use our view holder and set the image name so just do image name set text and this is going to be M image names get position and that's it and lastly we need to attach an onclicklistener to each one of these list items because if I click it you can see oops I click it there we go you can see that a toast will pop up so we need an onclicklistener to do that so just do holder dot parent layout and then set onclicklistener new capital om you can see the onclick listener pops up there and once again I'm going to do a little log here just saying clicked on some image so the names get position and that'll print the image name to the log also there just type toast and get the context and in here once again I'm gonna do names get position so that will just print out the name and last we need to add either image names or the image URLs here and in this do dot size and this tells the adapter how many list items are in your list if I was to if I was to leave this as zero nothing would happen so you get a blank screen when we actually start our app so it's very important that you do that there we go okay so we're almost done we have pretty much everything we need now we just need to go into main activity and actually make the adapter make the objects and get everything going so first I'm gonna create a log by just going log T for debugging and then we create a little heading here that says bars for variables do private ArrayList string and we do em names and private ArrayList string M image URLs so basically I'm just getting the same lists as we're using in our adapter here because these are the ones that we're gonna have to pass to the adapter so I have those two data structures ready to go I'm gonna get a little more space here let's see so let's log first I guess we can just go start it just to let me know that everything started okay and I'm going to create a method called emit image whoops image bitmaps oh yeah tight there we go and inside here once again I'll log and just say preparing or I guess yeah preparing bitmaps and I've already gone out ahead of time and selected why is this red oh whoops hi Boyd so I've already gone on ahead of time and selected some image URLs that we're going to be using so I'm just going to copy and paste them in here so all I've done is I have image URLs and I've added this image URL so if I was to type that into a browser window you just see one of the images and so that's that's all these are they're just different images I actually got them from reddit nowhere special just some random ones that I picked and then I added a name so I just do names that add to add a name and do the same thing all the way down for all these images so that's that's what we need to do to set up or kind of get the images so now I'm just going to call that in oncreate and knit bitmap images or init image bitmaps and that's done now we need to create a method for actually setting up our recycle of you so I'll go private void in it recycler view and inside here I'll do a log again in a recycler view and we'll create our recycler view widget cycle of U equals fond of UID r dot e dot recycler view and create our recycler view adapter object which is the class that we just made right here and equals new recycler view adapter and in here we need to pass it you can see I'm holding now control and hovering over it just in case you don't know just like we've defined I need to pass the context the image names and then the image URLs that's that's what this default constructor is right here so we need to pass it the context the image names and then the image URLs that's what this takes right here so we can do the context by just referencing this and then we do em names and then M image URLs then we want to set the adapter to the recycler view and then do recycler view set layout manager new you can just do new linear layout manager we don't need anything special and that's it so we'll call this after we've got all of our bitmaps so we just call an it recycler view inside of our an it bitmaps method so the Flo will kind of be like on Crais will start it's going to get the bitmaps and then once it has the bitmaps or sorry once it has the image URLs it's going to init the recyclerview and that should be it so I'm gonna open the log so we can kind of view what's happening Oh ads it's happening Oh kind of another thing I like to do I'll just show you copy your package name and go to edit filter configuration I like just because sometimes the app will crash or something and you'll lose the log so this is just gonna filter the log to only show things for your application and not other things that are happening with the phone so if you didn't see that I press the play button and now we're going to take a look and see what happens here so there we go there we have our recycler view successfully creating everything you can see it's scrolling I can click on something so I just clicked on Portugal it displays it everything's working as we expect and if we check the log we can see on create is called here we have preparing bitmaps which is our method call right here we have init recyclerview which is then called afterwards right here and then we have the unbind view holder method being called like I talked about in our view holder so you can see remember we put the log right here and I said it would be called 9 times if there's nine images so we have one two three four five six seven eight nine there we go and then also the on click right here when I clicked on the Portugal entry from this log output right here so that's it hopefully was helpful I'm gonna be also doing a horizontal recycler view and a staggered recycler view shortly after I release this video so make sure to follow the coding with Mitch Facebook page or follow me on Instagram if you haven't already and I provide updates typically for when I'm producing new content that I think is gonna be helpful thanks for watching and I'll see you in the next video you

Channel: CodingWithMitch

Views: 291,169

Keywords: android tutorial, recyclerview, android recyclerview, recyclerview example, recyclerview tutorial, android recyclerview tutorial, android recyclerview example, how to use recyclerview, android list, android scrolling list, recyclerview with images, recyclerview with images and text, custom recyclerview, recyclerview android

Id: Vyqz_-sJGFk

Length: 22min 25sec (1345 seconds)

Published: Mon Jan 01 2018