Collapsing toolbar with parallax effect and curved motion in Jetpack Compose

Animations are super important when building an application. They highlight relations between elements, bring attention to what is important and they also can express a brand style.

In this talk, I’ll show you how to implement a collapsing toolbar with parallax effect in jetpack compose only (no third party library). I’ll also show you how to implement curved motion using the power of quadratic Bézier curve which is already ubiquitous in game development but now become so accessible in Jetpack Compose.

So if you want to learn how to build any custom linear animations, or animate objects along a curved path in Compose without impacting performance, join in 😎

Transcript

1. Collapsing toolbar with parallax effect and curved motion in Jetpack Compose Morad Azzouzi Senior Android Developer @MoradiousBig
2. Agenda 1. What are we building ? 2. Foundation 3. Animation 4. Linear interpolation 5. Performance
3. What are we building ? Collapsing toolbar animation 1. The header is translating on the Y axis using a parallax effect 2. The header fades out as the list is scrolling up 3. The toolbar fades in once the list reaches 56dp from the top screen 4. The title translates on X and Y axis using a quadratic Bézier curve 5. The title scales down as the list is scrolling up
4. Foundation Structure
5. Foundation Our first composable
6. Foundation Header composable
7. Foundation Body composable Header height 275 dp
8. Foundation Body composable
9. Foundation Toolbar composable
10. Foundation Title composable
11. Foundation Sum up
12. Animation Header parallax effect
13. Animation Header parallax effect GraphicsLayer: modifier which defines the effects to apply for the content, such as translation, scaling, opacity and even more.
14. Animation Header fade out animation
15. Animation Header fade out animation Collapsed: alpha value equals “0” when scroll offset reaches the top of the screen: B (headerHeight ; 0) Expanded: alpha value equals “1” when no scrolling applies: A (0 ; 1)
16. Animation Header fade out animation ✐ ✐ A (0 ; 1) and B (headerHeight ; 0) ; 1)
17. Animation Header fade out animation
18. Animation Toolbar animation
19. Animation Toolbar animation offset
20. Animation Toolbar animation
21. Linear interpolation Title linear translation
22. Linear interpolation Definition P1 P = (1- t)p0 + t x p1
23. Linear interpolation “t” value “t” value is the percentage of the animation between 0 and 1. The idea is to represent the ratio of this animation:
24. Linear interpolation Title XY coordinates x y x = 16 dp y = headerHeight - titleHeight - padding x y P1 x = 72 dp y = toolbarHeight / 2 - titleHeight / 2 P0
25. Linear Interpolation “lerp” P0 : (16.dp, heiderHeight - titleHeight - padding) P1 : (72.dp, toolbarHeight / 2 - titleHeight/ 2) t : scrollOffset / (headerHeight - toolbarHeight)
26. Linear interpolation Title linear translation
27. Linear interpolation Quadratic Bézier Curve
28. Linear interpolation Quadratic Bézier Curve
29. Linear interpolation Quadratic Bézier Curve
30. Linear interpolation Quadratic Bézier Curve
31. Linear Interpolation Quadratic Bézier Curve X axis P0P1 lerp: P1P2 lerp:
32. Linear Interpolation Quadratic Bézier Curve Y axis P0P1 lerp: P1P2 lerp:
33. DEMO
34. Performance The three phases of compose 💡 You should not have to recompose just to relayout a screen “What to show” “Where to place it” “How to draw it”
35. Performance Recomposition tips 1. Prefer lambda modifiers 3. Use derivedStateOf() 2. Defer read as much as possible
36. Linear interpolation Examples
37. We’re hiring ! Morad Azzouzi Senior Android Developer @MoradiousBig