Kotlin RecyclerView Template (DiffUtil and AsyncListDiffer)

in this video I'm going to show you two major things and both of them I think have the potential to change the way that you build your recyclerview for the rest of time and silver cycle of yours are gone and we're on to using them to whatever the newest thing is so the first one I'm going to show you is I'm going to use a template that I've built to create a recyclerview adapter and for those of you who have been around Android development for any amount of time know that building these adapters are pretty much the same thing over and over again they require quite a bit of code and it's basically just a pain most of the time so having a template that you can use so I'm literally going to be right-clicking on the package going to create adapter and the adapter will basically be generated for me and I'm going to show you how to do that in your Android studio also and the second thing I'm going to show you is how to take diff util to the next level so for those of you who don't know what diff util is it's currently the best practice way to update your recyclerview list items so when you're submitting a new list to your recyclerview or submitting updates to your recyclerview it will calculate the best way to update that list using a built in algorithm and it will also show animations to your recyclerview so it looks quite cool so the problem with that is by default if you till is calculate the movements of the items are calculated on a main threat on the main thread so you can lose frames in some cases which if you have big lists or lists with images things like that which I was actually seeing in some of my projects so what I'm going to be doing in this video is showing you how to use a new class or a different class which leverages diff util to calculate those updates in the background so there's no risk of slowing down the main thread which is really the issue here and this this sounds complicated but it's very simple I promise there's only a few extra lines of code compared to what you're doing with diff util and if you don't even know what diff util is don't worry about it I'm going to show you everything you need to know in this video so this is gonna be really valuable too I think I think you're gonna get a lot of value from this and I'm sure you're gonna be using my template in all of your projects because it's just a quick way to build a recyclerview and it's gonna have diff util built-in there everything you need so let's let's get started and let's take a look at the code alright so as I said I'm gonna be showing you how to create a template in Android studio so that you can literally I'll show you what you're going to be able to do before we actually do it so suppose you want to create a recycle if you adapter you would right click on the package that you want to create it in you would normally go to new you'd create a new Kotlin file but what I'm going to show you by the end of this video is instead of going to new Kotlin file you're just gonna go down here you're gonna click on list adapter and then you're gonna enter some fields this is going to be my you know blog post recycler adapter I'll call it that's gonna be the class name of the file the model class is the model that you're modeling in the adapter so that's the thing that's gonna be shown in the view holder for those of you who know how to use a recycler view and yes I expect you to know how to use a recycler view the view holder class so this is just a name it doesn't matter so I can do blog post view holder and then the layout ID in this case my layout is layout list layout blog list item and you can see that down in the layout file here so it's layout blog list item that's the layout name for the layout that this is going to be inflating so I click OK Android studio generates this for me the only thing I got to do is add the imports for the blog post and then this our our this our import whatever that that's called so pretty simple the only reason that's giving me an error down here is because inside bind I have a to do which you need to fill out so this is kind of this is where you would bind all the things in your view holder that's it so we that's the only thing you got to fill out other than the diff util callback right here so pretty pretty awesome pretty straightforward now you know it would take me another 1 minute to fill this out and my recyclerview adapter would be ready to go so by the end of this video this is what you are going to be able to do so I'm gonna delete this and we are going to create the template and actually then we'll actually use the template to make sure that it's working so I'm deleting that and now let's create that template ok so where are the templates kept first of all well you want to go to file you want to go to settings and my settings window is way too big I need to create that make that smaller so here's my settings window you want to here's here's what you'll see so you want to go to editor you want to go to file and code templates and here where all the templates are for Android studio so anything that's generating any kind of code you will find in here in Android studio so what we want to do is we want to create a new one so what you would want to do is click on this plus right here and you would want to Lane name this list adapter or whatever you want to call it it could be recyclerview adapter or list adapter whatever you want and you want to change the extension to Colin if you're using Colin so Katie or Java if you want to build a Java template so I've already created a template named list adapter so I don't want to create it I don't want to duplicate this so we're just gonna look at the one that I've already created so I'm click I'm gonna actually delete this one I'm gonna click the minus sign on that and go to this list adapter that I've created here and I know there's not a lot of room here but what's in here don't worry just just just pay attention to the things that I point out so so far you should have a name and you should have an extension this this will be empty this whole box here will be empty for you don't worry about what's down here don't worry about any of these who cares the thing you are worried about is the content for the template and then in this video I'm not gonna explain really how to make the template I'm just gonna show you how to use the template I'm if you are interested in learning how to make templates maybe let me know in the comments I'll make another video for that but this specific video is for creating the adapter using util all that stuff so what's gonna go inside here well I've obviously already done this ahead of time for you to save you time so there's gonna be a link in the description to this gist right here so go down below there'll be a link to the this is the template so go to this gist and just all you're gonna do is copy this whole thing this is the template that you're gonna put into Android studio that I have so kindly made for you so copy that go back to Android studio and then just select all and paste it in here and that's that's gonna be your template once that's in here we just click apply or click ok whichever or both and you're ready to use the template so this this is a beautiful thing like I said you're going to be using this in all your projects I'm sure so now that we have this template oh the code actually that that I'm working with here I should let you know this is part of a course on my website if you want this exact code that I'm working with you could just go to it's part of the mvi course on my website by the way if you want to watch it just go to Konya pinch comm click on model view intent architecture right here that's what the course I'm referring to here but if you want to just get the code go to github go to MV I example on my page here and that's going to be the code that's that you're going to want to look at the branch that I'm starting with if you check out this from version control the branch that I'm on right now is called state events right here state events so if you want the code exactly as I'm looking at it right now just go to that branch and we we can build the recyclerview but I always recommend watching the course obviously and you'll get like you'll get much more than what I'm showing you here this is only a one lecture out of around I think fifteen or sixteen on MBI architecture so I encourage you to check that out so now let's build this adapter so I'm gonna right click on the package that I want the adapter in which is the main package in UI and there you should see now this list adapter template has been added to your menu so I can click on this and I can fill this out so before I fill this I would actually want to talk about the fields so the file name is obviously just the file name I would call it the adapter now what is this model class well the model class is what you want to show in the recycler view so in our case the app that I'm the demo that I'm building here is showing these little blog posts so there's a title there's there's a title there's an image and there's some other properties that you can't see so if I go into my model package go into blog post that's going to be this right here so there's a primary key a title a body an image even though in the demo app there's no body that you can see you can't see the primary key those are still properties to that blog post item so this is what we are modeling so when I go to create my recyclerview in the main package again go and create that list adapter that's the that's the that's the model so this is going to be blog list adapters but I'm gonna call it the model package or the model class is gonna be blog post which matches the the class that I have right here and I don't know why I pointed at my screen you can't see me point at my screen as if you were standing behind me and then the view holder doesn't matter it's just a name so in this case it's gonna be a blog post view holder it's just a name it's the view holder for the recycle of view and the layout is important this has to match the what's the layout blog list item so this has to match the layout that you have for the recycle view in this case mine is bleh out to blog list item XML so I'm clicking that and now that class will be generated and as I said we have to do a few imports so just get the blog post import get the are import and we're ready to use our adapter so that's how to use the template stuff now we need to fill out this template and actually use it so so the first thing I want to talk about I guess now is DIF util so if you watched my other video on DIF util which I'll actually just bring up really quickly here so if I go to my YouTube channel youtube.com slash c / coding with Mitch I made a divot a few days ago it's not this one so if you go to videos and you scroll down it should be this one right here recycle view performance with DIF util so in that video I showed you how to used if you till which is the the thing I'm gonna show you in this video but now taking it to the next level and if I explain it at the beginning of the video but what diff util does is it calculates it has a built in algorithm that calculates the updates when you submit new items to or cycle of you the problem with using the default if you tale is it does those calculations on the main thread so what I'm going to be showing you in this video is an extension of it which will do those calculations on a background thread and for those of you who are quite familiar with this process this kind of thing it's going to be basically what they show you in the list adapter so I'm gonna do Android X list adapter if I search that this is the class that actually that would be taking it to a next to the next step so this this this class as you'll read right here says this is a convenience wrapper around a sync list differ that implements adapter common default behavior for item accessing and counting so what this what a sync list differ does is it uses diff util so you can see this kind of tiered system so tier one is diff util which calculates those updates on the main thread tier two is using the async list differ which takes diff util and does those calculations on a background thread and then the third kind of tier is using this list adapter class that I'm showing you right here which basically doesn't do anything different it just packages all that up together so it packages together the async list differ and the diff util and so now your question is probably why didn't I use the list adapter because if you take a look at the generator that I used here take a look here you can see that I'm using a sync list differ so why did I use async list differ when I just explained that that only Tier two in my explanation but the list adapter would be tier three and the reason for that is though there's a couple reasons number one is I just like the way that this looks better if you take a look at what the async what the list adapter class looks like when you use it it's quite ugly so I think I have I think I saved an example for you here just to show you I thought I did yeah list adapter implementation so if we look here and we take a look at the the recycle view adapter class for using a list adapter let me just bring it up here this should be this one here right here main list adapter I just think it looks uglier like I don't like this big extension you have this you have to put a call back into the top into the extension so it doesn't really play well with code generators so if I was to build a code generator for this it would be a lot trickier because you have an inner class that's being used in the extension so I I don't even know if you can do that to be honest you can put that up there probably you probably could but yeah I'm sure you could but it just looks more complicated to me so instead I decided to use async dist if async lists differ just because I think it looks better which is for for the first reason it does exactly the same thing and I thought I had a second reason but I can't remember now so we'll go we'll go with I think it looks better it does exactly the same thing like literally identical same thing you just I just think it looks better okay I have one reason I think it looks better Oh I remembered my second reason now because I in a more in a more complex project I wanted to add some custom logic to the submit list method and if you use the list adapter that's it's not you you have to override the submit list method whereas here I'm building it anyway and I could just put my logic in that's what it was not really a big deal just kind of little things it's like programmer problems like who really cares it's the same thing so anyway let's take a look at the async list differ and talk about how this works so this is there's only really two things that you need to do you want to create a diff callback so an object of type diff utility' McCaul back and specify the model and then inside here you want to write you want to fill out these two functions these two dues which kind of determined the behavior of your your async list differ so our items the same in this case you want to compare two parts of the items that you're comparing that are unique so if you have a primary key or something that doesn't change that's what you want to compare here and we do as you saw in the in the model we have primary keys on these so I'm just going to do old item equals new item dot primary key because if you guys know anything about databases which I expect most of you do you know that a primary key is like a unique identifier for a particular object it's guaranteed to be unique so determining if one item is the same as another item you can just check the primary key next you want to check the contents of the item and this is used to actually up make the update to the list items you know so if you have imagine you have a list of objects a list of you know whatever it could be these blog posts and you later want to a change is made to the blog post on the server our new request is made so now you need to update that blog post in your recyclerview because maybe the body's changed maybe the image has changed whatever a specific property of that same blog post has changed so that that's where you want to use the that's what the our contents the same method is for so in this case all you want to do is old item equals new item and that will compare the two objects and determine if they are if their contents are different pretty simple next you need a a sync list differ object-- and that in and that object you just need a reference to the adapter and then you need a reference to your diff callback and that's pretty much it so now that's all you need to do to take advantage of all the all the capabilities that come with the diff util class and also making those updates asynchronously the only the only other thing you need is whenever you're in note so you notice that there's no list of items at the top of this adapter that's because they are implicitly set in in the in the async list differ are not implicitly they're actually explicitly set so if you scroll down you'll take a look at the on bind view holder method for example if you see the the object that we're passing here we're using referencing the async list differ getting the current list and then getting the object that way so basically the list of data is kept inside of the async list differ as opposed to you know usually you would have an ArrayList like you usually have private value list equals your ArrayList and that would be your list of objects at the top of the file but in this case it's kept inside the async list differ so anytime you need to access that you just write differ current list and then you can get the objects the next is the get item count so again differ current list get the size submit list is the method for submitting new list items to the current list it's just differed on submit lists pretty simple and then coming down you have the blog post view holder which we still need to fill out that's why it's giving me an error here and well excuse me I'm gonna burp and by the way for those of you who don't understand what this interaction thing is here I'm gonna burp again what this interaction thing is here it's an interface for detecting clicks so it's it's declared down here it just says on item selected it passes the position of the item that was selected and the actual object that was clicked so it's just an onclicklistener for the for the items and if you scroll up to the top you can see that that is passed through the constructor it's nullable property so you don't need to use it if you don't want to but it's just for detecting clicks to recycle view because that's a very common thing that you have to do detect clicks to recycle of you so as I was saying down in the bind method this is where we want to set the fields to our our our view holder so let's do the first one the first one will be item view dot title like blog title and I can just do text and that's going to equal the item dot title and then next we want to use glide to set the image so Glide dot with item view dot context get the context and then I want to load the URI in this case it's gonna be the item dot image and then I want to load that into the image view so item view item view dot blog image and for some reason this is giving me a warning I don't know what was going on there but seems to be fine now so that's that's all you need to do to set this up it's very simple as you can see you know using the template it makes everything very very simple and you know that this is now going to be the best practice way to update your recycler view items a synchronously so you pretty much guaranteed that if you rotate your screen your list items are set again if you get a new list of items that this is not going to be the reason that your UI is freezing if your UI is freezing so just to kind of finish this up and complete everything let's actually set up this adapter so I'm gonna go into main fragment and just kind of initialize the adapter and connect everything and set everything up so late an it variable it's gonna be main recycler adapter I'll call it it'll be a did I call it main or did I call it I think it was actually blog list adapter I'll change I'll change this name to blog list adapter just to keep it consistent so blog list adapter equals blog list adapter woops this should not be equals this is just a type so blog list adapter so now I want to go and build a method for initializing the recycler view and setting up the adapter so scrolling down I'm just going to go down below on create view is it on create view your honor you created private function it'll be called init recycler view recycler view and inside here I'm gonna do recycler view so I'm referencing the recyclerview in the layout going to apply so now I have an implicit reference to the recycler view within this apply function I'm gonna set the layout manager first so linear layout linear layout manager I'm gonna reference the activity because we are inside of a fragment so I'm referencing the activity for the context I'm writing a I need to create a top spacing item decorator which I haven't created yet so I'll wait for that but you still need to make that class the blog list adapter I can initialize that so blog list adapter and I'm actually going to add an interface for that interaction that I talked about so inside here remember we have this interaction interface for detecting cliques I'm going to implement that in the fragment so that we can take make use of that now set the adapter so adapter equals blog list adapter and it's ready to go other than the interface so scrolling up to the top I'm going to write a comma and write the interaction so interaction interaction get that and then come over to the warning press alt enter implement members get that on click method or that on item selected method and in right here we can just write some logs for printing out when a when a list item is clicked so print line it'll be debug clicked I can just reference the position and then I'll do one more I'll do debug clicked and I'll reference the item so I'll just write item that way we can at least test the click to see if it's working so no big deal here nothing fancy just detecting a click and printing something to the log if that thing is clicked so that should be it I just need to call an it recycler view inside of on view created and like I said if we take a look at the demo here we have some top spacing in between each of the list items so I quickly just need to create a top spacing item decorator and then apply that so going to the util package right clicking go to new cotton file this is going to be called top spacing item decorate decorate Shawn so top spacing item decoration it's going to be class top spacing item decoration we want one parameter which is going to be the spacing so value padding this is gonna be an integer and it's going to extend recyclerview dot item decoration now inside here we just need one override method so I'm pressing ctrl o getting the get item offsets override method it doesn't matter which one you use oh this one's actually the deprecated one so I'm gonna use the other one I did that last time too so ctrl o get the non deprecated one and inside here we just want to do out rectangle dot top and reference that padding that we passed to the constructor and this is giving me a warning because I didn't initialize that so that's our top spacing item decorator now we're going to go back to main fragment and just apply that so value top spacing item decoration equals top spacing item decoration I'm going to send set some padding in there and then we want to set that to the adapter so I can just do add item decoration top spacing top spacing item decoration and actually before we run it I did forget to do one thing we do need to set the data so if I'm scrolling down to the subscribes servers method and again if you're watching this on YouTube don't worry about this you know just just know that right what i'm doing here is i'm submitting list items to the recycler view all this code is going to look very confusing to you if you want to know more about it and you want more about what I'm doing here watch my MDI course on my website again I'll point that out just go to coding with Mitch comm click on model view intent architecture if it's not there and you're watching this like a year later from when I filmed it just go to courses and you'll find it in there so we need to submit those list items to the recycle of view so I just need to write blog list adapter dot submit list and I can write it to reference that list because it's being passed through this what are these called this utility function up here you could also explicitly you know give us a name to the lamda be like list and then print that here either way not important the important thing here is that we're submitting this list to the recyclerview so now let's click the play button and let's run it and take a look to see if everything's working alright so here's the demo app on the screen I'm going to open this so I can get more room in the log over here and I'm going to filter on debug because that's what we're interested in for those of you who are watching this on YouTube you're not watching it on my website this is just a simple app where I click this it shows a progress bar for one second then retrieves the results and then there you can see that that recycle view is being set and you could rotate this you could add a whole bunch more list items whatever you're pretty much guaranteed that this thing is not going to lag because we are using that async list differ and the diff util so pretty cool also if you were to update the list with like new items it has a really cool animation which I don't have the capability to show you that with this project but take my word for it the animation is pretty cool yeah so that's that's gonna be it and now let's test the clicks so if I click on one of those notice it prints out the position right there so I clicked item number six that one's gonna be item number seven I'm number eight so the click listener is working perfectly so that is gonna be it for this video hopefully you found it helpful like I said I'm guessing you guys are gonna be using this in all your projects because it's a nice little template you don't have to worry about you know creating a recycle if you adapt it from scratch every time it's got a built in click listener it's got the built-in async list differ so your list items are going to be updated asynchronously also with an animation actually let me show you the animation I think I have another project on this on this emulator and we can see the animation so here okay so here's the the other the of course I'm working on the powerful Android apps course Oh interacts with the REST API that I built so if we look at this this actually does have the animation so I'll do a filter so I'll actually just click up here and I'll filter this on Kotlin and I'll click enter and you can see that kind of that that animation that it showed there and if I look at one of these list items and I was to do another search I'm going to close the keyboard so you can really see it all you can't well anyway I'll do a search I didn't show the animation because it stayed on the same list item but anyway you can see that if it does if you do filter it shows that kind of animation and it it's it's even cooler than that like if you you filter them certain ways they'll like reorder themselves and shift around it looks really cool take my word for it or play around with it yourself so anyway that that is going to be it for this video and just to kind of reiterate on everything that I showed you we we built a template and that template is going to be available as it just there'll be a link in the description if you want to know more about the app that I was building or more about different architectures go to my website check out my Model View intent architecture course or the app that I showed you at the end there is the powerful Android apps with jetpack architecture course so those those are the ones you're gonna want to check out or go to courses you I have plenty of free ones plenty of paid ones mostly I focus on jetpack these days but there's tons of other stuff like building a spotify clone so like how to play build a music playing app I have a camera course which is outdated but it's still there and tons of stuff for beginners too so if you're a beginner scroll down go to beginners and you want to follow this kind of learning path right here and that's going to show you how to get started with Android development so that's gonna be it I'm ending the video I've talked too much I'll see you in the next one you

Channel: CodingWithMitch

Views: 12,166

Rating: 4.9690723 out of 5

Keywords: kotlin, android kotlin, android recyclerview, android diffutil, android recyclerview performance, recyclerview performance, how to speed up recyclerview, speed up recyclerview, diffutil android, kotlin diffutil, android recyclerview diffutil, diffutil recyclerview android, recyclerview diffutil tutorial, recyclerview diffutil example, asynclistdiffer, listadapter, listadapter android, android asynclistdiffer, recyclerview template, android recyclerview template

Id: xSL_lSDVxnQ

Length: 26min 34sec (1594 seconds)

Published: Fri Sep 13 2019