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.

Julien Salvi

June 12, 2021
Tweet

More Decks by Julien Salvi

Other Decks in Programming

Transcript

  1. Exploring Jetpack
    compose canvas
    Google I/O Extended Montréal 󰎟
    Julien Salvi

    View full-size slide

  2. Julien Salvi
    Android GDE
    PAUG, Punk and IPAs!
    Senior Android Engineer @ Aircall
    @JulienSalvi

    View full-size slide

  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

    View full-size slide

  4. First steps with Canvas
    01
    APIs overview and
    introduction

    View full-size slide

  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 ⚠

    View full-size slide

  6. And After, unleash the canvas...
    @GerardPaligot
    @gdelgadobliss1
    @vitaviva2

    View full-size slide

  7. First Steps with Canvas
    Why going for the Canvas?
    ● Design limitation with current Composable
    ● Drawing custom shapes
    ● Building graphic experiences
    ● Having fun 😃

    View full-size slide

  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!

    View full-size slide

  9. A canvas
    introduction

    View full-size slide

  10. First Steps with Canvas

    View full-size slide

  11. First Steps with Canvas
    Canvas APIs
    ● drawRect(), drawLine(), drawOval(), drawCircle()...
    ● drawBitmap() or drawText()
    ● drawPath() for complex shapes
    ● with*() (Translation, Scale, Rotation…)

    View full-size slide

  12. Understand the Blend modes

    View full-size slide

  13. Android Canvas by Rebecca Franks
    https://medium.com/over-engineering/621cf512f4c7

    View full-size slide

  14. Into the
    Compose Canvas

    View full-size slide

  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

    View full-size slide

  16. First Steps with Canvas
    Jetpack Compose Canvas

    View full-size slide

  17. First Steps with Canvas
    Let’s see how we can draw a smiley face 😃:
    ● Understand how to use the draw methods

    View full-size slide

  18. First Steps with Canvas
    Let’s draw the head...

    View full-size slide

  19. First Steps with Canvas
    And the smile...

    View full-size slide

  20. First Steps with Canvas
    And finally the eyes 👀

    View full-size slide

  21. DEMO time! 🛠

    View full-size slide

  22. Playing with
    The native Canvas

    View full-size slide

  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

    View full-size slide

  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()

    View full-size slide

  25. First Steps with Canvas

    View full-size slide

  26. Animation with Canvas
    02
    Animate your drawn
    shapes

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  29. Animation with Canvas
    Infinite animation

    View full-size slide

  30. Animation with Canvas
    Timed animation

    View full-size slide

  31. Animation with Canvas
    Add animation on the Canvas

    View full-size slide

  32. DEMO time! 🛠

    View full-size slide

  33. Draw outside the canvas
    03
    Draw shapes in Composables

    View full-size slide

  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 { }

    View full-size slide

  35. Draw Outside the Canvas

    View full-size slide

  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

    View full-size slide

  37. Draw Outside the Canvas
    Default Shape structure

    View full-size slide

  38. Draw Outside the Canvas
    Let’s draw the path of the Shape:

    View full-size slide

  39. Draw Outside the Canvas
    Let’s draw the path of the Shape: the corners

    View full-size slide

  40. Draw Outside the Canvas
    Let’s draw the path of the Shape: the lines

    View full-size slide

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

    View full-size slide

  42. Draw Outside the Canvas
    Now let’s draw the red border:

    View full-size slide

  43. Draw Outside the Canvas
    Now let’s draw the red border:

    View full-size slide

  44. Draw Outside the Canvas
    Let’s draw the path of the Shape: all together!

    View full-size slide

  45. Draw Outside the Canvas
    We can go further and animate the shape!

    View full-size slide

  46. DEMO time! 🛠

    View full-size slide

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

    View full-size slide

  48. Custom shape with Jetpack Compose
    https://juliensalvi.medium.com/1cb48a991d42

    View full-size slide

  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

    View full-size slide