Rounded Corner Images in Jetpack Compose

Making an image rounded corner is something which will make UI more attractive. So most of the designers will ask the developers to make that in their UI. When android came up with cardview,there was an option to make rounded corner by putting the below line in xml.

card_view:cardCornerRadius="4dp"

Before cardview, it was required to create a shape with rounded corner and set it to imageview.

With Jetpack Compose it’s easier to make rounded corners.In this article, we will see how we can make an image rounded corner in jetpack compose.

With Jetpack compose for view dimensions we can change with Modifier.

@Composable
fun MovieImageBanner(imagePath: String) {
Image(modifier = Modifier
.width(180.dp)
.height(100.dp), painter = rememberCoilPainter(
request = Constants.BASE_IMAGE_URL + imagePath
),
contentDescription = ""
)
}

with the above code you can see a image view displayed with 180 dp width and 100 dp height.To make that imageview rounded corner,you need to call .clip for modifier and pass RoundedCornerShape(10.dp) ,here 10.dp is the corner radius.You can adjust the value according to your usecase.

@Composable
fun MovieImageBanner(imagePath: String) {
Image(modifier = Modifier
.width(180.dp)
.height(100.dp).clip(RoundedCornerShape(10.dp)),
 painter = rememberCoilPainter(
request = Constants.BASE_IMAGE_URL + imagePath
),
contentDescription = ""
)
}

This will make the above imageview with rounded corner.

Happy Reading…Happy Coding.

The above code snippet is taken from

-MVVMJetPackComposeSample/ListViewItem.kt at master · Yadunath/-MVVMJetPackComposeSample

which was part of the article

JetPack Compose With MVVM