BeginnerUnderstanding RecyclerView Components. Part -2.
Hi, if you’re joining from this tutorial, you should check out my previous one: Understanding RecyclerView. A high-level Insight. Part -1. I am attempting to explain the RecyclerView in very simple way so that all the developers new to Android World can fully understand how the RecyclerView Works. If you have a prior understanding of RecyclerView, head over to the article on RecyclerView I like the most. This article does not cover implementation details. It will be covered in the next section of the series.
Before we begin, I would love for you to try my latest gaming application that implements all of the features that I am going to talking in this series. Any feedback is appreciated. Open this link in your mobile, if possible.
Try it: Gamezop
We are already done with the high level understanding of the RecyclerView. Let’s dive deeper. To fully understand it’s working, we need to delve upon it’s components. I think whatever we code , whatever we develop, affects the whole user base. Millions of people rely on us to make their experience smoother and peaceful. If we can do this by paying attentions to details, I think you should go ahead and read this article.
It’s like, if you need to understand a person, you need to know his/her qualities, habits and story. This is just the same. (Okay, a bad example!)
RecyclerView Components
What Google has tried to achieve with a RecyclerView is (drum roll please!) modularity. It has removed all the major tasks from it and gave it to all the other members so that RecyclerView Class itself remains light unlike ListView.
Thus, there are major 3 components of RecyclerView and I’d like to add one in the list, so in total of 4 Components.
- RecyclerView.Adapter
- RecyclerView.LayoutManager
- RecyclerView.ItemAnimator
- RecyclerView.ViewHolder
Now, now. Don’t run away on hearing these words. We’ll cover each one while clearly paying attention to details.
1. RecyclerView.Adapter
Earlier in the ListView Widget, we were equipped with different adapters for different purposes like the ArrayAdapter and SimpleCursorAdapter. Say bye bye to them because Google introduced a new RecyclerView.Adapter for the RecyclerView. What is this RecyclerView.Adapter thingy?
Let me get straight to point. There is a member in the RecyclerView Family who has the task assigned to pickup the data from a dataset (eg. a database or array) and pass it on to something called LayoutManager who has the duty to present it to the User. All mixed up? Wait. Let’s get things straight.
A little clear? Okay. So Adapter takes out the data from the DataSource or dataset and pass it on to the Layout Manager. So the Adapter is just the dumb object that handles the passing data from one point to another. You’d be thinking why was it so necessary to call it an adapter and why to add an extra layer?
Well actually, an adapter in general is something that takes electricity from the switchboard that you attach it to and provide it to the appliance it is connected to. A normal switch plug does the same but an adapter has some powers in comparison to a normal plug. The same way the RecyclerView has some extra powers too.
Now let’s get onto the more important part of the Article.
2. RecyclerView.ViewHolder
ViewHolder is the keystone to the RecyclerView and the Adapter. So to understand ViewHolder, we need to undertake an example.
Let’s suppose you and your 4 friends go to a party and there are two stalls in the party that give away small pizzas. And there is a huge line at the stalls because at a time it can entertain only 5 members (because of limited number of seats). And cost of a pizza is $12 and of plate is $10. And the total line has 200 members.
The way the first guy works is — He provides each of the 5 members with one plate and on preparing pizzas, he put it on their plate. What extra thing he was doing was, he kept 4 plates extra ( so 5 + 4 = 9) and gave 2 to the members in line waiting to have pizza in advance and 2 to the members who already had their pizzas. The 2 waiting for their turns are provided with plate so as to make the work easier for the pizza guy. And 2 plates to people who had pizza because what if they nee to have pizza again? And then they (two people who already had pizza but were holding plates) pass the plates to the pizza guy so that he can clean them up and give them to the new 2 members in line waiting for pizza.
So the pizza guy, with only 9 plates, does his work efficiently and does not keep plates per person. Because it would have been too costly for him! So he gained a huge profit (12*200 -9*10 = $2310, a huge profit!).
The way second guy work is — He keeps each plate for every new member that comes at his counter. All the pates are very costly. The guy seems happy at first but as soon as the first batch had their pizza, He starts giving them new plates and put pizza on it. Though this may seem good but the catch here is that all the plates are very costly. The pizza guys gets worried because of number of people that came were huge and thus end up having a very little profit because ((12–10)*200 = $400, very little profit). And people had a bad experience because the pizza guy had more interest in how much profit the first pizza guy was having and thus affected his performance.
So the second pizza guy is ListView and the first pizza guy is RecyclerView (Efficient one).
From the example above, we see that the guys were listView and RecyclerView. The plates were Views and the Pizza was Data. And the counter was the view port (visible part of screen).
In RecyclerView, Each view (the plate) is attached with a ViewHolder (the idea behind using less number of plates). So the ViewHolder is the magic that helps in reducing the number of View Creation. A View Creation (Buying Plates) is a CPU Intensive task. So keeping heavy tasks away from the main UI thread will help in improving the performance of RecyclerView. The UI Thread is the main thread that helps in displaying the screens to the user (in the lamest language).
By attaching a ViewHolder to the View, we store the cache of the View objects. So whenever we scroll up a list (RecyclerView), the data on the top most ViewHolder is shifted onto the ViewHolder kept above the screen (not visible to user) and the View is kept for recycling (the two extra plates for the people who already had their pizza and might want to eat again) and if the user scrolls down, the ViewHolder already stores the cached data, and thus the Views and the data from ViewHolder can be presented again to the user. This process makes the lists efficient and provides smooth scrolling.
The point to note here is that people started using ViewHolder pattern (the idea) with ListViews too for smoother scrolling. But it was an overhead. Google made it mandatory for everyone to implement the same for efficient performance with the advent of RecyclerView and removed most of the boiler-plate code. Also, RecyclerView came with much other options which paved our way for migrating from ListView to RecyclerView.
The major work of the RecyclerView.Adapter thus becomes to create the ViewHolder and attach them to the Views. Rest of the stuff is handled by the ViewHolder. You see, that is why ViewHolder is the keystone to Adapter and the RecyclerView.
3. RecyclerView.LayoutManager
The LayoutManager is a class in Android that helps in taking the Views from the Adapter and arranges the data on it. By arranging I mean, to display data on the View at a particular position and to position Views on the screen in a particular way. You’ll understand by the picture given below.
Earlier with ListViews, we had only the option of vertical lists. And for any other way, we had to use a different widget. Google solved this by adding a LayoutManager for every layout and using it is far too easy.
4. RecyclerView.ItemAnimator
As I wrote in my previous article, Animations in ListView was altogether an another uphill task. It took days for implenting the animations and Google made it just too easy to use animations. RecyclerView comes with default animations which we can override and change according to our needs.
Let’s have a recap by just looking at the picture given below.
I guess you undestood the working of RecyclerView.
EOF
The 2nd part of the series has now reached it’s end. If you have any doubt, please comment. And if you find any mistakes, apologies in advance.
The implementation details will be covered in the next part. Watch out for the next section :)
I am an amateur Android and Web Developer and a Blockchain Enthusiast. I have just started writing technical articles and I am new to all of this. Kindly review the article and give response to the same. A response and some claps will be highly honored! Haha.
