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
   

   View Slide

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

   View 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 Slide

4. First steps with Canvas
   01
   APIs overview and
   introduction
   

   View 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 Slide

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

   View 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 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 Slide

9. A canvas
   introduction
   

   View Slide

10. First Steps with Canvas
    

    View Slide

11. y
    x
    (0, 0)
    

    View Slide

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

    View Slide

13. Understand the Blend modes
    

    View Slide

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

    View Slide

15. Into the
    Compose Canvas
    

    View Slide

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
    

    View Slide

17. First Steps with Canvas
    Jetpack Compose Canvas
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. First Steps with Canvas
    And finally the eyes 👀
    

    View Slide

22. DEMO time! 🛠
    

    View Slide

23. Playing with
    The native Canvas
    

    View Slide

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
    

    View Slide

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

    View Slide

26. First Steps with Canvas
    

    View Slide

27. Animation with Canvas
    02
    Animate your drawn
    shapes
    

    View Slide

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
    

    View Slide

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
    

    View Slide

30. Animation with Canvas
    Infinite animation
    

    View Slide

31. Animation with Canvas
    Timed animation
    

    View Slide

32. Animation with Canvas
    Add animation on the Canvas
    

    View Slide

33. DEMO time! 🛠
    

    View Slide

34. Draw outside the canvas
    03
    Draw shapes in Composables
    

    View Slide

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

    View Slide

36. Draw Outside the Canvas
    

    View Slide

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
    

    View Slide

38. View Slide

39. Draw Outside the Canvas
    Default Shape structure
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. DEMO time! 🛠
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide