Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Collapsing toolbar with parallax effect and curved motion in Jetpack Compose

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 😎

Morad Azzouzi

April 27, 2023
Tweet

Other Decks in Programming

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