Slide 1

Slide 1 text

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!

Slide 47

Slide 47 text

DEMO time! 🛠

Slide 48

Slide 48 text

Exploring Jetpack Compose Canvas https://medium.com/google-developer-experts/8cc60815babe

Slide 49

Slide 49 text

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