How to disable Ripple effect in Jetpack Compose

Jetpack compose uses Indication to represent the visual indication of the interactions. By default, when you add to any clickable modifier to a component, it picks up the LocalIndication from the CompositionLocal hierarchy.

ripple animation by

                          Ripple illustration by JungIk Lee

If you are using MaterialTheme as your current theme, the LocalIndication available in the CompositionLocal hiearchy by default will pick up Ripple as the default interaction feedback for clicks. At some places, you necessarily don’t want any indications for your click. So to disable it, Compose allows easy way to disable/alter the Indication.

To achive that, in clickable modifier pass null for the indication parameter.

val interactionSource = remember { MutableInteractionSource() }
Row (modifier = Modifier.clickable(
                    indication = null, 
                    interactionSource = remember { interactionSource }
          ) { // action

           }
)

One of the best things about Jetpack Compose is use can take advantage of kotlin-extension functions to create your own custom modifiers for reusability.

To achieve that,

inline fun Modifier.noRippleClickable(
    crossinline onClick: () -> Unit
): Modifier = composed {
    val interactionSource = remember { MutableInteractionSource() }
    clickable(
        indication = null,
        interactionSource = interactionSource
    ) {
        onClick()
    }
}

Now noRippleClickable modifier can be used in any component to disable ripple effect in interactions.