Implementing Motion Design With Jetpack Compose: Vertical Scrolling Effect
Here, I attempt the vertical scrolling effect illustrated in the design above using Jetpack Compose in Android. The idea is to allow users to drag list items, with the positions of the items overlapping and adjusting dynamically to create a smooth and fluid motion.
Designing the Scroll Effect
The scroll effect is achieved by intercepting the vertical drag gestures and creating an offset for each item while laying it down. When the user starts dragging an item, each item is allowed to overlap with adjacent item in the direction of scrolling. The end of the dragging event triggers an animation that reverts the overlapping positions of the items in to their original position. The components used to design the scroll effect are listed below:
- Box Composable: We use the Box composable function with modifiers to implement vertical scroll behavior and also intercept drag event
- Layout Composable: We want to manually layout each child in vertical order.
- Animatable: Helps manage the drag position, providing smooth transitions.
Interactive Dragging
When the user initiates a drag gesture, we want to calculate which item is dragged based on the touch position. As the user drags, the onDragStart is invoked and the dragged item index is determined. Similarly, on the onVerticalDragGestures callback, we update the scroll state based on the direction of the scroll and record the drag amount. The drag amount is clamped down and used as cumulative for animating the position back to its original position in the layout.
Finally, when scrolling ends and onDragEnd, we reset the dragged Item index and animate the item position back to its original position to revert the overlapping effect.
Positioning the items
Positioning items is straightforward. The y-coordinate for each item is calculated using the information from the previously laid out item.
Gaussian Distribution for measuring the overlapping position.
Gaussian Distribution is used to create an overlapping effect for the items in the getFactor method. The dragged item has the highest overlapping value followed by the decreasing values of its adjacent items, resembling a bell shape.
Final output
I feel the achieved effect is not completely identical to the design. I will incorporate the fine-tuning in my next post, so stay tuned. The source code is shared in the link below.
https://github.com/PreyeaRegmi/Compose-VerticalScrollEffect
