The material design has come all the way to its success easily in Android and Web recent years. An eminent part of apps in Play Store has adopted to material design and started competing with each other. Also, Google Play Store itself made a material inspired look on their app 3 years ago. They have well-utilized material concepts such as CardView, RecyclerView, Tab layout and Navigation drawer etc., This blog post which I am writing about is a cool and fluent concept they have implemented in their app recently.
If you look at the gif image above, A cool animation is happening on the scroll of items which makes a great UX to the user. This is simply a horizontal recyclerview inside a wrapper card view. I haven’t seen the same implementation any apps other than play store itself. These gnaw made me implement the UX as they have and recently cracked it. I am not sure about that this is not the exact way play store used but I am sure that this will work same as expected.
Anatomy of design (isLookingForCode? skipThis() : readThis() );
The first assumption came to my mind was that they may have used Coordinator layout or frame layout inside the wrapper cardview which has a child recycler view. Since the coordinator layout has the ability to coordinate the views and their actions, I started implementing a custom coordinator behaviour class for the layout. Just for a verification that my assumption is correct, I tried to get the current layout attributes using ADB command
adb shell uiautomator dump
Surprisingly, layout attributes gave me a negative result! They have used only relative layout instead of coordinator layout. My assumption was wrong and This made things clearer that all those view translations are invoked by the recyclerview callbacks. For a smooth experience, Recyclerview has a snapping behaviour in order to put things well organized.
Take my code!
Recycler view of android support library contains some call back method for scrolling event. We can make use of this for listening to the scrolling of items in the recyclerview. First, let’s create a card view which contains a recyclerview with the horizontal layout manager.
If you look at the play store implementation, You can see that they have skipped first two positions of recyclerview in order to make the background items of card view visible. It can be achieved simply by overriding the getItemCount() of adapter class and making the view holder’s itemview invisible for first two positions in onBindViewHolder() method. (You can also use different viewholder pattern for further modification of these empty item views)
For animating the imageview in card background we have to create custom onScrollListener.class for recyclerview. Which we will be passing the views which should be animated, through the constructor. There will be an overridden call back method called onScrolled(RecyclerView recyclerView, int dx, int dy) which will be invoked during the scrolling of the recycler view. We can make use of it for view translations.
Method getHorizontalScrollOffset() of recycler view will give the horizontal scroll offset of the scroll. Using this we can control the view translation rate and alpha of the view. I have made a simple mathematical formula for controlling the translation and alpha in method getAlphaForView()
At last, If you look closely the scrolling of recycler view items, You can see that there is a snapping of items happening to the left end while scrolling. A default snapping is given to the recycler view library while it won’t result in the exact animation you wanted. Rubensousa in github has implemented gravity snap helper for this issue we can make use of it.
That’s it now just run your code, You can see the same behaviour of play store in your app also. A sample project is implemented in my GitHub page.
You can refer it for more.