Rounded corners of image in Jetpack Glance Widget

Question

Is there any way how to make image corners in Jetpack Glance Widget rounded? I know there is a GlanceModifier method cornerRadius, but this is available only in higher versions (S+).

Answer 1

Unfortunately the underlying API to apply the rounded corners is only available in S and there is no easy way to backport that for Glance.

You can either create a drawable with rounded corners in XML or modify at runtime your image and apply the corners there.

Answer 2

Use: GlanceModifier.cornerRadius(8.dp)

Answer 3

I am using a Coil to reach it for all version of android

• if it needs just rounded corners, we can use Coil's RoundedCornersTransformation
• if it needs rounded corners with a border, we can use BorderedRoundedCornersTransformation https://gist.github.com/sergestanislavsky/bc8947c254c4238d85d5ff7e88245714
• if it needs just a circled image, we can use Coil's CircleCropTransformation
• if it needs a circled image with a border, we can use BorderedCircleCropTransformation https://gist.github.com/sergestanislavsky/52c76a5a0b61cf5f76e39724916c6f88

Example (pay attention cornerRadiusPx is zero there)

val model by remember(
        source,
        isRoundedImage,
        borderImageWidth,
        borderImageColor
    ) {
        mutableStateOf(

            ImageRequest.Builder(context).apply {
                data(source)
                if (isRoundedImage) {
                    transformations(
                        BorderedCircleCropTransformation(
                            dpToPx(context, borderImageWidth),
                            borderImageColor.toArgb()
                        )
                    )
                } else {
                    transformations(
                        BorderedRoundedCornersTransformation(
                            dpToPx(context, borderImageWidth),
                            0f,
                            borderImageColor.toArgb(),
                        )
                    )
                }
            }.build()
        )
    }

    AsyncImage(
        modifier = modifier,
        model = model,
        contentDescription = "Avatar",
    )