How to Use View Binding With Recycler View Adapter

what's up youtube this is dennis ponyta for tutorials.eu in this video you are going to learn how to use view binding with recyclerviews and both of them are very important viewbinding is the way to go to access your xml layout ids directly in your kotlin code and google has decided that this is best practices so we should definitely embrace it and a more challenging aspect of view binding is when you have to use it with recycler views so any kind of list views that you want to use in your applications so i've created this video in order to exactly explain how that particular thing can be done because i believe that this is quite challenging and also something that you will come across anyways when becoming an android developer so i hope you enjoyed this video if you do then please hit that like button it really helps us out and also subscribe if you haven't subscribed already and also of course leave a comment if you have any ideas of what we should make a video on okay so let's get started [Music] hey and by the way we also have an article that you can find on our blog that is going over everything that you will see in this video with the code and also the resources so you can just download them from there definitely check them out and maybe you just want to read through it instead of just watching the video or just use it as additional material so check out the link in the description to get to the blog post all right so we have this recycler view here and i want to use this with view binding and up to android 10 kotlin extensions would have been the solution here so you wouldn't even use view binding before that you would probably just use find view by id and so forth but nowadays you can of course still use find view by id in order to connect a view to their binding classes but the latest approach and the one that google recommends is view binding and view binding in normal views is quite simple but when it comes to view binding with recyclerviews then it's a different story and in this video we are going to look at how we can enable view binding and use viewbinding with our recyclerviews so let's get started alright so i'm going to start with an empty activity and by the way i'm using android 12 here in the background even though anything later than that shouldn't be a problem either way so this one will be viewbinding rv all right everything else stays the same you can of course change the android version if you feel like it but android 5 should be fine all right so once in your project of course you have your main activity and all of the good stuff but what's going to be important is that you go over to your buildbot gradle and you add a dependency and it's going to be this build.gradle app and we need to make sure that we have the build features in here so inside of here you add build features like so and then in curly brackets you add that you want to activate view binding so use it just set view binding to true all right and once you're done with that you can sync it it's really important to sync otherwise viewbinding will not be activated and all of the following steps won't work so in order to create a recyclerview and display a list we will need the following setup so we need a recycler view an item layout a view holder and an adapter and if you don't know what all of these things are you should definitely check out my video on recyclerviews because even though it's one and a half years old it's still exactly the same so first of all i'm going to go to my resources and i'm going to go over this really quickly right so activity main xml and we're going to use xml here and not jetpack compose which we're going to create a video on later but here instead of using all of the stuff that you see here i'm going to use that stuff here so basically what we have is we add a recyclerview in here instead of using a textview so generally you need to use this recyclerview keyword inside of androidx recycleview widget and then it will create this recyclerview and unfortunately there's too much happening here so this is basically going to be the appearance you have item one two three and so forth now you can of course modify how each item has to look like and therefore you create a new item layout okay so let's really quickly do that therefore i can just right click in here and create a new layout resource file let me call that recycler view underscore item and then the root element here could recycle view and we can also leave layout that's going to be fine so now let's go back to the code because it's a lot easier to edit at least in my opinion and then what we want to achieve is a simple to-do list right so like we have it in this app where we have well take a walk then eat breakfast and so forth so of course you could uncheck them or check them with an additional item at the right hand corner but this video should really focus on just how to reuse view binding in a recycler view okay so here i'm just going to first of all make sure that i'm using the constraint layout and my constraint layout is going to look like this these namespaces for now they are not used but that's fine so i'm going to add a little bit of padding then i want to have a text view inside of this constraint layout as well as another text view and then finally i want to have a view in here so you see here it has the title then it has the time and then finally we want to have a little view which will create a background so basically if we look at it this is what it's going to be so we have for every single item this appearance so title and then let me scroll even further title time and then this little line that we added so this view here is the line which has this grayish background you can see it here you can of course change it by selecting a custom color that's really cool in the newest android studio versions you can just click on the color and change it i love that all right so then we now have the individual item that we want to use for our activity main so every single item here should look like this recyclerview item that we have just set up so now if you want to display this without having to test it straight away you can go to your activity main xml and you can make a change to your recycler view here and what you can do is you can just add a tools statement so here tools and you can define the list item property so here i'm just going to say in my layout folder i have this file called recyclerviewitem and now it will use this xml file that we just created as the tools display so it will just display it here basically it's not much more than that it's not going to impact our code itself that's something we will have to change but for our development process this will be a lot nicer to look at i believe okay so now you can see how each item is going to look like and that happens by choosing this tools option here we just say okay i want the list items to be my recycler view items and now comes the more complex part and that is going to be to create an adapter well the adapter needs a model so let's create a data class and name it task so inside of my examples here i'm going to create a new kotlin class i'm going to call this one task like so and this will not be a general class but it will be a data class okay so data class which will be of type task and here i use brackets not the curly ones but the rounded ones and i want to have a title which will be of type string and i want to have timestamps so here time stamps like so and they're not going to be of type timestamp but they're going to be of type string as well all right so then of course we can get rid of this import okay so this is going to be the data class that i want to use now of course we will need a task list as well which i'm just going to create an object of i'm going to keep it super simple so here let's create a new kotlin class file and i'm going to select object here i'm going to call this one task list and this is really just our data source so to speak okay you need the data source and you could get the data from your room database if you want to use that or from your api or whatever but we're going to keep it simple i'll just create a list of a bunch of items so here a task list and this list of items is going to use the task and by the way i'm seeing here that i misspelled timestamp so it should be with a capital s so that it fits my object structure that i'm using so here i'm creating a list of tasks and each task has a title as well as a timestamp so it's just a text in form of a string here which is going to be a number and eat dinner at 7am so if you were partying really hard and you didn't have dinner before then maybe having breakfast is like having dinner so we can of course change that to pm as well all right so now let's go over to our main adapter that we need to set up which of course now we'll use our task as well as the task list as the data source okay so right click here create a new class and i'm going to call this one main adapter so you're learning something about android app development in this video and maybe you want to learn a lot more about it then you can check out one of my two courses so if you are a beginner android developer then i would highly recommend to check out my android master class course there you will learn to build android apps from scratch and you become a real android developer or maybe you want to become a better android developer because you are one already and you want to become a real pro then i would recommend to check out the jetpack master class because there you will learn how to use jetpack which is a suite of frameworks that will make sure that you are a senior app developer all right so i would really recommend to check out those courses if you want to step up your app development skills very quickly you can find a link in the description below which will send you to the course with a huge discount all right so thanks a lot for checking out those courses this really helps us out and this enables us to create these videos either way i wish you a nice journey to becoming a great app developer and now let's get back to the video okay so now in our main adapter let's go ahead and make sure that this is going to be of type recycler view because that's what our view is like right as a recycler view and then i need to make sure that this is going to be the adapter and i'm going to use main adapter the main view holder like so okay now the main view holder i will need to create an inner class in order to be able to use it here so let's create an inner class main view holder here which will have an item binding called recyclerview item binding and then it's going to be inheriting from recyclerview.viewholder like so and here we need to pass the item binding and we can use the root value from it so the constraint layout that we are using okay so let me put that into the second line so that it will be a little more readable so this is going to be the inner class and inside of this inner class we need to do one thing and that is to bind our item so here we bind the item with the task so we say the data for the item should get or should be begotten from the task so now that by itself is not going to be enough we need to state what information of the task should be used for which element of our recyclerview item okay so here if you look at it this recyclerview item has two properties that are relevant one of them is the textview that says title tv and then the other one is time tv because this third one is just a view that doesn't have to be used at all it's just this gray line right so how can we connect our main adapter to the recyclerview's title well we can simply do that by just saying here that we want to use the item binding that is passed to the main view holder this one here and we want to use it's time to well here it's the title tv text so the text property of the title text view to be connected to the task title so not the time stamp but the title and now the same goes for the other item that we want to access and here the other item the other text view was this time stamp textview here and this is not going to be title but time tv so here the text should be task dot time stamp like so so now we're done with the view binding but that by itself is of course not enough because we also need to implement mem so the members that are main adapter needs so let's implement them select them all three with the shift key and click ok and now you see we get the uncreate view holder on bind view holder and on item count now let's implement those the easiest one is always the item count in my opinion because it's just a one-liner basically and here we're just going to return the length of our or the size of our task list so here task list size now where is the task that's coming from well let's check it out the thing is we need to pass it at the main adapter level so here at the very top we are creating our main adapter which inherits from the recycler view but we didn't pass any details to it so now let's pass the task list to it which is basically a list of tasks right so it's going to be this task list here that we want to use in our main adapter and now we're passing it over here and we are finding out what is the size and then we're displaying the amount of items that we want to display there now what should happen once we create our view holder so once our recycler view is created well here we need to return a view holder because it says it returns a main view holder so let's do that let's just return the main view holder like so and let's pass the items and in order to pass the items we need to re-inflate the binding layout so we will return the main view holder inflating the binding layout this is how the item layout is inflated when using view binding so this is the part that is a little different to you and well to old fashioned approaches so here we're not binding but we're inflating it here so now let's inflate it and if you want to inflate it you see you need to have a layout inflator and you can add additional info about the parent and the attached parent so here i'm just going to say i want to use the layout inflator from the context of the parent so here from parent context so this by itself as you see doesn't cause any issues so the code seems to be all right but if you want to be sure you can also add the parent as well as the flag falls for the attached to parent so now what should happen once we bind the view holder so unbind viewholder well here i just want to make sure that the task is going to be displaying the task list position item so here task list and the item at the position of the individual item because if we look at our recyclerview here you can see we have the individual items but every single item needs to know which data it should get and it's going to get the data based on its position so take a walk here gets the position zero which is this take a walk then the next item in the list will be eat breakfast so it will be this item and so forth right so this is position 0 in the list this is position 1 in the list position 2 and so forth so that's basically how our main adapter gets the data so now the task itself is not enough because well we're not using it right so now let's actually use it by using the holder and bind the item so now we are binding our task to the holder to the main view holder and what this will allow us to do is basically to well bind data to the recycler view using viewbinding so let's recap what we did here so first we created a variable for the adapters list in the main adapter constructor then we return the main view holder in the on create view holder and inflate a layout by passing in recycler view item binding inflate so this whole part here where we are passing this recyclerview inflate stuff okay to the constructor so we pass it to the main view holder constructor then we bind each of the items in the onbindviewholder and we get the item count that's always something we need to return so that the recyclerview knows how many items it needs to display so now we have a list of items of task items so to speak and let's actually bind all of this stuff in our main activity because currently it's empty right so this unfortunately if we run this application it's not going to be enough it's not going to do anything because the main activity doesn't know about the recycle view and the main adapter that we have set up and all of this stuff it will just be an empty screen so to speak an empty white space because well it's going to use our activity main but it doesn't understand what the recycler view is that it should display so let's fix that you see here okay find view binding rv doesn't find it okay so the first thing we need to do here is we need to set up our binding so let's set up activity main binding which can be a nullable so let's add the question mark and then i'm going to say no because i want this to be null at the beginning and then i'm going to instantiate it inside of my oncreate so here let's use binding equals activity main binding bind and here we don't bind it but we inflate it so you see the ide always wants me to bind it but i'm actually wanting to inflate it and i'm going to use the layout inflator here in order to inflate it so if you want to know more about any of the items you're wondering about just hold the ctrl key and click on the item and you will find more out more about it so it's this public layout inflator which gets the layout inflator and returns the get window with the layout and fader so you can even go further to find out what this method is and it's an abstract method all right so now that we have that bound let's set the content view which we did here using the r layout but i'm going to use it differently so let me get rid of this line i'm going to now use my binding that i just set up so content view where i'm going to pass my binding which is a nullable root okay so because it's a nullable well we don't need that semicolons here but it's available so i'm going to add the optional question mark here and now we need to set up the adapter because we need to bind the adapter so here let's create an adapter object of our main adapter because otherwise why would he have prepared it so main adapter with the task list of items so we're going to use the task list object here which contains this task list which contains this task list of list items okay so that's the object name and that is the name of the list of task objects so let's use that in our main activity here we assign it as the data for our main adapter because if you look at the main adapter it requires a task list because that's what we set up in the constructor here so we say we want to have a list of tasks and beautifully enough this is a list of tasks now that we have set up that let's go ahead and combine everything so i'm going to use my binding and i'm going to get it's task rv so what is this task rv well it's this recycler view that we had set up in our activity main xml okay so here this is the id task rv so we are accessing it by using the binding keyword which is well using activity main binding we're inflating the layout now we're using the recyclerview in order to assign an adapter to it and this task rv can also be null so let's make that clear here as well and let's just use our adapter all right so now we have assigned the adapter and now the only thing that's important and left to do is to make sure that we are destroying so on destroy our binding object once the on destroy method is called so we just set it to now that's just common practice and it's really important to do that because otherwise well it's just not clean it could break your application so we are saying okay once the on destroy is called let's deactivate all of the binding so notify this binding object so how is this different to what we did before well here in the set content view that's really the main point we use this binding here instead of directly passing the layout so what we had before was the set content view which would just go ahead and say r dot layout so inside of the layout folder i want to use the file called activity main right so this is the default that we have but we don't want that even though of course we want to use this main activity but we want to use it using data binding which is why we don't use this line here but we use this one here and for this to work we need to make sure that our binding is set up and inflated and therefore we need to use this activity main binding and inflate it with our layout inflator and we get the root which is this constraint layout okay so we just say okay use this constraint layout and use it in our content view so set it up with the entire activity main page but using its root and the root of course contains all of the details but then we're setting the main adapter which is this one here and now we just need to make sure that we assign the right layout manager to our adapter so we could either do it in kotlin code directly or we can go over to our activity main xml and here we can assign a layout manager and the one that i want to use is going to be a linear layout manager which is just going to display the items on top of each other okay so now let's run the application and see if this is going to display the details and you see here there they are so now let's add another timestamp here go to bed and then here we should add a comma and this one will be midnight snack midnight snack which is not a good idea by the way i'm not sure how this works probably 0 am like i don't know how the american system works here but now let's run it again let's not ask it again and we can see here we have our midnight snack at 0 am all right so that's basically how you can bind using a recycler view with an adapter and combining everything you can use your task rv here and use the layout manager like so and assign the linear layout so here l linear layout manager like so and you need to pass a couple of parameters to it so first of all the context and then the direction you want to use so i will just use vertical in here and i'm going to use false as the reverse layout okay not reversing it so then in that case you could get rid of this line here and not assign the layout manager inside of the xml file but instead inside of your kotlin code so let's rerun the application and see if our code is still going to work and we can see it's the works flawlessly so this would have been the alternative way of doing it so this is in code and this is in the ui item all right and that's it for this video i hope you enjoyed it if you did then please hit that like button and the subscribe button also check out our android master class we are updating it to android 12 now so definitely check it out and also don't forget to subscribe to our newsletter you can find the link in the description below [Music]

Channel: tutorialsEU - Android

Views: 359

Keywords: view binding, view binding android, view binding android studio, view binding kotlin, view binding in android, view binding android kotlin, kotlin tutorial, kotlin course, what is kotlin, kotlin, kotlin android, kotlin programming, android studio, android studio tutorial, android tutorial, android tutorial denis panjuta, denis panjuta kotlin, denis panjuta youtube, udemy, recyclerview in android studio, view binding with recyclerview, view binding recyclerview adapter

Id: pMLmVJqL_ys

Length: 26min 37sec (1597 seconds)

Published: Mon Oct 11 2021