Magic Touch Recycler
We have all been wowed and frustrated by the recycler view animations at some point in our life or will be if not yet. 😛 Most of the time, it's about adding an animation while loading data or animating an item on tap. Our design team at Fueled came up with something different.
Let's have a look at what we wanted to achieve
The problem statement: Scale up the currently focused recycler item and keep it as is unless the focus moves to the next item or the user lifts their finger up; Scale down the previously focused item as soon the user moves on to the next item. Sounds pretty straight forward right — but wait, Recyclerview needs to scroll as well when the user just slides their finger quickly— which is the tricky part.
Let’s see how we achieved this behavior
Recyclerview’s addOnItemTouchListener allows you to add an OnItemTouchListener to intercept touch events before they are dispatched to child views. Bingo! That’s precisely what we need.
So let’s create our ScaleItemOnTouchListener which extends RecyclerView.OnItemTouchListener
Now we can control when to invoke onTouchEvent based on the value of boolean returned by onInterceptTouchEvent. We want to invoke scrolling only when the user just slightly glides their finger on the list and scaling only when they focus on a particular item and then start dragging the finger around without lifting it up from the screen; Thus, comes to rescue the drag threshold constant, to differentiate between these two behaviors.
Now let’s take a look at what happens when onTouchEvent gets invoked.
We want to scale down the item user was previously touching and at the same time scale up the item, they are currently touching; the amazing findChildViewUnder method comes to our rescue here. You can check out the complete code here.
Bingo! that’s all the pieces we wanted to put into play at the right motion events.
Thanks for sticking around and happy coding fella!
