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

score 2 · Accepted Answer · answered Aug 01 '22 at 16:41

2

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
)

answered Aug 01 '22 at 16:41

Gabriele Mariotti

320,139
94
887
841

@GabrieleMariottican you help me on this [issue](https://stackoverflow.com/q/73204801/11560810) – Kotlin Learner Aug 02 '22 at 09:12

score 1 · Answer 2 · answered Jul 30 '22 at 12:04

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.

score 0 · Answer 3 · answered Jul 31 '22 at 12:29

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

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

3 Answers3