I am trying to do this as first time jetpack practice

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

CodePudding user response：

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)

CodePudding user response：

You can define the shape attribute for your Row composable.

   Row(
        Modifier
            .size(width = 352.dp, height = 80.dp)
            .background(MaterialTheme.colors.background),
        verticalAlignment = Alignment.CenterVertically,
        shape = RoundedCornerShape(10.dp)
    ) {
        Spacer(Modifier.width(16.dp))
        Cardcontent ()
    }