RecyclerView Pro Tips — Part 2

In this article, I will talk about RecyclerView ItemDecoration and ItemAnimator and will try to explain through a simple application, which is also available at Github.

1. ItemDecoration (As the name suggests) should be used to decorate view items of the RecyclerView.

ItemDecoration can be used to apply dividers and other effects like padding or equal spacing among item views. To add a simple divider between item views there is a class “DividerItemDecoration” which comes with support lib above version 25.1.0. The following code snippet demonstrates its implementation:

To apply custom item decorations, the best way is to extend RecyclerView.ItemDecoration class. In the sample app, I used a GridLayoutManager and applied CharacterItemDecoration to RecyclerView:

recyclerView.addItemDecoration(new CharacterItemDecoration(50));

Here, CharacterItemDecoration takes 50px as offset in its constructor and it overrides getItemOffsets(…). Inside getItemOffsets() each field of outRect specifies the number of pixels that the item view should be inset by, similar to padding or margin. Since I used GridLayoutManager and wanted to set equal spacings between grid items, I set right offset as 25px (i.e offset/2 ) for each item at even position and left offset 25px for each item at the odd position while keeping the top offset same for all items.

2. ItemAnimator should be used to animate items or views inside RecyclerView items.

Let’s made our app Instagramicious (don’t get intimidated by the word. In fact, it’s not even a ‘word’!) by extending “DefaultItemAnimator” and overriding a few methods.

canReuseUpdatedViewHolder(…) decides whether the same ViewHolder is to be used for animations when the item data is changed. If it returns false, both — the old and the updated ViewHolders are passed to the animateChange(…) method.

recordPreLayoutInformation(…) method is called by the RecyclerView before the layout phase begins. ItemAnimator should record necessary information about the view before it is potentially rebound, moved or removed. The data returned from this method will be passed to the corresponding animate** method (animateChange(…) in our case).

The animateChange(…) method is called by the RecyclerView when an adapter item is present both — before and after the layout on receiving notifyItemChanged(int) call. This method may also be called when notifyDataSetChanged() is called and the adapter has stable ids so that RecyclerView could still rebind views to the same ViewHolders. Note that this method receives (ViewHolder oldHolder, ViewHolder newHolder, ItemHolderInfo preInfo, ItemHolderInfo postInfo) as arguments. As we are reusing the viewholder, both — oldHolder and newHolder are same.

Whenever the user double taps on any item, the following method gets invoked:

notifyItemChanged(position, ACTION_LIKE_IMAGE_DOUBLE_CLICKED);

This initiates the whole process of canReuseUpdatedViewHolder(…), recordPreLayoutInformation(…) and eventually animateChange(…) in the ItemAnimator which in turn does the scaling, and fading of the heart icon as well as the cardview holding the RecyclerView item.

If you found it useful, don’t shy away from giving a clap. Starring the Github repo would be icing on the cake 😉. It’ll motivate me to write more articles like this.

passiondroid/Marvels

This is the second part of the two-part series for RecyclerView. If you missed the first post, you can take a look here.

Another good articles to read on RecyclerView

RecyclerView — More Animations with Less Code using Support Library ListAdapter

Using SnapHelper in RecyclerView

File template for RecyclerView Adapter in Kotlin