Canvas in Jetpack Compose

Hello, fantastic person on the internet! I hope you’re doing well.

We all know that Jetpack Compose is excellent for creating native Android UI, but do you know how we can achieve this using the Canva API?

 

Canvas API

The Canvas API unveils a new realm of possibilities, allowing us to paint and sculpt the UI with unparalleled precision and artistry.

 

Screen

We need first to understand how the screen works. Our interface is composed of many pixels, and the more pixels we have, the cleaner the components will be.

To observe that, we can simply zoom in on a component:

Knowing that we can begin drawing using the Canva API.

 

Implementation

Go to your compose function and invoke the Canvas method.

	Canvas() {
	}

view raw Canvas.kt hosted with ❤ by GitHub

Now, you have the ability to start drawing. These are some simple functions that can assist you:

• Use drawRect() to draw a square.
• Use drawCircle() to draw a circle.
• Use drawRoundRect() to draw a square with rounded corners.

 

Square

To draw a simple square:

	Canvas(
	modifier = Modifier
	.size(100.dp)
	.padding(16.dp)
	) {
	drawRect(
	color = Color.Red,
	)
	}

view raw DrawReact.kt hosted with ❤ by GitHub

To draw a square with rounded corners:

	Canvas(
	modifier = Modifier
	.size(100.dp)
	.padding(16.dp)
	) {
	drawRoundRect(
	color = Color.Red,
	cornerRadius = CornerRadius(60f, 60f),
	style = Stroke(width = 15f, cap = StrokeCap.Round)
	)
	}

view raw drawRoundRect.kt hosted with ❤ by GitHub

 

Circle

To draw a simple circle:

	Canvas(
	modifier = Modifier
	.size(100.dp)
	.padding(16.dp)
	) {
	drawCircle(
	color = Color.Red,
	radius = 90f
	)
	}

view raw drawCircle.kt hosted with ❤ by GitHub

To draw a simple circle with stroke line:

	Canvas(
	modifier = Modifier
	.size(100.dp)
	.padding(16.dp)
	) {
	drawCircle(
	color = Color.Red,
	radius = 90f,
	style = Stroke(width = 15f, cap = StrokeCap.Round)
	)
	}

view raw Stroke.kt hosted with ❤ by GitHub

 

Positions

You can also change the position of the element by a specified number of pixels.

Imagine that I have a square of 100 pixels:

I want to draw a square in the bottom left corner, taking up only half of the layout. We can use topLeft to set the alignment, and I can adjust the offset for both the X and Y axes to 100f:

	Canvas(
	modifier = Modifier
	.size(100.dp)
	.padding(16.dp)
	) {
	drawRect(
	color = Color.Red,
	topLeft = Offset(x = 100f, y = 100f)
	)
	}

view raw Offset.kt hosted with ❤ by GitHub

Your layout is going to look like this:

 

The power of Canvas

You may be wondering why you need to draw a circle or a square. The answer to that question is that, with simple symbols like that, you can design many other beautiful and unthinkable illustrations.

For example:

Amazing graphics

Logos

Or any shapes

 

Conclusion

The Canvas API can be extremely useful when you need to create unique illustrations or when you can’t find a high-quality one.

You can combine the Canvas API with Compose animations to create beautiful layouts. Check my article on animation created using Compose for more information on this topic.

All the code and examples it is in this repository.

Happy coding ❤

---

Please let me know what you think in the comments…

Connect with me 👇

Linkedin

GitHub

Instagram

Twitter

Medium