Skip to content

Jetpack Compose image rounded corners

  • by
Jetpack Compose image rounded corners

1. Overview

In this article, we will learn to display the image with rounded corners in Jetpack Compose.

2. Rounded corners image using Jetpack modifier

You can use modifiers to decorate or configure a composable. Jetpack compose allows you to display an image with a circle shape or rounded corners easily by using the clip function of the Modifier. You can apply this clip function to any composable.

Here, we will use it with Image and AsyncImage composables.

fun Modifier?.clip(shape: Shape?): Modifier

You can pass the CircleShape as an argument to the clip function of the Jetpack Modifier. This CircleShape applies 50% to all four corners to form a circle image.

val CircleShape = RoundedCornerShape(50)

For example, the following Image composable takes the modifier as input and shows a rounded corner image on the screen. Along with the clip function, we have specified contentScale as Crop to scale the image uniformly (maintaining the source’s aspect ratio).

Image(
        painter = painterResource(R.drawable.baby_pic),
        contentDescription = stringResource(R.string.image_content_desc),
        contentScale = ContentScale.Crop,            
        modifier = Modifier
            .size(64.dp)
            .clip(RoundedCornerShape(10.dp))                       
    )

Similarly, you can use the clip function with the Coil library’s AsyncImage composable that loads the image from external sources. To understand how to load the image using the coil library, refer to this article.

For example, the following code loads an image from the external url and later clips it as a rounded corner image.

 AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data("https://wallpaperaccess.com/full/137507.jpg")
                .crossfade(true)
                .build(),
            placeholder = painterResource(R.drawable.ic_launcher_foreground),
            contentDescription = stringResource(R.string.image_content_desc),
            contentScale = ContentScale.Crop,
            modifier = Modifier.size(64.dp).clip(RoundedCornerShape(10.dp))
        )

2.1. Jetpack compose image with border

Sometimes you might need to show a border around the rounded corner image like a profile picture.

To show a border, you can use the border function of Modifier to set a border around the image. The border function takes the color \ brush, size, and shape for the border. Then draw it accordingly.

For example, the following code draws a 2 dp dark gray border around the rounded corner image. 

Image(
        painter = painterResource(R.drawable.baby_pic),
        contentDescription = stringResource(R.string.image_content_desc),
        contentScale = ContentScale.Crop,            
        modifier = Modifier
            .size(64.dp)
            .clip(RoundedCornerShape(10.dp))
            .border(2.dp, Color.DarkGray, RoundedCornerShape(10.dp)))

3. Conclusion

To sum up, we have learned to show a rounded corner image using the clip function of the Modifier class in the Android Jetpack compose. You can find the code samples of this article in our GitHub repository.