Jetpack Compose has powerful drawing and animation support. This course will look at some simple techniques to draw and animate on the canvas in Compose. Will use the different graphics modifiers available such as drawBehind and drawWithCache. We will look at what tools are provided by the DrawScope, starting with simple tools such as drawLine and working our way up to Brush, Path, Bezier and transformations. Building on the basic drawing techniques, we will investigate how to animate the elements we have drawn triggered by touch events. With these tools, we will be able to build custom animating compose components.
In this coffee break codelab, you'll explore:
-
The basics of drawing custom elements on the canvas using Canvas, and drawContent, drawBehind and drawWithCache modifiers.
-
Explore the Coordinate system, Pixels and Density-independent pixels (dp).
-
The essential drawing tools available in the DrawScope such as draw drawRect, drawLine and drawArc.
-
Rotate, translate and scale transformations.
-
How to use the Brush tool with Path and Bezier curves?
-
Customized animation mechanisms to animate canvas elements
-
Building custom animating components with canvas drawing primitives.
-
Triggering custom animations from touch inputs.
