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
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