Android — Basics of Drawing in Compose (1)
I’m learning about drawing in Android with Compose; here you can find my thoughts.
Since the first time I heard the word “Canvas,” I have been curious about what it is and why some developers talk a lot about it, but life took me to work on different aspects of Android app development, and I couldn’t find out what it means.
Until this year, when I was looking at some charts a colleague built in an Android app, the word “canvas” came back to me.
According to Merriam-Webster dictionary, a canvas is “a piece of cloth backed or framed as a surface for a painting”.
Similarly, Android provides a canvas to draw whatever we want.
Choosing our canvas
Before starting, we need to choose where we will draw.
We can use one of the modifiers available for this purpose, like drawBehind(), drawWithContent() or drawWithCache(), or we can use a convenient composable called Canvas (behind the scenes, it is an Spacer using the drawBehind() modifier).
Understanding the coordinate system
It is very important to remember this: “The origin or point (0,0) is located at the top left corner of the screen (or canvas).”
This also works for the Offset, an object that declares how far from the origin an object will be placed.
Which form do you want to draw?
Well, at this point, Compose offers you several functions to help you to start drawing:
For basic shapes:
- drawRect()
- drawCircle()
- drawRoundedRect()
- drawOval()
- drawArc()
- drawLine()
- drawPoints()
And:
- drawText()
- drawImage()
…and that’s it for now. I’m recording some videos about this topic (in Spanish). Here you can watch the first video:
References
- Graphic modifiers | Jetpack Compose
https://developer.android.com/develop/ui/compose/graphics/draw/modifiers#drawing-modifiers
