RecyclerView Performance with DiffUtil (Kotlin)

every single Android app uses recycler views or they display some kind of a list of data and when you're displaying a list of data or when you're using a recycler view no matter what you need to get the data so make a network request get it from the cache whatever once you retrieve that data you then set the data to the recycler view and it's displayed in the list so typically how this is done is like I said you retrieve some data and then if you're using mvvm or MBI in your observer you then get that data and you set it to the list usually it's pretty straightforward just like list of data usually an ArrayList and then you set it to the list that's inside of your adapter so the thing that I want to show you in this video is a way to optimize that process there's actually a class named DIF util which was built by Google that has a built in algorithm that optimizes the process of taking a new data in or getting some data and then setting that data to your recycler view and it's it's so so easy to do that I really think that you should just use it in every single one of your projects if you have a recycler view no matter what you should be doing this it's very simple to do I'm gonna show you everything you need to know in this video basically we just need to create a little class inside the recycler view adapter and then write a tiny bit of logic a couple lines of code and set that new data to let the list so before we get started before we actually look at the code I'm going to show you what I'm talking about so I'm going to show you the the class that I'm talking about that optimizes your recycler view performance so it's called diff util and I'm just gonna read a bit of a bit of this page because it's got some useful information I'm gonna kind of paraphrase it obviously I'm not gonna make you sit here and listen to me read this whole thing so here we go so diff util is a utility class that calculates the difference between two lists and outputs a list of updated up outputs a list of update operations that converts the first list into the second one so what it does as it says is it takes in the new list it compares the two lists so the new one and the old one and then it makes it is the process of updating that data so what it does without reading the rest of this is it uses an algorithm known as the Eugene W Meyer algorithm which I don't know how that works just right right away coming out and saying it I have no idea but basically as you can see from the from the post here it says it's an algorithm that calculates calculates the minimal number of updates to convert one list into another and as I was as I started to say before I started talking about the algorithm is the way it works is it takes the the new list takes the old list and then it compares every list item in that entry based on a certain parameter and if if that list item already exists it just replaces it so it update good sorry doesn't replace it it just updates that list item if that list item doesn't exist in the old list it then adds it to the list so it's it's not setting a completely new list it's only updating it and adding new ones where it absolutely has to so basically at the end of the day just an optimized way to set the data and if you scroll down here it's got some kind of test cases down here it says you know if you have a hundred items with ten modifications so in other words ten updates so you have a list that's got ten items and you want to update ten of those items on average it takes point three nine milliseconds which is absolutely nothing and if you go all the way down to the end here where you have a hundred thousand items with 200 modifications it's only thirteen point five four milliseconds which is absolutely tiny and chances are you won't have many lists that are longer than that so very performant it's a very performant operation so so that's kinda I just wanted to talk about the introduction to this and I'm going to be taking you through an example now so we're going to look at a recycler view that I've built ahead of time obviously and we're just going to implement this diff util functionality which you'll find is very very simple it shouldn't take longer than five minutes and you'll have a much more performant recycler view than you did before and you should probably use this in all of your projects if you take a look at the google samples which i spent a lot of time in the google samples i noticed that they use it in pretty much all of their projects so it's highly recommended also as a heads up if you want to see a more practical example or a more complete example and also with some added architecture so some added features head on over to my website coding with Mitch comm go over to the coming soon section over here or go to courses and select the modelview intent architecture course this course is an introduction to model view intent architecture which is my new favorite architecture you can check out my channel I have videos on it and in this I show you a more complete example of how to used if you tell how to set up recycle of use and also how to use MDI architecture so if you're a newbie to architecture you don't know what the hell architecture is I highly suggest checking that out now let's look at the code for this video so before we get started before we actually write any lines of code I just want to show you kind of what we're going to be dealing with here what kind of recycler view we're going to be setting up so on the screen here I have the demo app I'm going to click on get blogs one second goes by and then it retrieves a list of blog posts so this is the recycler view that we're going to be setting up pretty basic just got an image and some text and you can scroll it down to the end there's not that many so it's retrieving actual information from the network I'm not going to be showing you how to do any of the major stuff this is actually the app that we build in the MBI course so this is just gonna be strictly for setting up the recycler view but don't worry I'm gonna show you everything you need so that you can apply the diff util in your other projects where you have recycler views alright so as I said this is going to be very very simple before we start I want to take a look at the build Gradle file just so you can see the dependencies that I have but you don't you don't need anything all you need is the recyclerview dependency sorry you do need something you need the recyclerview dependency and obviously I have other things in here because this is a complete project but just strictly for the diff util stuff all you need is the Android X recycler view or any of the support recycler views they also support the dip util so that's the build.gradle just pay attention to the recycler view dependency that's all you need now let's go into let's go into main recycler adapter and let's go into main fragment and I'm going to show you two things the first thing is I'm going to show you how the data is currently being set and then we are going to get started using diff util to optimize that process so main fragment is the fragment that I showed you in the demo just at the beginning of this video basically all that's happening here is the data is coming in and then it's being set to a recycler view adapter through this submit list method and here's the list of blog post so you don't really need to know anything else about how this is working just know that it's submitting a new list of data to the recyclerview adapter now let's go into the recyclerview adapter and just take a look and see how that's working so here's the submit list method you can see that it's taking in a list of blog posts and it's just setting that new list when it comes in and there's the list up at the top there and a Rea list of blog posts so pretty pretty classic way to set data to a recycler view we're just using a view holder to set the set the few items and you know I'm not gonna talk about how to set up a recycler view I expect all of you to already know how to do that so now how can we optimize this using defeat ale and take advantage of the algorithm that's built into it so the first thing we need to do is build a new class inside of our adapter this is going to be called blog item diff callback so variable old blog list equals list of blog posts because that's the objects that I'm setting and then we need var new blog list that's also going to be a list of blog posts and that's it that's it for the constructor so now we want to extend this by diff util callback and inside here we need to insert some override methods so you can see it's giving me a warning up here I'm gonna move my mouse up here click alt enter go to implement members and get all of these members so highlighting all of those and clicking okay now let's write these out one at a time so I'm going to delete the two do's inside of here let's delete that delete that delete that the first method that we'll work on is our items the same actually maybe before I start writing this all explain kind of how this works so get old list sizes obviously just the list size old blog list size the new list size is obviously just the new size so return new blog list size pretty straightforward the two methods that are kind of confusing or could be confusing is our items the same and our contents the same so these do two different things and rather than trying to explain this myself I think they actually do a pretty good job in the documentation so let's take a look here so how I got to where I'm at is I'm at the same page I showed you at the beginning of this video the diff util class if you scroll down and you go to this callback here so I click that this is where I'm at right here because that's what we're using we're using the diff util callback class so let's take a look here and see see what it says so our contents the same is called bide if you tale when it wants to check whether two items have the same data so that means in our case with a blog post the image the title the primary key the body everything art is that information the same when you compare two blog posts the second one is our items the same so this is called bite if you tale to decide whether two objects represent the same item so in that case we we don't necessarily care about all the data maybe we just care about the primary key because the primary key is the unique identifier for that object so our items the same we can just compare the primary keys because if you take a look at the documentation which I just had open our items the same called bide if you till to decide where the two objects represent the same item so all we want to do in this case is compare the primary key and actually I don't think I showed you the blog post object yet so I should probably show you that so there's just a title a body and image and a primary key obviously if you guys know anything about how data is stored in databases which I expect you guys should you know the the primary key is generally the unique identifier so these things never change it's set once and it's unique to every single different object so a title a body an image can obviously change whereas the primary key never changes so that's the thing that we're gonna check in our items the same because it's a unique property that should never change so I'm going to do return old blog list dot gets the old item position and I want to get that primary key so if this equals the other ones primary key so I'm actually just going to copy this copy that and do a new blog list get the new position if that if those primary keys are equal then we know that yes those blog items are the same object so now let's come down to our contents the same this one is going to be a little trickier so we could write some logic like we did in the our items the same but there's an easier way to do this because really what we want to do is we want to compare all the fields we want to compare the title the body the image and the primary key so we're going to go into our blog post model which you could do for any of your projects just go into the model class that you're displaying in your recyclerview press ctrl o go-to equals and now we're going to write an equals method that determines what it means to have their contents the same so I'm returning true at the bottom and now I'm going to write a bunch of logic in here that will return false if if anything is different basically so if any of the parameters are different then it will return false so first things first you generally always want to check to see if the Java class so the actual class of the object is the same as the one that it's being compared to obviously if you compare a blogpost object to a string object they're not the same object in that case you want to return false right away because you know they can't possibly be equal because they're not even the same object if we pass that bit of logic we can cast the other to a blog post object so we know that yes this is a blog post object now we can check all of the individual fields so if the primary key so I can do primary key does not equal other primary key then return false obviously that means they're not the same now I'm going to copy this for the rest of the parameters so PK so we want to do it for title body and image so title if the title does not equal the title return false if the body does not equal the body return false if the image does not equal the image then return false so that that's what we can use to determine if the contents of two blog posts are the same when they're being compared so let's go into main recycler adapter and we can compare those two so just want to return the old blog list dot gets the old item position if that is equal to the new blog list get new item position and that's it so that's going to be the blog item diff callback now this this is obviously just the things that we need to fill out but in the background when you make use of this it uses that algorithm to figure out whether it needs to just update a list item or add a new list item it's basically just optimizes that process so the last step is going to be going into our submit list method which is responsible for sending the data to the adapter and writing some new code in here to make you of our blog item different to do the old list is equal to the current list which in my case is items then we want to create an object called the diff result so diff result is going to be of type diff util dot differs alt and set that equal to DF util dot calculate diff and inside here we want to create that new blog item difficult' so a blog item diff callback which is the object that we just or that class that we just created and inside here i want to pass the old list and i want to pass the new list or sorry yeah the new list so blog list we're just being passed as input up here after that's done we set the current list to the new list and we make use of that callback so i want to do differs alt dot dispatch updates dispatch updates to this recyclerview and that's it that's all you need to do to set up if you till and how to to optimize your recycler views but but anyway that's gonna be the end of this video hopefully it helps I'm not even gonna run it because it's pretty straightforward just creating the diff util callback submitting new list items again if you want to see a more complete example check out my new mvi course on my website you can get to it by going to coding with Mitch comm going to model view intent over here or clicking on courses and finding it in there it's going to show you you know an introduction to MDI architecture there's a nice description here you can see what the target audience is what you're going to learn source code is available on github you can watch the demo application which is free or the course demo by clicking on that right there and you'll learn about a lot of things Kotlin mvi architecture which is very similar to mvvm and yeah so that's that's going to be it hopefully this was helpful hopefully you'll be able to optimize some of your recycler views moving forward with this extremely easy to use algorithm and system I hope you enjoyed the video I'll see you in the next one you

Channel: CodingWithMitch

Views: 18,098

Rating: 4.9205298 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

Id: y31fzLe2Ajw

Length: 15min 42sec (942 seconds)

Published: Mon Sep 09 2019