Slide 1

Slide 1 text

Collapsing toolbar with parallax effect and curved motion in Jetpack Compose Morad Azzouzi Senior Android Developer @MoradiousBig

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Foundation Structure

Slide 5

Slide 5 text

Foundation Our first composable

Slide 6

Slide 6 text

Foundation Header composable

Slide 7

Slide 7 text

Foundation Body composable Header height 275 dp

Slide 8

Slide 8 text

Foundation Body composable

Slide 9

Slide 9 text

Foundation Toolbar composable

Slide 10

Slide 10 text

Foundation Title composable

Slide 11

Slide 11 text

Foundation Sum up

Slide 12

Slide 12 text

Animation Header parallax effect

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Animation Header fade out animation

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Animation Header fade out animation

Slide 18

Slide 18 text

Animation Toolbar animation

Slide 19

Slide 19 text

Animation Toolbar animation offset

Slide 20

Slide 20 text

Animation Toolbar animation

Slide 21

Slide 21 text

Linear interpolation Title linear translation

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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:

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Linear interpolation Title linear translation

Slide 27

Slide 27 text

Linear interpolation Quadratic Bézier Curve

Slide 28

Slide 28 text

Linear interpolation Quadratic Bézier Curve

Slide 29

Slide 29 text

Linear interpolation Quadratic Bézier Curve

Slide 30

Slide 30 text

Linear interpolation Quadratic Bézier Curve

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

DEMO

Slide 34

Slide 34 text

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”

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Linear interpolation Examples

Slide 37

Slide 37 text

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