Xamarin Android Tutorial 23 Implementing A Recycler View With Material Design

what's up guys welcome to the 23rd zamaron Android tutorial and in this tutorial as well as the next few we're going to be switching some things up by looking at some new Android widgets okay so the first one's going to be the recycler View and to me the recycle view is very important because it's probably going to replace the list view here in some time and mainly that's because it's a lot more efficient at recycling and reusing views which makes it great for handling large data sets Okay and as technology becomes more and more advanced we get more data we get higher resolution pictures and and we need better ways to efficiently handle uh the reusing of views which helps helps memory efficiency okay so there's are a lot of other things that are great for the recycl view but that's one really big prominent feature of of it that that makes it great great for uh replacing the list view okay so let me show you an example of a project that we will be working on that uses a recycler view okay so this is one I already have all written up and here I am just adding some items and notice the animation when I add and delete and that is default by the recycler view okay so that's another cool feature with a recycl view is default animations and there we have it and you might look at this and be like hey you know this is just a list view what the heck you know and as we dive deeper and deeper into the recycler view you'll soon hopefully realize that there the benefits not only what I tell you but you'll start seeing some of your own things that you can use the recycler view that are a lot easier to do in in it than the list View and I'll show you some cool stuff along the way all right so before we get started let's dive a little more into what the recycler View has to offer for us okay so the recycler view first of all like I said before it simplifies the display of large data sets with the layout manager okay and I'll talk about the layout manager right here right now in a second and also what it does is it handles recycling of views more efficiently than list views like I've already explained and these two go hand in hand okay so because it handles the recycling and reusing of views more efficiently it can display large data sets within it okay so remember that these two do go hand in hand and like you seen a moment ago that it provides default animations for adding deleting and it does provide some other default animations but adding adding and deleting are are some really common uh things that you'll be doing with it so it it does add some default animations for that but there are some other things as well okay so just want to point that out and then lastly because of basically all of these and some other stuff that does provide more flexibility to the developer okay so like I said in the next couple tutorials hopefully you'll be able to start seeing that the flexibility it adds to you with using a linear layout like a list view or you can do a grid layout a stagger layout uh all using the same adapter okay so if you don't know what I'm talking about that's okay we're going to dive into that and lastly here is something that I took off the Android developer website and I thought I'd talk about this for a second so here's the inner workings of a recycler view okay so the recycler view like I said has a layout manager this this layout manager okay and the layout manager what that does is it decides when to reuse and to recycle a view okay so if if it does decide to recycle view it'll talk to the adapter and ask for some new data to populate the recycl view with okay and also what's great about it is not only will it recycle and reuse it it won't only recycle a view but it'll reuse a view okay and what I mean by that is say if you have just a simple view a row of two text views what it'll do is it'll take those text views and it will not just take them out of memory and make two more text views because if it has the same view that the next if the next position has the same kind of view it will reuse those views okay so it'll replace those two text views with just some new data okay I hope that makes sense so it won't only just it won't create a new two text view a new row by using find view by ID because that's really costly when we do find view by IDs but what it will do is it'll reuse those views and then take it from the data to replace those with okay so that's key and that and that's what allows all of this really to happen the layout manager does a lot of the bulk work for us all right so when we create a recycler view what we're going to be doing is we're going to first import the the support library and the support library right now is actually in beta for zamon so we do have some C bindings to work with but we got to keep in mind that it still is in B in beta at this current moment okay but we do need to use the support library to to use the recycler view the next thing we will create the recycler view just like we do list views and every other view inside of the designer and we will create the layout manager remember the one that does the bulk work and attach it to the recycler view the next thing we'll do is this is really important is we create our custom adapter okay and our adapter is responsible for doing the custom view uh making the custom view holder okay so it holds the custom view or our row that we basically create and then also there's another one that another method that will actually override that binds the data to our view okay so we have the view then we'll actually bind it all right and the next the last thing we'll do is we'll attach that custom view to our recycler view okay so that's what we're going to be doing in this tutorial so let's get started guys all right so let me go ahead and close out uh that and we'll start a new project all right let's go into our new project all right we'll just call it recycler view tutorial okay so as always I'm we're make some buttons a button for us and a template and all that good stuff so we'll just get rid of that and what I like to do first is I like to go into the axml file and start designing something okay so that's what I'll do right now is I'll go into recycler view okay or I'll start going in here and making the recycler view all right so what we're going to do for that or what we're going to need for that is just one recycl view the way we do a list view but we'll need the support library for this okay so here's where we'll need to open up the package manager okay so we'll open up the go to tools and you want to open up the package manager console and we'll that boot up all right and we'll need to type in a command here which I believe I have written down somewhere around here ah okay so what we'll need to do is because it's still in beta it's not going to be in the normal way that we grab our references we're actually need to get it from the package manager which is why I'm doing it this way all right so just type in install - package and zr. android. support V7 and recycler view P all right and if we ever did everything correct it'll start installing that for us and it's going to install the dependent which is the zamon support version 4 so once everything's installed we can check over here to verify that and we'll see that this got installed which is a dependent so that's fine and then our version S recycl View got installed okay so all good there what we could do oops what we can do now is we can add in our recycler view okay so let's go ahead and do that right now version seven widget recycler view all right so that's going to be it and then we're just going to add some common attributes to this like an ID and all that good stuff okay so we'll do that real quick do at plus ID and we'll just call it recycler View and we'll specify a width which is match yeah parent and we'll do a height same thing and I'm just brushing over this because the attributes are pretty something that you probably already are familiar with so I don't want to spend too much time on it and we'll do one last property called scroll bars all right and we'll make a vertical scroll bar all right close that out go into our designer and then we'll make sure okay so our recycl view is is taking up the whole screen okay just the way we want it all right so the next thing we need to do is we actually need to make the the the view which is in this case is just going to be a row okay and it's going to look a lot like the Android developer website I just kind of took it from there and just created my own template I didn't want to think of anything new to create I mean the views aren't really something that we're going to be concentrating on so we don't need to we don't need to spend too much time on it so what I'm going to do is I'm going to create my view and what I'll call it is I'll call it just call it Row for right now whatever you name it's fine and since I'm not going to spend too much time on this and I know it's going to be pretty monotonous if I do since we've gone over everything before I'm just going to copy and paste this this project will be available in the link below so don't worry but it's it's pretty it's pretty standard there's nothing special going on here all right and I did mess up I did make it an a XML sorry about that guys not a axml so let me go ahead and do that now all right so now the designer will render it and as you can see it's just a template for our row that you guys saw a few moments ago okay so that's all that's going to be and that's basically everything with our our view okay and you can see that it's just a linear layout that's stacked horizontally two linear layouts these two that are stacked horizontally and then inside of his children are stacked vertically okay so that's all it is like I said nothing special you guys are probably already used to doing that kind of stuff and if not just reference it in the project all right so creating the recycler view okay so if we look if we remember back to the PowerPoint we've got the support Library we made it inside of the axml file okay so now that all we need to do is essentially code everything up now okay so the the first thing we want to do is we want to get a reference to our recycler view okay so recycler View and we'll just call it recycler View and we'll need import it okay and the next thing we want to do is we want to get our layout manager okay so remember the layout manager is the one that does a lot of the work as far as reusing or deciding when to reuse views and to recycle them okay and we'll just call it layout manager and the next thing we want to do is we want to get an instance of the adapter okay and remember the adapter is going to be the intermediary between the layout manager and recycl view in the data set all right so it's what binds the views and creates the views and has the view holders and everything so it does a lot of the work as well and that's good for now all right so we're going to need to reference this now by using theine view by ID all right so we'll do oops cycler View and resource. ID and I believe believe I called it recycl view just not coming up right now because I have not rebuilt it so let's go ahead and do that now rebuild it so it has all of our IDs ready to go because I'm just lazy like that I guess okay so all right so that's good everything being built now the next thing we want to do is we want to now instantiate our create our layout manager and the way we do that is pretty simple we will just provide or Make an instance of it okay uh new recycler view dot layout manager all right and this should take oh I'm sorry I'm sorry uh we we want it to be a linear layout manager okay so our linear layout manager is going to be a lot like a linear layout just Stacks vertically or horizontally okay so it'll stack vertically by default and we'll need to provide a context which this is the activity so that'll be fine and as soon as we do that we want to actually now set the layout manager okay so now that we attach it to the recycler View and remember that's what we wanted to do next we wanted to attach it now what we need to do is we need to create a custom adapter okay and the way we do that is what we'll do is we'll come down here and we'll do it inside of the same file just to make things simple but you could put it in your own file if you like to but just to keep everything tightly together for the for the sake of uh brevity we'll we'll go ahead and keep it in here all right so this is where we need to make our custom adapter okay so this is where we'll do that and we'll just call it recycler adapter and we're going to inherit from the recycler view adapter okay so once again guys remember that the version 7 The recycl View as of right now is in beta so if you're watching this at any time uh around this time then the recycle view is is still invaded hopefully later on or pretty soon it's going to be it's going to be in a full stable mode so there like that being said there might be some bugs with with the recycler view right now but zamon is working hard on giving us a full version with all the C bindings okay so it'll it is a little rough on the edges as far as like parameters and stuff it doesn't really give you any kind of names it just say like parameter zero parameter one so you kind of got to do a lot of referencing and I'll do my best to to change those parameters around and make them a little less generic for you guys and you you guys will see what I mean right now so uh the first thing we want to do is we want to provide a Constructor okay so the Constructor is going to take a list which we'll need to import it's going to take a list of weol call them email okay so it's going to take a list of email we have not yet made the email class but we will now in here in a minute let's first import the generic library that and it doesn't know what the heck we're talking about so what we can do email that should be fine so we'll go in here and we'll make a new class called email all right and then email is just going to have a few things it's going to have a name like we've seen before you know we'll have a name we'll just make a few properties and it's going to be it's going to have a subject and it's going to have a message it's going to have a time which is like the 15 minutes ago or an hour ago or whatever and we'll leave that as a string too but uh we'll call it we'll just call it time and then we could have another one that's called like favorite which which the star will light up if it's favorite or if it's not so we can have a bll that's like you know if this email we want to favorite it or something like that and then when that favorite comes up we can keep it at the top or archive it or something like that so you know whatever you guys want to do with that you guys want to start playing around with this but we'll just do favorite just make that a bull okay so that's going to be basically our email class it's just going to be a structure that that holds some primitive values okay so here we go so now we have a we want to have a list of Emil all right and we'll call it emails and we'll then initialize that to whatever is passed in all right so that's going to be our Constructor pretty simple all right now the next thing we want to do is is all this is important of course but this one's really important because the ne what we want to do is we want to make a view okay okay and the view is going to be like uh if you guys remember the PowerPoint what it what it does is it creates the view okay so it's the view holder and it holds all the views okay so that being said let's go ahead and do that and what we need to do is we need to inherit from The View holder class okay which is provided within the recycler view class all right so let's go ahead and inherit from that and then here's where we're going to have all of our views okay so I'm going to have a few properties and what they're going to be is let's see let's make it a main View Property all right so that's going to be our actual view the entire view of the row or or any whatever layout we have okay so the linear layout we're going to have a row and if we had a grid layout we'd have you know like cells or something like that so our text view is going to be we'll call it m it's going to be our name it's what's going to hold all the stuff inside of our emails okay so remember our email had a name then it had a subject sub subject and then there was another one that was message so once again these are just text views that are going to whose texts are going to hold the data within the email class all right so then now we have all that and then we wanted to just make a Constructor for our nested class if you will inside of our adapter class that takes one parameter calls it space method that passes that view that main view that we pulled in and what we do is we do main view equals view okay so we're going to we're going to pass in when we when we create the view all right we're going to pass in the main view all right so we can do this one in a few ways we can we can do it this way we can pass in all the values we can you know not do it and then create the instance of it and then my view do M name equals m subject so a lot of different ways to do it we want to make sure we initialize all these all these views views before we pass it back to the method that calls it which is actually what we're going to do next okay so the this method right here is part of the recycler the recycler adapter and it overrides so we're going to override on create view holder okay so with this now is where we actually create the view for each row in this case Okay so let's call that let's call a row okay this is where we actually inflate it okay so we need to grab the context and we can get the context from here okay here's what I mean by p 0 P1 and I believe this is because it's in beta right now it's just when we actually override it just gives us some very generic names and I had to kind of look up and reference it in the Android developer website and see like what what is this what is this cuz obviously obiously it helps to know that kind of stuff and here's what they they are a little more specific name for it so that might help you out a little bit so we want to take the parent and we want to get its context okay so that's what the layout viewer and with that that passes back a layout inflator which we can then use its method inflate to inflate our our row okay which is remember remember our row is what we created right here okay so here's our row and it's going to inflate it every single time it's called okay we have one we have two we have three a th whatever so that's what it's doing every single time and that's what this method is responsible for okay so a lot like the the adapter inside of the list view adapter but uh a little different subtle differences that we're we're facing okay all right so there we go now that we have that we can now start to initialize our our Fields okay so we know we have a text field VI and we'll call it txt name and we'll do row find view by ID it's going to be a text View resource.id and it's going to be txt name and remember the txt name is what's going to is what's going to hold the data for the name of the email all right so we'll do that here in shortly and then this this name will equal we're going to pass that into here and it'll equal this name all right so that's all we're doing right here okay so we'll do txt subject find view by ID all right so that's all I'm going to do here so I'm just going to move a little quickly if you guys want to follow along this is going to hold our message this text view so right now I'm just binding to the text views inside of our designer file all right and the next thing what we'll do is we're actually going to create an instance of our my view class all right so we'll call that my view equals new my view and remember that it takes a view which is going to be our main view which is the actual row okay so this is that's like that's this is the whole view okay so this is this whole thing in this case right now okay and then I'll just I'll be lazy and I'll uh go ahead and provide a initialization this way okay M subject equals txt subject and finally M message equals m oops txt message okay so now we have that and then now we just wanted to return the view okay so it it expects a view holder which is what my my view is since it inherits from it and we return it okay so it's happy with that all right so cool now we have the references to the the appropriate Fields right but we don't have any data for it we we don't we haven't bound any data okay and that's what we do in this next method is we actually bind the data okay so in the list in a common list view if you guys are familiar with it you'll know that that's where you you kind of create the view then you bind it in the same method in the get View method but here we actually do it in two separate methods okay so it decouples the the two responsibilities of it okay so this actually creates a view and here we'll actually bind it okay so once again I'll give you some better names which is going to be the holder and this is going to be the actual position of it okay so here we go and we have my view my holder I'll call it and we'll we'll need to cast the holder cuz right now the holder is a view holder right a generic view holder we'll need to whoa we'll need to cast it to a my view okay I don't know why it's doing that my equals a that's why little parser okay as my view okay so that's going to cast it all right and I noticed that we should have a template up here and if we had a template we wouldn't have to cast it we could just do do something like you know like well we don't we can have a generic and we won't have to it would know that we're going to pass in a my view instead of a view holder but for some reason the library is not giv me a option to do that so I'm once again assuming that's because of the support library is currently in beta all right so but no problem we'll just go aad and cast it and now that we have casted it we can do something like yeah we could do main view oops we'll do text okay so M name so this is where we actually buying the data okay so then we'll use our email right and we'll use the position of it and then we'll do name okay so my holder and we'll do the same thing for subject equals m emils dots all right so right now I am just binding the data and it looks really ugly because I'm got all this red around me hopefully all that disappears but it won't so yeah that's what I did wrong so here we actually do one wanted to do text okay so the text of the text view okay so sorry about that guys I was trying to initialize a text View to a string so okay so the text of the text view to the text of this current email all right and that's all we'll do there we'll just that's all bound up good to go all right and the last thing we want to do is we want to override the count all right so override I believe it's item count yeah item count okay so much like the adapter with the list view it needs to know how many items there are currently in the adapter okay and the way we do that is how many emails there are and we'll just return the count property of the list all right guys all right so that's going to be our adapter and that's all that that's doing there once again this creates the view then this takes those views and binds the data to it this Returns the number of views currently in adapter this is our view holder that holds all of the views for the current row and this is simply our Constructor so now that we have that now we want to finally attach our adapter so set adapter and we'll do new recycler yeah recycler adapter ah whoops sorry guys I misspelled that recycler so I spelled it right the first time not the first time or the second time not the first time all right so recycler adapter and we need to pass in the list of emails which is something we have not yet created all right so we'll need to do a list of emails and we'll call it m emails and we'll do M emails equals new list of emails and we'll pass that to here to our adapter all right so well since I guess since we made an adapter up here we'll go ahead and just make an instance of it and I was just trying to be lazy but this way is probably a little cleaner okay make sure everything is good to go let's rebuild it inconsistent [Music] accessibility all right let's see that's probably just because something's private when when it shouldn't be Public public once in a while I'll get this and it's good that it came up because maybe you might have got it before too so this recycler adapter ah okay so our email class I'm assuming is private of course by default and we're trying to access it but it won't let us all right okay okay so that happens pretty often I forget sometimes that c does things and it it's private by default so we were trying to access a private class within a public class okay so wasn't consistent all righty so let's Okay so I went ahead and rebuilt all right so let's go ahead and now add some of our data which we can do right here okay the adding delete leing like I showed you a moment ago was with like the actual buttons where is something that we're going to work on in the next tutorial because that's what we're going to do we're actually going to show I'll show you how to notify the adapter to show that list have changed and how to do it efficiently because you can do notify dat data set has changed but it's actually really efficient inefficient to do that when you know the actual position that the view changed so it only has to redraw and and and basically I redraw some of the of The recycl View okay so we'll go into that in the next tutorial so right now we're just going to add some new new emails all right so what we can do is we can do you know name equals top and message we do subject first equals want to hang out and the next one will be the message which will [Music] do I'll be around tomorrow yeah so whatever and we won't specify anything for the I I didn't tie up anything for the time or the favorite but that's something that that is pretty trivial at this point I'm sure you you know how to do we're just kind of just trying to concentrate on the recycler view okay so let's go ahead and we'll add a few more to this that are all the same doesn't really matter start this up and of course we need to change the minimum version to something like API level 15 for the emulator to run and come into here all right all right cool so good to go like I said we didn't bind any of this stuff but we could easily do that no biggie so if you guys want to go ahead and bind this and you want to you know take this from here and and start start something that you want to work on it's going to be the same way to do it here but these are all bounded now and we can see that our recycler view is actually working pretty good okay so we cannot add and delete dynamically which like I said we'll do in the next tutorial but now we can see that we do have a foundation of and hopefully a good understanding of the recycler view okay so how to set it up and how to bind it and mainly using the layout manager and the and the base adapter okay so in the next tutoral we'll go into more of the cool features of the recyc view okay so sit tight and uh hope you guys have a good understanding now of of what it's all about though okay so see you guys in the next tutorial thank you for watching

Channel: Joe Rock

Views: 27,383

Keywords: Tutorial (Media Genre), Software (Industry), Xamarin (Business Operation), Android (Operating System), Computer Science (Field Of Study), Android Recycler View

Id: HlrOQxRXwCo

Length: 35min 5sec (2105 seconds)

Published: Thu Dec 04 2014