How to Draw a Circle in Jetpack Compose Canvas?

jetpack compose draw circle

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
)

colorColor 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.

blendModeBlending 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:

Canvas dp

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:

Simple Circle

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:

Radius

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:

Circle offset center

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:

Gradient Circle

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:

Jetpack Compose outlined circle

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:

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

Leave a Comment