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.

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.

• kotlin
• android-jetpack-compose
• material-design

Share Improve this question Follow asked Mar 22 at 11:49 SurendraSurendra 2366 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.