Exploring Jetpack Compose Canvas

In this session, we are going to explore the Jetpack Compose Canvas and its capabilities. Let's see the different ways of drawing custom shapes with Jetpack Compose: exploring the Canvas Composable and its APIs, building custom Shape or overriding the canvas of any existing Composable. Then, we'll see how we can animate the shapes we drawn and how you can access the native Android canvas to bring your existing shapes to life with Jetpack Compose.

Transcript

1. Exploring Jetpack compose canvas Google I/O Extended Montréal 󰎟 Julien Salvi
2. Julien Salvi Android GDE PAUG, Punk and IPAs! Senior Android Engineer @ Aircall @JulienSalvi
3. 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
4. First steps with Canvas 01 APIs overview and introduction
5. 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 ⚠
6. And After, unleash the canvas... @GerardPaligot @gdelgadobliss1 @vitaviva2
7. First Steps with Canvas Why going for the Canvas? • Design limitation with current Composable • Drawing custom shapes • Building graphic experiences • Having fun 😃
8. 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!
9. A canvas introduction
10. First Steps with Canvas
11. y x (0, 0)
12. First Steps with Canvas Canvas APIs • drawRect(), drawLine(), drawOval(), drawCircle()... • drawBitmap() or drawText() • drawPath() for complex shapes • with*() (Translation, Scale, Rotation…)
13. Understand the Blend modes
14. Android Canvas by Rebecca Franks https://medium.com/over-engineering/621cf512f4c7
15. Into the Compose Canvas
16. 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
17. First Steps with Canvas Jetpack Compose Canvas
18. First Steps with Canvas Let’s see how we can draw a smiley face 😃: • Understand how to use the draw methods
19. First Steps with Canvas Let’s draw the head...
20. First Steps with Canvas And the smile...
21. First Steps with Canvas And finally the eyes 👀
22. DEMO time! 🛠
23. Playing with The native Canvas
24. 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
25. 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()
26. First Steps with Canvas
27. Animation with Canvas 02 Animate your drawn shapes
28. 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
29. 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
30. Animation with Canvas Infinite animation
31. Animation with Canvas Timed animation
32. Animation with Canvas Add animation on the Canvas
33. DEMO time! 🛠
34. Draw outside the canvas 03 Draw shapes in Composables
35. 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 { }
36. Draw Outside the Canvas
37. 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
39. Draw Outside the Canvas Default Shape structure
40. Draw Outside the Canvas Let’s draw the path of the Shape:
41. Draw Outside the Canvas Let’s draw the path of the Shape: the corners
42. Draw Outside the Canvas Let’s draw the path of the Shape: the lines
43. 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
44. Draw Outside the Canvas Now let’s draw the red border:
45. Draw Outside the Canvas Now let’s draw the red border:
46. Draw Outside the Canvas Let’s draw the path of the Shape: all together!
47. Draw Outside the Canvas We can go further and animate the shape!
48. DEMO time! 🛠
49. Exploring Jetpack Compose Canvas https://medium.com/google-developer-experts/8cc60815babe
50. Custom shape with Jetpack Compose https://juliensalvi.medium.com/1cb48a991d42
51. 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