Border radius is not changing based on shape when user click on it jetpack compose

Question

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 stack overflow 1 and stack overflow 2 but nothing works.

binding.itemComposable.setContent {
            Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
                val options = getOptions()
                options.forEachIndexed { _, optionText ->
                    val interactionSource = remember { MutableInteractionSource() }
                    val isPressed by interactionSource.collectIsPressedAsState()
                    val backgroundColor = if (isPressed) DuckEggBlue else OffWhite
                    val textColor = if (isPressed) TealBlue else Slate
                    val borderWidth = if (isPressed) 1.dp else 0.dp
                    val borderColor = if (isPressed) Aqua else OffWhite
                    val clickable = Modifier.clickable(
                        interactionSource = interactionSource,
                        indication = rememberRipple(true)
                    ) {
                        println("Item Click")
                    }
                    Surface(
                        modifier = Modifier
                            .then(clickable)
                            .border(borderWidth, borderColor),
                        shape = RoundedCornerShape(4.dp)
                    ) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(backgroundColor)
                                .padding(16.dp),
                            text = optionText,
                            style = Typography.h3,
                            fontWeight = FontWeight.Medium,
                            color = textColor
                        )
                    }
                }
            }
        }

Without click on item corner is 4 dp

When I click it's not changing corner

Answer 1

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.

Answer 2

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
            )
        }
    }

Answer 3

If you want to handle the click on a Surface you have to use the function that accepts an onClick() :

Surface(
    onClick = {},
    shape = RoundedCornerShape(4.dp),
    border = BorderStroke(borderWidth,borderColor),
    interactionSource = interactionSource
)