How to disable ripple effect when clicking in Jetpack Compose

Short answer:
to disable the ripple pass null in the indication parameter in the clickable modifier:

val interactionSource = remember { MutableInteractionSource() }
Column {
    Text(
        text = "Click me without any ripple!",
        modifier = Modifier
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) {
                /* doSomething() */
            }
    )

Why it doesn’t work with some Composables as Buttons:

Note that in some Composables, like Button or IconButton, it doesn’t work since the indication is defined internally by the component which uses indication = rememberRipple(). This creates and remembers a Ripple using values provided by RippleTheme.

In this cases you can’t disable it but you can change the appearance of the ripple that is based on a RippleTheme. You can define a custom RippleTheme and apply it to your composable with the LocalRippleTheme.

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

Custom modifier

If you prefer you can build your custom Modifier with the same code above, you can use:

fun Modifier.clickableWithoutRipple(
    interactionSource: MutableInteractionSource,
    onClick: () -> Unit
) = composed(
    factory = {
        this.then(
            Modifier.clickable(
                interactionSource = interactionSource,
                indication = null,
                onClick = { onClick() }
            )
        )
    }
)

and then just apply it:

    Row(
        modifier = Modifier
            .clickableWithoutRipple(
                interactionSource = interactionSource,
                onClick = { doSomething() }
            )
    ){ 
      //Row content
    }

Long answer:
If you add the clickable modifier to a composable to make it clickable within its bounds it will show an Indication as specified in indication parameter.

By default, indication from LocalIndication will be used.

If you are using a MaterialTheme in your hierarchy, a Ripple, defined by rememberRipple(), will be used as the default Indication inside components such as androidx.compose.foundation.clickable and androidx.compose.foundation.indication.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)