Animated UI state change Part 4. RecyclerView item with custom scrolling behavior.
I was inspired by Apple official site. Proposed idea is, while scroll down, instead of translating content vertically, to intercept delta scroll Y and apply custom fancy animation, and only after animation is logically finished — to continue scrolling content down.
Previous parts are just about state transition during user’s drag. But we can handle such transformation when user scrolls recyclerView item.
Part 1: animated UI state change based on clipping path for canvas.
Part 2: add child view with custom scrolling behavior.
Part 3: apply fling and auto scrolling.
Part 4: current story.
Part 5: Add parallax effect -coming soon
Part 6: Add snowing animation to the winter state in progress
Starter code: we don’t need fling form part 3 and “onTouch” logic at all so the starter code is the solution code from part 2:
Solution code of this part.
Step 1. Implement RecyclerView.
Add recyclervView to the main layout as a main single child. And use transform_item.xml with ConstraitLayout as a root with AnimatedLayout as a child for recyclerView item. Here wrapping of AnimatedLayout
with parent ConstraitLayout is done with the purpose of parallax, which I will implement in the next part.
Implement RecyclerView adapter with two types of recyclerView items: regular item and current one — “animated item”.
We don’t need anymore onTouch() method inside AnimatedLayout so just remove it or keep it as unused one.
Create new class public class CustomLinearLayoutManager extends LinearLayoutManager and set it to the recyclerView. This is the place for implementing custom scrolling feature of current article.
Inside AnimatedLayout I set private int mIdleState = SUMMER_STATE instead of WINTER_STATE as initial state, because I want transforming item to be at the top in summer state and then during scrolling down to be changed into winter state.
Step 2. CustomLinearLayoutManager.
Easy way to intervene and change scrolling logic is just to override LinearLayoutManager.scrollVerticallyBy(…) .
Inside this method get the reference of the animated item. It could be done in many different ways, but I have only one item with such type and it has specific position INSERT_POSITION so I have use LinearLayoutManager.findViewByPosition() .
Then, depending on scrolling vertical directions, position of item view related to the parent and current AnimatedLayout’s mOffsetvalue call animatedLayout.animateBy(dy) or super.scrollVerticallyBy(dy, recycler, state):
And update AnimatedLayout.class with new method animatedBy(…)
Fix text width bug
Call parent.requestLayout after text has been set into the textView, so it will fix dynamic textView width changes in applyWinterTitleTV() and applySummerTitleTV()
And finally fix dynamic width on initial start by setting initial text from onBindViewHolder() to the textView.
That is all, thanks for reading.
