How to disable ripple effect on any Jetpack Compose view?

Question

In Jetpack Compose, how to remove (or change the shape of) the ripple effect when clicking on an Item ?

This is an example with NavigationBar from Material Design 3

var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")

NavigationBar {
    items.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index }
        )
    }
}

Trying to add a Modifier with

modifier = Modifier.clickable(interactionSource = interactionSource,indication = null){}

both on the NavigationBar and on the NavigationBarItem, does not work.

Answer 1

You can do it by providing LocalIndication. All views inside CompositionLocalProvider content will have no ripple.

CompositionLocalProvider(
    LocalIndication provides ClearIndicationNodeFactory,
) {
    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

ClearIndicationNodeFactory:

data object ClearIndicationNodeFactory : IndicationNodeFactory {
    override fun create(interactionSource: InteractionSource): DelegatableNode = object : Modifier.Node() {}
}

---

Old answer, before Compose 1.7.0 you can do it by providing LocalRippleTheme.

CompositionLocalProvider(
    LocalRippleTheme provides ClearRippleTheme
) {
    NavigationBar {
        items.forEachIndexed { index, item ->
            NavigationBarItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }
}

ClearRippleTheme:

object ClearRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor(): Color = Color.Transparent

    @Composable
    override fun rippleAlpha() = RippleAlpha(
        draggedAlpha = 0.0f,
        focusedAlpha = 0.0f,
        hoveredAlpha = 0.0f,
        pressedAlpha = 0.0f,
    )
}