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 🎨 droidcon London 2021 Julien Salvi
2. Julien Salvi Android GDE PAUG, Punk and IPAs! Lead 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 graphical 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. Android Canvas by Rebecca Franks https://medium.com/over-engineering/621cf512f4c7
14. Into the Compose Canvas
15. 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
16. First Steps with Canvas Jetpack Compose Canvas
17. First Steps with Canvas Let’s see how we can draw a smiley face 😃: • Understand how to use the draw methods
18. First Steps with Canvas Let’s draw the head...
19. First Steps with Canvas … the smile...
20. First Steps with Canvas And finally the eyes 👀
21. DEMO time! 🛠
22. Playing with The native Canvas
23. 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
24. 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()
25. First Steps with Canvas
26. Animation with Canvas 02 Animate your drawn shapes
27. 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
28. 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
29. Animation with Canvas Infinite animation
30. Animation with Canvas Timed animation
31. Animation with Canvas Add animation on the Canvas
32. DEMO time! 🛠
33. Draw outside the canvas 03 Draw shapes in Composables
34. 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 { }
35. Draw Outside the Canvas
36. 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
38. Draw Outside the Canvas Default Shape structure
39. Draw Outside the Canvas Let’s draw the path of the Shape:
40. Draw Outside the Canvas Let’s draw the path of the Shape: the corners
41. Draw Outside the Canvas Let’s draw the path of the Shape: the lines
42. 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
43. Draw Outside the Canvas Now let’s draw the red border:
44. Draw Outside the Canvas Now let’s draw the red border:
45. Draw Outside the Canvas Let’s draw the path of the Shape: all together!
46. Draw Outside the Canvas We can go further and animate the shape!
47. DEMO time! 🛠
48. Exploring Jetpack Compose Canvas https://medium.com/google-developer-experts/8cc60815babe
49. Custom shape with Jetpack Compose https://juliensalvi.medium.com/1cb48a991d42
50. 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