How to Draw a Circle in Jetpack Compose Canvas?

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:

References:

Android Docs

How to Draw a Circle in Jetpack Compose Canvas?

1 thought on “How to Draw a Circle in Jetpack Compose Canvas?”

Leave a Comment Cancel reply