5

I try to create a tappable surface in Jetpack Compose where the elevation changes when the user taps the surface. The following code already works:

var tapped by remember { mutableStateOf(false) }
val elevation by animateDpAsState(
    targetValue = if (tapped) 0.dp else 5.dp,
    animationSpec = tween(50)
)

Surface(
    shape = RoundedCornerShape(20.dp),
    modifier = Modifier
         .padding(16.dp)
         .requiredSize(150.dp)
         .pointerInput(Unit) {
              detectTapGestures(onPress = {
              tapped = true

              tryAwaitRelease()

              tapped = false
         })
    },
    elevation = elevation
) {
  ...
}

However I would like to have a ripple effect during the tap. How could I achieve this?

The default button/surface onClick and clickable is not suitable because it only handles press inputs but no taps.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
oldu
  • 113
  • 1
  • 7

1 Answers1

12

You use Modifier.indication to add ripple effect, and pass events with interactionSource to update it state like this:

var tapped by remember { mutableStateOf(false) }
val interactionSource = remember { MutableInteractionSource() }

Surface(
    modifier = Modifier
        .indication(interactionSource, LocalIndication.current)
        .pointerInput(Unit) {
            detectTapGestures(onPress = { offset ->
                tapped = true

                val press = PressInteraction.Press(offset)
                interactionSource.emit(press)

                tryAwaitRelease()

                interactionSource.emit(PressInteraction.Release(press))

                tapped = false
            })
        }
) {
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
  • Thank you! Unfortunately the clickable Modifier only handles a press interaction when the item is pressed (not tapped). See Modifier.clickable() implementation. – oldu Oct 28 '21 at 12:40
  • @oldu see my `println("handle tap")`, you can handle the tap there. In your sample code `tapped` is true during long press too, not only on tap. – Phil Dukhov Oct 28 '21 at 12:42
  • Oh yes you're right! The problem seems to be in the interaction flow. I now delayed the `tapped = false` for a few milliseconds and i can see that press is called. Unfortunately in the UI there is a little delay between the tap of the button and the elevation animation. This delay prevents from a smooth user interaction. – oldu Oct 28 '21 at 13:23
  • @oldu I've updated my answer with example of ripple effect on a custom gesture – Phil Dukhov Oct 28 '21 at 13:33