How to clip the content to match to the corner of a Card in Compose?

Question

How can I clip the content to match the corner of the Card.

@Composable
fun PreviewWindow() {
    Card {
        Column(
            modifier = Modifier
                .padding(2.dp)
                .background(Color.Blue)
                .width(200.dp)
                .aspectRatio(1F)
        ) { }
    }
}

Look at the corners of the Card. I want them to clip at the padding. The CardDefalts has shape but I can't get corner radius.Thus it is not very dynamic.

I know that I can set custom shape to achieve this. But I want to know any dynamic solution.

Nirav Rangapariya · Accepted Answer · 2025-03-22 12:21:39Z

1

The issue occurs because Card has its own default shape CardDefaults.shape. To ensure that the Column inside it respects this shape, you need to clip it accordingly.

Here’s how you can do it:

@Composable
fun PreviewWindow() {
    Card {
        Column(
            modifier = Modifier
                .padding(2.dp)
                .clip(CardDefaults.shape) // Clip the Column to match the Card's shape
                .background(Color.Blue)
                .width(200.dp)
                .aspectRatio(1F)
        ) { }
    }
}

By applying .clip(CardDefaults.shape), the Column will take on the same rounded shape as the Card, ensuring proper clipping.

answered Mar 22 at 12:21

Nirav Rangapariya

5264 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Surendra Mar 22 at 15:34

But the inner content Radius should account for the padding. Meaning its radius should equal to Card corner radius - padding.

Collectives™ on Stack Overflow

How to clip the content to match to the corner of a Card in Compose?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related