Hey guys I am using RoundedCornerShape(4.dp) to my Surface which looks fine. When I tried to click on the item it not showing me 4dp corner in Surface. I tried this

When I click it's not changing corner

CodePudding user response：

Create a variable for shape

 val shape = RoundedCornerShape(4.dp)

Use it in Modifier.clip() and Modifier.border() like this,

Surface(
    modifier = Modifier
        .clip(shape)
        .border(
            width = borderWidth,
            color = borderColor,
            shape = shape,
        )
        .then(clickable),
    // shape = shape,
)

• shape in border() specifies the shape of the border which by default is RectangleShape. Hence, you are seeing the rectangle border.

• shape in clip() changes the shape of the composable before the click action is added. This is to make the ripple effect appear only on the given shape.

Note: Order of modifiers are important.

The shape in the Surface may not be needed after these changes.

CodePudding user response：

If youre using Surface to wrapping the content, try to add a container inside the content for example Box or Column. Then use your Surface only as a shape mask, the background and other content will be flexible as you want.

This is the example

Surface(
        modifier = Modifier
            .then(clickable)
            .border(borderWidth, borderColor),
        shape = RoundedCornerShape(4.dp)
    ) {
        Box(modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .background(Color.Green)){
            Text(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                text = optionText,
                style = Typography.h3,
                fontWeight = FontWeight.Medium,
                color = textColor
            )
        }
    }