After exploring the Jetpack Compose Canvas in a previous article, this new post will explain how you can draw and use a custom Shape for your Composables to give them a specific outline. The Jetpack Compose foundation library already provides common shapes but we’ll see how to take advantage of the Path API to build custom outlines. We will go even further by adding some animations to our brand new shapes.
Introduction to Shape
With Jetpack Compose, it is easy to add some rounded or cut corners to your Composable thanks to the foundation library which provides several shapes:
- RoundedCornerShape(): to have a rounded corner outline with a given radius
- CutCornerShape(): to have a cut corner outline with a given size
- GenericShape(): to build custom outlines with a given Path