Jetpack compuse material design 3 cardview with rounded edges is not filled up by image or ripple animation

Question

I am trying to fill up the rounded edges of my cardview but I cant find a way to do this here is the image that I took with the ripple onclick animation and also the top part of the image:

my jetpack compose layout:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NewStoryView(
    game : GameItem

) {
    CompositionLocalProvider(
        LocalMinimumTouchTargetEnforcement provides false,
    ) {
    Card(
        colors = CardDefaults.cardColors(containerColor = Color.White),
        onClick = { /* Do something */ },
        modifier = Modifier
            .padding(15.dp, 15.dp)
            .fillMaxWidth()
            .shadow(elevation = 4.dp, shape = RoundedCornerShape(5.dp))
            .clip(
                RoundedCornerShape(5.dp)
            )
            .background(color = Color.White)

    ) {
        Box (modifier = Modifier.fillMaxWidth()){
            if (game.yoast_head_json?.og_image?.get(0)?.url != "") {
                AsyncImage(

                    model = ImageRequest.Builder(LocalContext.current)
                        .data(game.yoast_head_json?.og_image?.get(0)?.url)
                        .crossfade(true)
                        .build(),
                    contentDescription = "Profile image",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier.fillMaxWidth().height(200.dp)
//                    .clip(RoundedCornerShape(1.dp, 1.dp, 0.dp, 0.dp))

                )
            }

            Text(
                text = game.title.rendered,
                color = Color.White,
                modifier = Modifier
                    .padding(15.dp, 15.dp)
                    .align(Alignment.BottomStart)
            )
        }
        Row(modifier = Modifier.padding(15.dp)) {
            Icon(imageVector = Icons.Default.Comment, contentDescription = "")
            Text(text = "0 reacties", modifier = Modifier.padding(10.dp, 0.dp))
        }


    }
}}

My question is how do I remove these edges so that the image will overlap them and also the ripple animation?

Answer 1

Remove the clip and the background modifier and use the shape parameter:

  Card(
        colors = CardDefaults.cardColors(containerColor = Color.White),
        onClick = { /* Do something */ },
        modifier = Modifier
            .padding(15.dp, 15.dp)
            .fillMaxWidth()
            .shadow(elevation = 4.dp, shape = RoundedCornerShape(5.dp)),
        shape = RoundedCornerShape(5.dp)

    )

Answer 2

It seems that you are trying to fill up the rounded edges of a CardView in Jetpack Compose with an image or ripple animation. One approach you can take is to use a Box composable to add a Surface composable and an Image composable, and set the Modifier.fillMaxSize() to both. Then, you can use a Modifier.clip with a RoundedCornerShape to clip the edges of the Surface and Image composable

 Card(
    onClick = { /* Do something */ },
    modifier = Modifier
        .padding(15.dp, 15.dp)
        .fillMaxWidth()
) {
    Box {
        Surface(
            shape = RoundedCornerShape(5.dp),
            color = Color.White,
            modifier = Modifier.fillMaxSize()
        ) {
            // Add any other composable content you want to display in the card
            Text(
                text = "Hello, World!",
                modifier = Modifier.padding(16.dp)
            )
        }
        
        Image(
            painter = rememberImagePainter(
                data = "https://example.com/image.jpg"
            ),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )
    }
}