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
   

   View Slide

2. Agenda
   1. What are we building ?
   2. Foundation
   3. Animation
   4. Linear interpolation
   5. Performance
   

   View Slide

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
   

   View Slide

4. Foundation
   Structure
   

   View Slide

5. Foundation
   Our first composable
   

   View Slide

6. Foundation
   Header composable
   

   View Slide

7. Foundation
   Body composable
   Header height
   275 dp
   

   View Slide

8. Foundation
   Body composable
   

   View Slide

9. Foundation
   Toolbar composable
   

   View Slide

10. Foundation
    Title composable
    

    View Slide

11. Foundation
    Sum up
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

12. Animation
    Header parallax effect
    

    View Slide

13. Animation
    Header parallax effect
    GraphicsLayer: modifier which defines the effects to apply for the content, such
    as translation, scaling, opacity and even more.
    

    View Slide

14. Animation
    Header fade out animation
    

    View Slide

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)
    

    View Slide

16. Animation
    Header fade out animation
    ✐
    ✐
    
    A (0 ; 1) and B (headerHeight ; 0) ; 1)
    

    View Slide

17. Animation
    Header fade out animation
    

    View Slide

18. Animation
    Toolbar animation
    

    View Slide

19. Animation
    Toolbar animation
    offset
    

    View Slide

20. Animation
    Toolbar animation
    

    View Slide

21. Linear interpolation
    Title linear translation
    

    View Slide

22. Linear interpolation
    Definition
    P1
    P = (1- t)p0 + t x p1
    
    

    View Slide

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:
    

    View Slide

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
    

    View Slide

25. Linear Interpolation
    “lerp”
    P0 : (16.dp, heiderHeight - titleHeight - padding)
    P1 : (72.dp, toolbarHeight / 2 - titleHeight/ 2)
    t : scrollOffset / (headerHeight - toolbarHeight)
    

    View Slide

26. Linear interpolation
    Title linear translation
    

    View Slide

27. Linear interpolation
    Quadratic Bézier Curve
    

    View Slide

28. Linear interpolation
    Quadratic Bézier Curve
    

    View Slide

29. Linear interpolation
    Quadratic Bézier Curve
    

    View Slide

30. Linear interpolation
    Quadratic Bézier Curve
    

    View Slide

31. Linear Interpolation
    Quadratic Bézier Curve
    X axis
    P0P1 lerp:
    P1P2 lerp:
    

    View Slide

32. Linear Interpolation
    Quadratic Bézier Curve
    Y axis
    P0P1 lerp:
    P1P2 lerp:
    

    View Slide

33. DEMO
    

    View Slide

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”
    

    View Slide

35. Performance
    Recomposition tips
    1. Prefer lambda modifiers
    3. Use derivedStateOf()
    2. Defer read as much as possible
    

    View Slide

36. Linear interpolation
    Examples
    

    View Slide

37. We’re hiring !
    Morad Azzouzi
    Senior Android Developer
    @MoradiousBig
    

    View Slide