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?
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?
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):
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
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,
)
For those who wonder, how to make an image squared (or round) without explicitly setting its sizes, there is Modifier.aspectRatio(1f)