How to draw a circular image in Android Jetpack Compose?

Question

Let's say I have a rectangular avatar image like the one below, how can I force it to be drawn as a circle in Jetpack Compose?

Answer 1

There's a clip modifier which can be applied to any composable as well as the Image, just pass a CircleShape into it:

Image(
    painter = painterResource(R.drawable.sample_avatar),
    contentDescription = "avatar",
    contentScale = ContentScale.Crop,            // crop the image if it's not a square
    modifier = Modifier
        .size(64.dp)
        .clip(CircleShape)                       // clip to the circle shape
        .border(2.dp, Color.Gray, CircleShape)   // add a border (optional)
)

You can use any other shape to clip the image, for example CircleShape it's just RoundedCornerShape(percent = 50). Let's try RoundedCornerShape(percent = 10):

Answer 2

Also, you may try a

implementation "com.github.skydoves:landscapist-glide:1.3.6"

By using Modifier.clip(CircleShape)

GlideImage(
            modifier = Modifier
                    .width(50.dp)
                    .height(50.dp)
                    .clip(CircleShape)
                    .clickable(enabled = true, onClick = onClick),
            imageModel = "https://avatars.githubusercontent.com/u/27887884?v=4",
                // Crop, Fit, Inside, FillHeight, FillWidth, None
            contentScale = ContentScale.Crop,
                // shows an image with a circular revealed animation.
            circularReveal = CircularReveal(duration = 250),
                // shows a placeholder ImageBitmap when loading.
            placeHolder = ImageBitmap.imageResource(R.drawable.avater),
                // shows an error ImageBitmap when the request failed.
            error = ImageBitmap.imageResource(id = R.drawable.avater)
            )

For more components visit LandScapist

Answer 3

For those who wonder, how to make an image squared (or round) without explicitly setting its sizes, there is Modifier.aspectRatio(1f)