2

As solved here, I disable the tap flashing by setting the indication to null.

However, this is not working for Button or Icons?!

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
Ralf Wickum
  • 2,850
  • 9
  • 55
  • 103

2 Answers2

6

In the Button you can't use the indication=null in the clickable modifier since it is defined internally by the component which uses indication = rememberRipple(). This creates and remembers a Ripple using values provided by RippleTheme.

You can provide a custom LocalRippleTheme to override the default behaviour.

Something like:

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
    Button(
        onClick = { /*...*/ },
    ) {
       //...
    }
}

with:

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f,0.0f,0.0f,0.0f)
}
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • The solution isn't working for me. When the Button goes to `onPressed` state the ripple still appears over it. It's quite annoying because I would like to use the Material button but I will manage the colors manually for the background and for the content of the button. I'm relying on `InteractionSource.collectIsPressedAsState()` to listen for the `onPressed` state and adjust the colors of the button accordingly. But because of the default ripple that the button has there is an overlay over the button that breaks the inteded design. Returning `defaultColor() = Color.Transparent` doesn't solve. – Dionis Beqiraj Mar 13 '23 at 11:16
  • It seems that Compose is ignoring the **Alpha** at the color. `override fun defaultColor() = Color(0xFF000000)` and `override fun defaultColor() = Color(0x00000000)` come with the exact same result! – Dionis Beqiraj Mar 13 '23 at 11:59
0

You can use

Modifier.pointerInput(Unit) {
    detectTapGestures(
        onPress = { /* Called when the gesture starts */ },
        onDoubleTap = { /* Called on Double Tap */ },
        onLongPress = { /* Called on Long Press */ },
        onTap = { /* Called on Tap */ }
    )
}

instead of onClick().It' will not show the wave effect when click the button.

korita
  • 86
  • 4