How to detect that a button is pressed in Jetpack Compose?

Question

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?

Phil Dukhov · Accepted Answer · 2022-01-15 03:45:51Z

12

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

answered Jan 15, 2022 at 3:45

Phil Dukhov

91k22 gold badges276 silver badges302 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

msc87 Over a year ago

I get this error: Type 'State<Boolean>' has no method 'getValue(Nothing?, KProperty<*>) and thus it cannot serve as a deleg'

Phil Dukhov Over a year ago

@msc87 this is a very common warning when developing for Compose, you can move the pointer to interactionSource and apply the suggested fix, or add import androidx.compose.runtime.getValue manually.

Collectives™ on Stack Overflow

How to detect that a button is pressed in Jetpack Compose?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related