Hack that RecyclerView!

Recently I installed a new app Chanel Fashion, not to buy something for my girlfriend but to study its UI/UX. The main activity of this application is awesome. I tried to make this by myself, so my solution is illustrated in this post.

Chanel Fashion

Every problem has a solution. That solution can be optimal, simple, concise or may be wrong.

My solution for this problem is very simple. I have made a custom ViewGroup by extending RecyclerView. And on scroll I’m changing height of its each child according to their position. To be more precise, I have implemented RecyclerView.OnScrollListener which has two methods onScrollStateChanged(RecyclerView recyclerView, int newState) and onScrolled(RecyclerView recyclerView, int dx, int dy).

onScrollStateChanged() is invoked when recyclerview’s state is changed and it has two parameters recyclerView whos scroll state has changed and newState the updated scroll state. One of SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING or SCROLL_STATE_SETTLING. Now in this method I am calculating the height of view according to the distance of view’s top from the reference point (ie. top of recyclerview). And the code goes as —

In changeHeightAccrodingToScroll(recyclerView) the actual magic is happening. This method is invoked every time onScrolled() is called. And the code for this method is —

The top of recyclerView is reference point. If distance of view’s top from reference point is greater than maxDistance then its height would be defaultItemHeight and if distance is 0 (zero) the view would be of its max height ie. featuredItemHeight.

Below diagram is showing how view would look. featuredItemHeight is height of top view (featured view) and defaultItemHeight is height of rest of the views. In this Recyclerview, each child’s height is ranging from defaultItemHeight to featureItemHeight.

And the actual view would look like —

Yay! Achieved.

As said above, if distance -> 0 then height -> featuredItemHeight and if distance ≥ maxDistance, height -> defaultItemHeight

And if distance is between zero and maxDistance the formula to calculate height will be —

/**
 * diffHeight = featuredItemHeight - defaultItemHeight;
 */
private float height(float distance) {
    return featuredItemHeight - ((distance * (diffHeight)) / maxDistance);
}

Isn’t it awesome?

Like it? Want to use it? I have made a open source library for it. You can see the full source code for reference here : https://github.com/developer-shivam/FeaturedRecyclerView

Why library? because it also has a custom ReyclerView Adapter which can be used to animate properties of childs of recyclerview (like fading).

Thanks for reading! Be sure to click ❤ below to recommend this article if you found it helpful. It motivates me to write new one.

For more about programming, follow me and Mindorks , so you’ll get notified when I write new posts.

Check out all the top articles at blog.mindorks.com

Also, Let’s become friends on Facebook. Follow me on Github.