
In this article, we’ll learn how to draw a circle in Jetpack Compose using the drawCircle method of Canvas.
Prerequisites:
Note: Instead of Canvas, you can create circles using the Box and Shape APIs.
For this article, create an empty Jetpack Compose project and open MainActivity.kt. Create a composable called MyUI() and call it from the onCreate().
// add the following packages
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme(darkTheme = false) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
MyUI()
}
}
}
}
}
}
@Composable
fun MyUI() {
}
We’ll write our code in the MyUI().
The drawCircle() method looks like this:
fun drawCircle(
color: Color,
radius: Float = size.minDimension / 2.0f,
center: Offset = this.center,
/*@FloatRange(from = 0.0, to = 1.0)*/
alpha: Float = 1.0f,
style: DrawStyle = Fill,
colorFilter: ColorFilter? = null,
blendMode: BlendMode = DefaultBlendMode
)
color – Color of the circle.
radius – The radius of the circle.
center – The center coordinate where the circle is to be drawn.
alpha – Opacity value of the circle. It ranges from 0f to 1f. 0f represents fully transparent, and 1f represents fully opaque.
style – Whether or not the circle is stroked or filled in.
colorFilter – It is used to modify each pixel of the arc.
blendMode – Blending algorithm to be applied to the arc when it is drawn.
Let us understand the parameters with examples.
First, let’s draw a canvas of size 300.dp.
@Composable
fun MyUI() {
Canvas(
modifier = Modifier
.size(size = 300.dp)
.border(color = Color.Magenta, width = 2.dp)
) {
}
}
Output:

Let’s draw a simple circle:
@Composable
fun MyUI() {
Canvas(
modifier = Modifier
.size(size = 300.dp)
.border(color = Color.Magenta, width = 2.dp)
) {
drawCircle(
color = Color.Cyan
)
}
}
Output:

It looks too big. We can change its size by using the radius parameter.
@Composable
fun MyUI() {
Canvas(
modifier = Modifier
.size(size = 300.dp)
.border(color = Color.Magenta, width = 2.dp)
) {
drawCircle(
color = Color.Cyan,
radius = 50.dp.toPx()
)
}
}
Output:

By default, the circle is drawn in the middle of the canvas. The center parameter can be used to adjust its position. We need to specify the position using the Offset function.
@Composable
fun MyUI() {
Canvas(
modifier = Modifier
.size(size = 300.dp)
.border(color = Color.Magenta, width = 2.dp)
) {
drawCircle(
color = Color.Cyan,
radius = 50.dp.toPx(),
center = Offset(x = 100.dp.toPx(), y = 100.dp.toPx())
)
}
}
Output:

Jetpack Compose provides another overload with brush parameter. We can create gradient backgrounds using it.
@Composable
fun MyUI() {
Canvas(
modifier = Modifier
.size(size = 300.dp)
.border(color = Color.Magenta, width = 2.dp)
) {
drawCircle(
brush = Brush.horizontalGradient(colors = listOf(Color.Green, Color.Yellow)),
radius = 100.dp.toPx()
)
}
}
Output:

What if you want to create an outlined circle? We can use the style parameter for that.
@Composable
fun MyUI() {
Canvas(
modifier = Modifier
.size(size = 300.dp)
.border(color = Color.Magenta, width = 2.dp)
) {
drawCircle(
brush = Brush.horizontalGradient(colors = listOf(Color.Green, Color.Yellow)),
radius = 100.dp.toPx(),
style = Stroke(width = 8.dp.toPx())
)
}
}
Output:

This is all about drawing circles in Jetpack Compose using the drawCircle() method of Canvas. I hope you have learned something new. If you have any doubts, leave a comment below.
Related Articles:
- How to Use Images in Jetpack Compose?
- How to Paste Code into MS Word with Formatting?
- 3 Ways to Create Lines in Jetpack Compose
- How to Add Custom Fonts in Android Studio?
References:
You have save my life! Keep up the good work