Remove Ripple Effect from Clickable and Toggleable Widget In Jetpack Compose

Sometimes ripples effects are what we don’t want

Photo by Ave Calvar on Unsplash

When working with some widgets in Compose, we get the ripple effect out of the box. While this is a nice visual effect to have, sometimes it just doesn’t work well with the design in mind, so we have to find a way to get rid of it.

I was facing this same dilemma when designing a toggleable widget layout recently, but after some tinkering, I was able to get rid of it, and it’s as simple as using a Kotlin extension function.

Toggleable…

fun Modifier.noRippleToggleable(
    value: Boolean,
    onValueChange: (Boolean) -> Unit
): Modifier = composed {
    toggleable(
        value = value,
        indication = null,
        interactionSource = remember { MutableInteractionSource() },
        onValueChange = onValueChange
    )
}

What I did was simple extend the compose modifier public interface and call the base toggleable modifier but with little adjustment to the indication parameter we change the value to null, that all and we apply it like this

Column(
    modifier =
    Modifier
        .wrapContentSize()
        .noRippleToggleable(
            value = isSelected,
        ) {
            //onValuChangeImplementation
        },
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
//your composable here
}

Clickable…

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

Just like we did with the Toggleable modifier above, we just need to give the indication parameter null value, and it is applied below

Column(
    modifier =
    Modifier
        .wrapContentSize()
        .noRippleClickable{
          onClick()
        },
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
//your composable here
}

Thanks for joining me on this journey. I hope you found this information helpful and educational. If there’s anything you’re curious about or if I missed anything important, please don’t hesitate to reach out and ask!

I’m here to help, and I promise to respond to every comment. Let’s keep the conversation going!

Until next time, I’m Jnr. Bye for now! 🖤