Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Exploring Jetpack Compose Canvas

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.

56047a7b11797f42c2e7030d771fe803?s=128

Julien Salvi

October 29, 2021
Tweet

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
  37. None
  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