Wrong ripple in material3 NavigationBar in Jetpack Composee

user_15061682 0
Viewed 509

When I use Material3 NavigationBar in Jetpack Compose I get wrong rectangular ripple effect like this:

enter image description here

Material3 library version: 1.0.0-alpha06 Code:

NavigationBar(modifier = Modifier.navigationBarsPadding()) {
                NavigationBarItem(
                    selected = ...,
                    onClick = {
                        navController.navigate(ScreenComponents(context).mainScreen) {
                            launchSingleTop = true
                        }
                    },
                    icon = {
                        ...
                    },
                    alwaysShowLabel = false,
                    label = {
                        Text(text = ..., color = MaterialTheme.colorScheme.onSurface)
                    }
                )
                // ...
android-navigation-bar android-jetpack-compose android
3 Answers
user_20165620

In NavigationBarItem I use this modifier to change the shape of the ripple

modifier = Modifier
    .padding(4.dp)
    .background(MaterialTheme.colorScheme.background, RoundedCornerShape(24.dp))
    .clip(RoundedCornerShape(24.dp))
user_185698540

They seem to have changed the guideline images since the answer from @Gabriele Mariotti and now the ripple only appears on the 'pill'.

Guidelines

There is an easy way to disable the ripple entirely, but not to isolate it to the pill. Hopefully they update this before the M3 composables come out of alpha.

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

    @Composable
    override fun rippleAlpha() = RippleAlpha(0F, 0F, 0F, 0F)
}

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
        NavigationBar {
            ...
user_100822970
Related