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.
You can do it by providing LocalRippleTheme. All views inside CompositionLocalProvider content will have no ripple.
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,
)
}