Search code examples
androidkotlinandroid-jetpack-composeandroid-jetpack

Corner rounding not visible in jetpack compose


I am trying to do this as first time jetpack practice image

Actually this is the code, the only thing missing is the rounded corners, I tried it and it does clip content, but it is not visible.

@Preview
@Composable()
fun Horizontal_card (){
Row(
    Modifier
        .size(width = 352.dp, height = 80.dp)
        .background(MaterialTheme.colors.background)
        .clip(RoundedCornerShape(10.dp)),
    verticalAlignment = Alignment.CenterVertically) {
    Spacer(Modifier.width(16.dp))
    Cardcontent ()
}

}

This is the preview of the component: image2


Solution

  • Order of Modifiers matter. At the moment you set your background with

    fun Modifier.background(
        color: Color,
        shape: Shape = RectangleShape
    ) = this.then(
        Background(
            color = color,
            shape = shape,
            inspectorInfo = debugInspectorInfo {
                name = "background"
                value = color
                properties["color"] = color
                properties["shape"] = shape
            }
        )
    )
    

    which uses RectangleShape by default.

    You should either call

    Modifier
        .size(width = 352.dp, height = 80.dp)
        .background(MaterialTheme.colors.background, RoundedCornerShape(10.dp))
    

    or

    Modifier
     .size(width = 352.dp, height = 80.dp)
     .clip(RoundedCornerShape(10.dp))
     .background(MaterialTheme.colors.background)