Hello and welcome back. So, let's get started building our recycler view demo app and I'm going to call it a blog. Here I have some documentation pulled up from guides at developer.android. com and it walks you through how to create a list with the recycler view. Now, I have gone through this and you can take a look at this if you like, but if you choose to do this before doing this video, you might find a lot of the things very confusing. I'm going break this up into different parts in this video and not necessarily follow this, but just know that guides such as this do exist in case you want to follow up or look for another resource to explain this or if you have any confusion. 

I'm going to create a new project. I'll go to 'file', 'new', 'new project', 'empty activity'. Next, I'll call this Alpha blog. Everything else is fine, 'finish', wait for it to load up. Here we go, we're ready. Let's add in a recycler view to our layout. When I go to my layout, compress the project view and there is a recycler view. You can obviously drag this in here if you want. You can also go to your code right here, get rid of this text view and add in a recycler view. I'll do it this way. Left angle bracket recycler so if I start typing it, there we go. Android X, recycler view widget, recycler view. Hit Enter. For layout width, I'm going to go with match parent, so it spans the width of my constraint layout which is the whole screen and then match parent for height as well. 

So, now I have my recycler view spanning the whole screen. I'm going to close this as well, let's see. Let's go ahead and add an ID to this as well. Right here, I'm going to say ID, so there you go Android ID, and I'll call it recycler view since it's in the main activity. I'll say recycler view main, so recycler view main. This way I can refer to this later on from my code. Now in the view itself over here I'm going to go back to design view. You see I have these list items, item 01 all the way through nine and these aren't actual list items, they're simply sample data. If you run your app right now they won't show up on the screen, nothing is going to show up on the screen. 

But you can actually change the look of this if you want, if you right click on this recycler view main and then set sample data, you see this is what it's set to right now, item template default and then item count 10. I can change this, go to the next one, you see now we have email client next one, one line, one line with avatar, two lines, two lines with avatar and so on and different samples here use different kind of layouts for each item over here and you can also increase the item count if you want. I'm going to keep this at email client right here. Again, it doesn't matter. This isn't going to show up on your preview, even if you run this, it's just for our viewing pleasure. Now, why did I do that? Because it does help with something else. 

That is if you wanted to add some styling right here in your main container to the recycler view, you'll be able to see that reflect better instead of just some random list items. If I add some padding over here let's say go over here and say padding and 10 DP you see how padding got added to my view so you can test this out this way and it also helps in that each item here, see all of these are list items. Right next step for us would be to design what each of these items look like and we can create a view for it and set it up. Thankfully with this template that we've chosen, we have something ready to go that we can customize if we like the look of it. Of course we can start from scratch as well. I can go to project and under res layout, you see this recycler view item, if I pull that up, this represents each item in this main activity main. Now we can design each item and you could have done this differently. You could right click on layout, create a new layout resource file and if I click on it we can set it up from here as well, so let's do that.

I'll call it cost since we are dealing with blog posts, each one is going to represent a post, so I'll call it post. Root element constraint layout and I'll leave it at constraint layout. I could have chosen card view over here, which I might do later on. Source is fine, directory name layout is fine. All of this is okay. Now here for starting out, I can come over here to my recycler view item, take a look at its code, all this code over here, I can copy all of this and go back to my post and paste it in here. I'll highlight all of this and then command V. You see how I have a starting template again, I could have simply used this one as well and just renamed a file but I'm not going to do that, so I just wanted to show you how you can just create a new view with some basic code ready to go. 

From here you can customize this and set it up as you like obviously, so the image here, image view, we can use a different image for this. I'm going to use some clip art so I can go to project and under draw ball I'll right click and then new vector asset and clip art over here, I'll click on this and I'll select a different icon so you can pick whatever one you like here or use an image that you want for yourself. I'll just use a random one here, account balance. Then the name, I'll shorten it a little bit. I see baseline account, that's fine. Next, all this is okay, 'finish' and there you go, it shows up. So, now what I can do is over here in the image view where it says tools source, get rid of this because this won't display the way we want over here. 

I'm going to say SRC so android source and you see the draw ball, I see baseline account pops up. I'm going to use that instead, and there is the image. Scroll down to text over here where it says tools, text, all this full names. I want to change this as well and I'm going to start typing text and you see android text and here I'll say title of Blog Post of blog post, and then scroll down. This text view is down here so I will get rid of this tools text from here as well, and say text body of first blog post. Right here, I have another text view, text view three with date time, I'm going to get rid of this and for now set the text as actions. I'll change this later on, for now it's fine. Let's just leave it as that. Actually, I'll change this to edit and delete actions. If you look at this view over here, the constraint layout, you see the width is match parent and the layout height is wrap content, so each one will only take as much space as necessary. It's not going to span the whole view. 

So, this is my individual list item, and again you can use card view and do all kinds of things here, we might actually do that later on, but I just wanted to show you how you can modify something that's already there and go from there. Now that we have a view that we can work with, we want to display a list of this in our main recycler view display. Let's go to main activity and grab our recycler view. If we look at activity main, you see that we have the ID recycler view main, so we can just grab it using that. If you're using view bindings, you can do binding. and recycler view main over here. I'll just say val recycler view equals find view by ID and type recycler view, so Android X recycler view widget right there so it'll import whatever is necessary. 

Over here within the parentheses, I'm going to indicate the ID, so r.id.recyclerviewmain right there. This will reference my entire recycler view that I have over here. Then to set up the recycler view in our main activity, we need two things. One is an adapter and one is a layout manager. Let's start with the layout manager, I'm going to say recyclerview.layoutmanager and here you have several options. You can have a linear layout manager and use it for vertical or horizontal lists. You can have grid layout manager. You can also have staggered grid layout manager, so basically customize it in a lot of ways. We're going to use a simple linear layout manager because we are dealing with a vertical list like this. It'll also be the easiest to implement right now. So, I'll start typing linear and you see linear layout manager pops up, I'll hit enter and then within parentheses I have to give it the context. As always, we're going to say context is this, which is our main activity. 

The next thing is the adapter, so I'll say recyclerview.adapter equals and here we need to create an adapter and this is all the nuts and bolts or the brains of the recycler view implementation. Since we're dealing with posts, I'm going to a call this post adapter. Now we don't have this class, we have to create it, so it's showing up as red and this is where it's going to be a little complicated at first. But don't worry, a lot of the code is boilerplate setup steps, which we have to do and there's really no other way of moving forward without that. But for now, let's go ahead and create our custom post adapter and you can create this here at the bottom if you want. But we're going to create our own file. 

In project over here where we have main activity right here, I'm going to right click new and clock in file class, I'll call this post adapter. Remember camel case for class names, I'll select class over here and it creates a post adapter class file. You see main activity is still red and why is it red?  Over here, It says type mismatch, found post adapter, but you see required recycler view adapter, recycler view view holder. These are the two classes that we're going to create in our post adapter and they are going to extend or inherit from recycler view adapter and recycler view holder. That's some of the boiler plate or canned setup that we have to do that I was referring to. So, we've covered a decent amount in this video, including setting up the view and creating this post adapter class. I'll leave it here for this one and in the next video, we're going to set up the post adapter and get a basic customized view going in our app, so we can run it in the emulator and see the results. I'll see you in the next video.