4

I'm using the new AysncImage loader for compose inside a Box. The Box itself has a RoundedCornerShape. I have also added a RoundedCornerShape for the AsyncImage with the following values

Box(
            modifier = modifier

                .clip(RoundedCornerShape(16.dp))
        ) {
            AsyncImage(
                modifier = Modifier
                    .height(146.dp)
                    .clip(shape = RoundedCornerShape(
                        topStart = 16.dp,
                        topEnd = 16.dp,
                        bottomStart = 0.dp,
                        bottomEnd = 0.dp))
                ,
                model = R.drawable.image,
                contentDescription = null,
                contentScale = ContentScale.Crop,
            )
        }

But the image is rounded at all corners. Screen Shot here

I don't want the image to have rounded corners at bottom.

Sohail Shah
  • 41
  • 2
  • 3
  • 2
    Why do you have `clip(RoundedCornerShape(16.dp))` on your outer box? Isn't that going to clip your `AsyncImage` on every corner no matter what modifiers you put on your `AsyncImage`? – ianhanniballake May 30 '22 at 17:54
  • as #ianhanniballake said, just remove clip on AsyncImage(...) modifier, as box will clip your image automatically – masokaya May 30 '22 at 18:39
  • @ianhanniballake removed box clip and it does what I intended thanks – Sohail Shah May 31 '22 at 05:57

1 Answers1

8

Add this modifier to your AsyncImage

 modifier = Modifier.clip(RoundedCornerShape(topEnd = 8.dp , topStart = 8.dp))
Hesham Yemen
  • 437
  • 5
  • 6