Exploring Jetpack
compose canvas 🎨
droidcon London 2021
Julien Salvi
Slide 2
Slide 2 text
Julien Salvi
Android GDE
PAUG, Punk and IPAs!
Lead Android Engineer @ Aircall
@JulienSalvi
Slide 3
Slide 3 text
02 03
First steps
With canvas
APIs overview and
introduction
Draw shapes in
Composable
Animate your
drawn shapes
Table of contents
01
Animation
With canvas
Draw outside
The canvas
Slide 4
Slide 4 text
First steps with Canvas
01
APIs overview and
introduction
Slide 5
Slide 5 text
First Steps with Canvas
What you will learn during this session 🤓 ?
● The foundations of Jetpack Compose Canvas
● Having an overview of the DrawScope API
● First experience with animations and Canvas
● Learn how to build and animate custom Shapes
⚠ DISCLAIMER ⚠
Slide 6
Slide 6 text
And After, unleash the canvas...
@GerardPaligot
@gdelgadobliss1
@vitaviva2
Slide 7
Slide 7 text
First Steps with Canvas
Why going for the Canvas?
● Design limitation with current Composable
● Drawing custom shapes
● Building graphical experiences
● Having fun 😃
Slide 8
Slide 8 text
First Steps with Canvas
Was it possible to draw on a Canvas before Compose?
● Yes! 😃
● But some function names were not very explicit 😅
● And no dedicated component back then!
Slide 9
Slide 9 text
A canvas
introduction
Slide 10
Slide 10 text
First Steps with Canvas
Slide 11
Slide 11 text
y
x
(0, 0)
Slide 12
Slide 12 text
First Steps with Canvas
Canvas APIs
● drawRect(), drawLine(), drawOval(), drawCircle()...
● drawBitmap() or drawText()
● drawPath() for complex shapes
● with*() (Translation, Scale, Rotation…)
Slide 13
Slide 13 text
Android Canvas by Rebecca Franks
https://medium.com/over-engineering/621cf512f4c7
Slide 14
Slide 14 text
Into the
Compose Canvas
Slide 15
Slide 15 text
First Steps with Canvas
What about the Jetpack Compose Canvas?
● The DrawScope APIs are very similar to the native
Canvas APIs
● APIs to animate the drawings
● Nice interoperability with the native Canvas
Slide 16
Slide 16 text
First Steps with Canvas
Jetpack Compose Canvas
Slide 17
Slide 17 text
First Steps with Canvas
Let’s see how we can draw a smiley face 😃:
● Understand how to use the draw methods
Slide 18
Slide 18 text
First Steps with Canvas
Let’s draw the head...
Slide 19
Slide 19 text
First Steps with Canvas
… the smile...
Slide 20
Slide 20 text
First Steps with Canvas
And finally the eyes 👀
Slide 21
Slide 21 text
DEMO time! 🛠
Slide 22
Slide 22 text
Playing with
The native Canvas
Slide 23
Slide 23 text
First Steps with Canvas
Can I reuse what I built with the native Canvas?
● Yes! There is a nice interop with the native Canvas.
● Access the native Canvas in the DrawScope
● If you don’t want to migrate the Compose Path, you
can use .asComposePath() to do the mapping
Slide 24
Slide 24 text
First Steps with Canvas
Why going for the native Canvas? 🤔
● Fast/easy migration
● Not all methods from the native Canvas are
available in the DrawScope!
● For example: drawText()
Slide 25
Slide 25 text
First Steps with Canvas
Slide 26
Slide 26 text
Animation with Canvas
02
Animate your drawn
shapes
Slide 27
Slide 27 text
Animation with Canvas
Transformation APIs on the Canvas
● The DrawScope offers multiple lambdas to animate
the drawings: translate, scale, rotate...
● APIs to animate the drawings
● Nice interoperability with the native Canvas
Slide 28
Slide 28 text
Animation with Canvas
Defining animations:
● We can define AnimationState (timed, infinite…) with
rememberInfiniteTransition() or animateFloatAsState()
● Animate your drawings with scroll or drag changes with
rememberScrollState() for example
Slide 29
Slide 29 text
Animation with Canvas
Infinite animation
Slide 30
Slide 30 text
Animation with Canvas
Timed animation
Slide 31
Slide 31 text
Animation with Canvas
Add animation on the Canvas
Slide 32
Slide 32 text
DEMO time! 🛠
Slide 33
Slide 33 text
Draw outside the canvas
03
Draw shapes in Composables
Slide 34
Slide 34 text
Draw Outside the Canvas
Build custom Shape
● Customize Composable shape with elevation support
● Use the Path API
Draw behind a Composable
● Access the DrawScope of a Composable
● Use the modifier .drawBehind { }
Slide 35
Slide 35 text
Draw Outside the Canvas
Slide 36
Slide 36 text
Draw Outside the Canvas
Let’s see how we can build this component with:
● A custom Shape for the Composable
● Draw the border with the its DrawScope
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Draw Outside the Canvas
Default Shape structure
Slide 39
Slide 39 text
Draw Outside the Canvas
Let’s draw the path of the Shape:
Slide 40
Slide 40 text
Draw Outside the Canvas
Let’s draw the path of the Shape: the corners
Slide 41
Slide 41 text
Draw Outside the Canvas
Let’s draw the path of the Shape: the lines
Slide 42
Slide 42 text
Draw Outside the Canvas
Now let’s draw the red border:
● Accessing the DrawScope with .drawBehind {}
● Use the same function to generate the path
● Use the scale transformation
Slide 43
Slide 43 text
Draw Outside the Canvas
Now let’s draw the red border:
Slide 44
Slide 44 text
Draw Outside the Canvas
Now let’s draw the red border:
Slide 45
Slide 45 text
Draw Outside the Canvas
Let’s draw the path of the Shape: all together!
Slide 46
Slide 46 text
Draw Outside the Canvas
We can go further and animate the shape!
Custom shape with Jetpack Compose
https://juliensalvi.medium.com/1cb48a991d42
Slide 50
Slide 50 text
CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon, and
infographics & images by Freepik
Have fun with the Canvas!
Do you have any questions?
@JulienSalvi
Thanks