Save 37% off PRO during our Black Friday Sale! »

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

April 15, 2021
Tweet

Transcript

  1. Exploring Jetpack compose canvas The Dutch Android User Group 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 custom Shape ⚠ 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
  38. None
  39. First Steps with Canvas Default Shape structure

  40. First Steps with Canvas Let’s draw the path of the

    Shape:
  41. First Steps with Canvas Let’s draw the path of the

    Shape: the corners
  42. First Steps with Canvas Let’s draw the path of the

    Shape: the lines
  43. First Steps with 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. First Steps with Canvas Now let’s draw the red border:

  45. First Steps with Canvas Now let’s draw the red border:

  46. First Steps with Canvas Let’s draw the path of the

    Shape: all together!
  47. DEMO time! 🛠

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

  49. 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