Jetpack compose uses Indication to represent the visual indication of the interactions. By default, when you add any clickable modifier to a component, it picks up the LocalIndication from the CompositionLocal hierarchy.
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. In some cases, you might not want any visual feedback for your clicks. 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 that you 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, the noRippleClickable modifier can be used by developers in any component to disable the ripple effect in interactions.