RECYCLERVIEW - Android Fundamentals

[Music] hey guys welcome back to your new video this video will be about recyclables which is used in almost every app whether recyclable we are able to create lists of views and it is called resettle view because only the visible views will be loaded and the rest will be recycled and that is what makes recycle of your very efficient and even though there is still a ListView that has a similar behavior than recycler view you should always prefer recycler view because it is much more efficient and you can basically create any kind of list you can imagine and because the recycler view does not belong to the Android standard library we need to include it in our built or Gradle app file so to do that go to your project hierarchy under the Gradle scripts folder and double click on that built up Gradle module app file here let's open that and you can see that we have several dependencies below here and this is the place where we want to insert that dependency for our recycler view and I already copied it you can just write it off what I will paste here so that is the dependency for that recycler view that just tells our Android app that we want to use that view and it knows from where it can get those resources that are needed for that recycler view after that we need to click on sync now in the top right corner and Gradle will sing our project and then we are fine to go creating a list for a recycler view is sadly a little bit more complicated than you may think at first but I will go through it in very detail and explain all the necessary steps in this example I want to create a simple to-do list app so just a list that has a title for that to do statement and a checkbox whether we have done that item or not so let's start by creating our layout for activity main.xml so let's open that one up and the first thing we need to add here is of course our recycler view type recyclerview and choose the option here that says recycle of you and not recycle ListView that is something else press enter here and they are truth is match parent layout height is 0 DP and I will set the idea of that recycler view to R we reduce because that is our recycler view that holds all of our to-do items then we can close that text next I want to add an edit text where we can add new to Deus so the layout width is 0 DP and the layout height is Rev content I will set the hint of that edit text to new to do and I will give it an ID of et to do and close that tag off and finally add a button here to actually add that to do that we entered in our edit text all set the rift web content and the height to our set the text of that button to add lost the tag off and I will give it an ID of button add to goo then we can go into our design tab to set the constraints for our views let's first constrain that add button here to the right and to the bottom then let's take our edit text constrain it to the bottom to the left and to the button left and finally our recyclerview and Wilson constrain the bottom to our edit text top the top to our apparent drop and those the left and the right side just to the parent left and parent right and of course our recycler view is just a gray box here that will be different in our app because currently we don't have any data in it and the layout editor does not know which data it should show in that recycler view and that is basically the reason why it is just a gray box here the next step is to we create a layout file for a single item in our recyclerview so a layout file that describes how our items look like and in our case because I want to do a to-do app here we just need to add a text view in that layout file for that to do title and a checkbox to check it or uncheck it to do that lets go to our arrests folder and in your layout folder right click here new layout resource file and I will name it item to do and make sure to select a constraint layout as a root element and click OK then let's go into that text step of our just create a layout file and here I will add the text view for our title of that particular to-do item I will set the width to 0 DP and the height to wrap content I will set the text to title even though that doesn't matter because we will replace that text later on anyways and finally the text size to 24 SP then close that tag off and probably give it an ID of TV title and down here let's create a check box with its layout with set to wrap content and the height to and I will give it an ID of oops C be done oops C be done and then close that tag off also I want to set the layout height of our route layout of our constrain layout to 100 DP so our items are not as loud as a whole activity page is and I want to add some padding to our route view here and I will set that padding to 16 DP then we can go into that design tab to constrain our abuse let's take our checkbox here constrain the right truth parent ride the top to the parent top and the bottom to the parent bottom then take the textview constraint the left to the left the top to the parent drop the bottom to the bottom and the right to the checkbox left and that's actually it that's how I want our items to look like so we have that title and that checkbox whether that particular item in our to-do list is done or not the next step is to create an adapter for our recycler view the adapters job is to create views for the items we have an or recycle of you and she set the contents of our items accordingly so let's go to our tutorials folder here or your app package follow the follower your main activity is right click new Kotlin file or class make sure to select class here and I will call it to do adapter and and what so you created that class for us and each adapter for recycler view needs to have an inner class which is a view whole a class and as a name says if you Halle is used to hold the views of our recycler view so in our case the views that we defined an our item to do that XML file here so let's go into that class and create an inner class which is called to do view holder and in the constructor we want to pass the view to our current item so a view that describes our item to do that XML file I will call it item view and that is a view and that to do view holder class needs to inherit from recycler view we need to import that by pressing alt + Enter recyclerview dot Ujala and in that constructor of that viewholder so we need to call that constructor of that we Walla we need to pass our item view that we passed to our to-do view holder so just write item view here and that's actually it it's just a class that consists of only one line in this adapter somehow needs to know which data it should set to which item and to actually tell this adapter that we need to create another class that describes how to do item of our list looks like so let's go into our follow here or a project follow right-click and create another class select class here and our call this just to do and this class does not have a body and I will also make it a data class because it only holds data here and in the constructor we need to define what belongs to and to do statement here and this is of course the title which is a string and this is the is checked state so whether that to do statement was checked or not and this is a boolean and that's actually everything we need to add to this class so in order to do a depth or class we need to pass the list of our to-do items to the constructor so make sure to create the constructor here for our to-do adapter and here you want to pass a list so to use and this is the list of to do so our to-do adapters job now is to take that list and set the data of that list to the corresponding items of our recyclerview and actually what we also need to do is we need to define that to do adapter is actually a recyclerview adapter and we do that by inheriting from recycle of your data adapter so make that : after that constructor and write recycler view dot adapter and instead of that generic parameter here you can see that we need to pass the corresponding viewholder to that adapter and in our case this is just to do viewholder so it will insert to do adapter dot - to the view holder because to do viola is an inner class of to do adapter we need to write to do adapter before that and don't forget to call the constructor on that recycler view adapter here the next step is to implement three functions that every recyclerview adapter needs to have so let's actually go below here and press ctrl I and here you can see those three functions let's select them all by holding down shift and clicking on the last one click OK and in register you will insert those functions first delete all those to do statements here so the oncreateview hold of function is called when the recyclerview needs a new view holder so for instance if the user Scrolls a little bit so that another item rose recycled and it now needs to create a new item which is visible and in this function we will create the layout for a particular view so for a specific item of our recycler view this get item count function here is actually the simplest function of our three functions here and that just returns how many items we have in our recycler view a common mistake is to actually write return 0 here so that would mean we always have 0 items in our recycler view which would lead in all cases to an empty list in most of the cases you just want to return the size of the list you pass to the constructor of your adapter class so here we just want to return to juice dot size and finally we have the unbind view holder function here the purpose of this function is to bind the data to our items so this function will be used to take the data from our to do list here and set it to the corresponding view so to the corresponding item to do so this will just set the text views text accordingly the text width that we have inside of our item to do this title text view and it will also set the checked state of our checkbox initially this function has two important parameters first the holder here which is a to do view Jolla and we just need this whole a parameter to access the views inside of that view holder so that text view and their checkbox in our case the position is the current position of the current index rather of that particular view that we are binding here and we needed to access our to-do list here at the same position to get the data about the to do statement that should be at this place in our recycler view you will later get what I mean with that so let's start with our on create view Jolla function here so in this function we need to inflate our item to do XML file to actually get it as a view that we can access in our cutland file so that's right well view and set that to layout inflator dot from and that from function takes the context but we cannot write this here because we're not inside of an activity class because we're inside of that adapter class and this adapter class does not know about the current context but because we have that parent parameter here which is a view group so that's just the parent layout we can get the context from that so we can write parent dot context and then we are fine to go afterwards write a dot and call the inflate function on that so inflate and now we need to pass the ID of our item to do layout so our dot layout gorge item to do next we need to pass the route which is a view group and that is just our parent here or a parent layout so we can just write parent here as a second parameter and we also need to set it to root to false so that means that if we would set that true it would automatically attach that layout that we inflate here to that root root view here but for a recycler views we never want that and because of that we always need to set that parameter to falls in recycler view otherwise it will crash and finally we need to return a view holder because as you can see this function year returns it to do view holder so just the view holder that contains our just created view so let's write return to do view holder and pass in our view as a parameter and that's basically it for our own creative you love function and actually in most of the cases your own credit view holder function will look very similar to mine because in this function you almost always just want to inflate your layout so that layout file that you created for a particular recycler view item and it's almost always the same like I have here you just want to replace that layout file of course let's now jump into our online view holder function here and here I want to write holder dot item view because that item view is the view that contains all of our single views inside of our item to do that X and alpha so if we click on that then this item view variable will contain that text view and their check box so for each single item in our recycler view and you can see that when we write a dot after that that we can access our TV title here and our CV done but I will call the Cortland scope function apply here because then we don't need to write hold or that item view all the time and can directly refer to TV title here and I will write TV title dot text and set that equal to our to do list add the index of position dot title so we passed that reduce list in aura to do adapter constructor which is just a list of to do statements and redefined to do statements you have a title and a state whether it is checked or not so we have several of those to do statements that we defined and this unbind viewholder function will be called for each item in our recyclerview wants so for the first item it will be called with the precision is equal to 0 for the second item it will be called with position equal to 1 and when we have that position we can access the corresponding item in our to-do list and get its title and set that title finally to our text views text and we can do the same of course for our checkbox so C be done dot is checked is equal to reduce at the index of position again dot is checked and that's actually it for all right to do adapter the next step is actually to create that reduce list and create such an adapter and pass this to our recycler view so let's go into our main activity dot Katie file and here I want to create a VAR to-do list which is a mutable list off we can remove those angle brackets and inside of that mutable list we now can create several to do statements so just right to do and you can just pass anything you want that will just be those to do statements that are initially in our recycler view so for example follow Android deaths and we can either set it as checked initially or not checked I will set it to false here then we can write a comma and write another to do statement here I already prepared a list here which I will just paste here but of course you can create your own list so when you've done that when you when you have created that list then we can create an adapter so well adapter is equal to to do adapter which takes the studio list as a parameter soap has to do list here and then we can write our v2 dues which is our recyclerview dot adapter so we can set the adapter of our recyclerview to our adjust created adapter and what we also need to define for our recycler view is a layout manager so are we to use that layout manager and here we can just use the standard layout manager which is a linear layout manager that is just to display our items on the screen and set for example the policy when an item should be recycled and of course much more but you don't need to understand this in detail for now so let's write our Veet reduce that layout manager is equal to and our create a new instance of a linear layout manager so linear layout manager we need to import that by pressing Alt + Enter and that takes the context in the constructor and here we can refer to the context with this again so that's everything we needed to do to actually fill our recycler view with list items with our to-do items but we also have that edit text with that button to add items at runtime and that's actually not hard to do if we want to define that adapter so let's add an on click list not who are buttons to do button add to do dot set on click listener and here we first need to get the text of that edit text to create a new to do with that so well title is equal to ET to do dot text go out to string then we can create that to do with that title so well to do is equal to to do and pass the title in the constructor and initially set it to unchecked then we can simply use our at reduced list here and add that newly created to do so do do list dot add to do so that will add our just ready to do to our to-do list but it will not update our recyclerview to actually update it we need to use our adapter and call notify item inserted oops item insert it here and then we need to insert the position at which we inserted that item and because we call the add function here it will always be at the last position so we can just pass to do list dot size minus 1 because the indexes start at 0 we need to subtract 1 year and maybe you've noticed that there's also a function that is called notify data set changed that does not take this position at which we inserted that item and this function will also work but I really don't recommend you to use it because this function will update the whole recycler view so because it does not know which entry it should update it will just go through all items and update them so that is not really efficient instead in this case you should just use that notify item inserted function and pass that index at which we inserted that item and that's finally it we can run our app now and as you can see here's our list with the items that we added initially to our list and some of those are already checked because I set the checked state initially to true and for some I set it to false initially and of course we can check them if we want we can uncheck them and if we want to add a new to do we can use that edit text and for example call my mom and if we now click on add then the item will be added to the recyclerview so if we scroll down a little bit there is our newly created item and of course we can check that if we call our mom or uncheck it if we need to do it so even though this is a rather long video it is really important to understand recyclerview in detail because you will need it a lot and I hope I explained everything well if there was something that you didn't understand then please ask me in the comments and our answer your questions also if there is anything I can improve on please tell me that below that would be really helpful for me have a good day see you in the next video bye bye

Channel: Philipp Lackner

Views: 30,928

Rating: 4.9600887 out of 5

Keywords: android studio, android, kotlin, recyclerview, recycling, efficient, programming, tutorial, beginner, newbie, ui, ux, xml, layout, coding, development, app

Id: HtwDXRWjMcU

Length: 24min 58sec (1498 seconds)

Published: Thu Mar 05 2020