androidandroid-jetpackandroid-jetpack-compose

How to disable ripple effect when clicking in Jetpack Compose


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

Solution

  • To disable the ripple effect, have to pass null to indication property of the modifier.

    More about indication on Jetpack Compose documentation

    Code

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