How to disable ripple effect when clicking in Jetpack Compose

Question

In Jetpack Compose, when you enable clickable {} on a modifier for a composable, by default it enables ripple effect for it. How to disable this behavior?

Example code

Row(modifier = Modifier          .clickable { // action } ) 

Answer 1

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 and my neighbour will indicate as well!",         modifier = Modifier             .clickable(                 interactionSource = interactionSource,                 indication = null             ) {                 /* .... */             }     ) 

Long answer:
If you add the clickable modifier to the element 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 will be used as the default Indication inside components such as androidx.compose.foundation.clickable and androidx.compose.foundation.indication.

Answer 2

Use this Modifier extension:

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

then simply replace Modifier.clickable {} with Modifier.noRippleClickable {}

Row(modifier = Modifier.noRippleClickable {    // action  })