How to draw a circular image in Android Jetpack Compose?

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?

Upvotes: 66

Answers (5)

Fatiq Hussnain

Reputation: 181

For circular image in jetpack compose:

Image(modifier = Modifier.clip(CircleShape), contentScale = ContentScale.FillWidth)

Upvotes: 1

Eyjafl

Reputation: 2185

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

Upvotes: 7

Bharat Lalwani

Reputation: 1520

We can achieve this using the background field in a modifier.

Image(
  painter = painterResource(id = R.drawable.ic_arrow_right),
  contentDescription = "",
  modifier = Modifier
             .padding(4.dp, 4.dp).background(colorResource(id = R.color.greenColor), CircleShape)
              .clip(CircleShape),
  colorFilter = ColorFilter.tint(colorResource(id = R.color.white)),
            contentScale = ContentScale.Crop,
 )

Upvotes: 5

James Christian Kaguo

Reputation: 1469

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

Upvotes: 5

Valeriy Katkov

Reputation: 40582

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

Upvotes: 189

How to draw a circular image in Android Jetpack Compose?

Answers (5)

Related Questions