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

April 15, 2021

More Decks by Julien Salvi

Other Decks in Programming


  1. 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
  2. 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 ⚠
  3. First Steps with Canvas Why going for the Canvas? •

    Design limitation with current Composable • Drawing custom shapes • Building graphic experiences • Having fun 😃
  4. 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!
  5. First Steps with Canvas Canvas APIs • drawRect(), drawLine(), drawOval(),

    drawCircle()... • drawBitmap() or drawText() • drawPath() for complex shapes • with*() (Translation, Scale, Rotation…)
  6. 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
  7. First Steps with Canvas Let’s see how we can draw

    a smiley face 😃: • Understand how to use the draw methods
  8. 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
  9. 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()
  10. 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
  11. 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
  12. 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 { }
  13. 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
  14. 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
  15. 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