Part 4- Item Decorations in RecyclerView
Hi, if you’re joining from this tutorial, you should check out my first one: Understanding RecyclerView. A high-level Insight. Part -1. Today I am attempting to explain the Item Decorations in RecyclerView in very simple way so that all the developers new to Android World can fully understand how the RecyclerView Works.
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
This has been a long journey and I have received much positive feedback on the previous articles. The fact that the articles procures information for the new and coming developers, is the reason why they have succeeded. So following the same pattern, today I am bringing this tutorial that highlights Item Decoration in Recyclerviews.
I have always felt that while learning something new, if I get to build a beautiful interfaces, why not? And as a beginner, I have always wondered how everything was built. Such beautiful things! And after much hard work, I have brought you this article that will not only help you learn about the Item Decoration but also build a beautiful app which is very similar to
Application. Okay, practically it’s a clone.And this what we’re building today:
Questions we’re going to ask and see the answers to:
- What is Item Decoration?
- Why do we use them?
- What if we use a view or a drawable on our own instead of Item Decoration?
- Can we build something good?
Let’s try and answer those questions one by one. What we’re going to do is, we’re going to tackle each question and then code a little bit and then tackle another question and then code a little bit more to just keeps things a little more interesting. Not that I am saying that Item Decorations are boring. Okay, they’re easy. So guess what!
What are Item Decorations?
Item Decorations allow us to draw on all 4 sides of the item in an Adapter based data-set. What I mean is, when you need to add dividers or spaces or any special effects to the children of Recyclerview, you delegate your work to Item Decorations. They will beautifully handle all the work for you. Obviously you need to code a few lines. DUH.
Coding Task 1:
As I said, here’s some coding task. Head over to this GitHub link and download or fork the repo. If you don’t know how to, head over to this link first for cloning and this link for forking. (Do not forget to star the repository)
You can also start with a new repository with a clean slate.
After you’re done with this, checkout the state2 branch in the terminal in Android Studio. Though the project starts with the branch state1 but that merely creates a set up for a recyclerview. This is how you do this if you don’t know, just type in this in your terminal:
`git checkout state2` and hit enter.
I am not going to start from scratch because I have covered that out in my previous tutorials.
Let’s start with coding. Create a class named DividerItemDecoration that extends RecyclerView.ItemDecoration. We need to implement the two methods namely, getItemOffsets and onDraw.
Let’s start with onDraw.
This method runs once per drawing on the screen. I will tell you what this means later while we debug the application. But keep in mind for now.
So, item Decoration is not merely drawing dividers, we can draw anything. It helps us drawing on all 4 sides of the item view. So dividers which we thought would go just below each item, we can draw them on all four sides if you like it. But that would be one damn ugly app.
After so much waiting and setting up the project, let’s start.
For starters, were trying to draw dividers under each item. For that, declare 2 variables named anything you’d like but I would name them dividerLeft and dividerRight.
DividerLeft is the point where I want my divider to start from and DividerRight is the point where I want my divider to stop.
32 is an arbitrary integer I chose for margin. See the below image for a better uderstanding. You could even set the integer to the margin from the parent’s layout (if any).
Now that the left and right ends are done for the divider, let’s start with the top and bottom of it.
We know that recyclerview can have different type of views at different positions. We need to know them before-hand and draw dividers for them accordingly (only for the ones which are currently displayed on the screen right now).
If you don’t get the code now, just read the explanation below.
We’ll loop over every child that can be displayed over the screen and set a divider for them.
We need to know the params of the recyclerview like the margins, if any. For that we’ll get the Layout Params. Then at the bottom of the view, we want to draw a divider, so we’ll calculate the location at which we want to draw. We want to draw at the bottom of each item (so that’s why, child.getBottom()). We also want to draw after the margin we’ve set for each view while defining in the list_item.xml (and that’s why, params.bottomMargin).
Then tell the drawable that we’ve declared where you want this drawable to be and set the bounds of the drawable like in the code above. (I haven’t told you about drawable, so just assume that it’s what we want to be as our divider). And then finally call
mDivider.draw(c) (where c is canvas).
The if statement is so that the drawable in not drawn for the last child.
The onDraw method is called only for the children that are visible and for the views it keeps for recycling.
Why do we use them?
Oh, I guess I answered your question in the code task above. It’s easy and helps us with custom decorations and fast.
What if we use a view or a drawable on our own instead of Item Decoration?
We can easily use a view or drawable as a divider for ItemDecoration but that would result in something horrendeous. If you think about it, when we add view as a divider in the list_item.xml, this would then act as a child of the item and thus the child of the recyclerview.
This does not seems to be a problem but while drawing, it is. It not only reduces the efficiency but also the speed.
And what else, if you see this:
This is one horror of using views in the list_item.xml
Let’s finish off this class.
Coding Task 2:
Declare a drawable named mDivider which we are going to draw over as the divider.
Now we’re going to override the 2nd method that is, getItemOffsets.
So if there’s only one child, we do not want to add any dividers neither any padding. And so we return. And if there are more than 1, we want to tell the application what the divider size is going to be and take that size and set it as the padding for the top of the item.
So when the application starts drawing items, we want the application to add an extra padding of the size of the divider at the top of each item. getIntrinsicheight is one of the method that lends us the actual height of drawable.
Now we’re done with the application actually. But there’s one more thing left, and that is to tell the recyclerview to use this ItemDecoration Class instead of theirs.
And it is done. Voila!
Run the application and see for your self. The application looks like this.
And now we’re done.
If you want to see how I made this application into the starbucks app, just checkout branch state3.
This is how the application looks now. Not that difficult to build. So let’s skip this part.
Checkout state4 and this is how it looks now. Not that difficult.
And with that, we’re officially done! I am so proud of myself! Haha!
But as I said, these articles are for beginners, and if you find anything difficult, please comment, I will be happy to help you out. Also, do not hesitate to clap a few times!
