Search code examples
androidandroid-jetpack-composeandroid-navigation-barandroid-jetpack-compose-material3

Wrong ripple in material3 NavigationBar in Jetpack Compose


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

Solution

  • It is not a bug. It follows the material guidelines.

    enter image description here