10

I try to get a button that has this cool effect of the border radius changing when tapped (like in the Android 12 default calculator application) while also keeping the button's ripple effect.

What I thought would work was this:

var pressed by remember { mutableStateOf(false) }
val borderRadius by animateDpAsState(
    if (pressed) 10.0.dp
    else 20.0.dp
)
val buttonTitle = "uniqueButton"

Button(
    onClick = {
        // some on click stuff
    },
    shape = RoundedCornerShape(borderRadius),
    modifier = Modifier
        .pointerInput(buttonTitle) {
            detectTapGestures(
                onPress = {
                    pressed = true
                    tryAwaitRelease()
                    pressed = false
                }
            )
        }
) {
    Text(text = buttonTitle)
}

But the code within the function passed for onPress is never executed. From my understandig it should be, when the button is tapped or pressed. Where is my mistake, do I misunderstand something in the documentation?

1 Answer 1

10

Most of Compose controls have interactionSource parameter for this purpose. Here's how you can use it:

val interactionSource = remember { MutableInteractionSource() }
val pressed by interactionSource.collectIsPressedAsState()
Button(
    onClick = {},
    interactionSource = interactionSource,
) {

}
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.