Jetpack Compose BottomNavBar label overlapping Icon

Question

I was trying to implement jetpack compose bottomnavbar. But I encountered this problem. Whenever label don't get enough space it's overlapping the icon. Am I missing something? Is there any solution like truncating or shrinking text automatically?

compose_version = '1.0.0-beta09'

My Code

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            val items = listOf(
                Screen.Profile,
                Screen.FriendsList,
                Screen.Notification,
                Screen.Setting
            )

            Scaffold(
                bottomBar = {
                    BottomNavigation(
                        backgroundColor = MaterialTheme.colors.surface,
                        elevation = 8.dp
                    ) {
                        val navBackStackEntry by navController.currentBackStackEntryAsState()
                        val currentRoute = navBackStackEntry?.destination?.route
                        items.forEachIndexed { index, screen ->
                            BottomNavigationItem(
                                icon = {
                                    when (index) {
                                        0 -> Icon(Icons.Filled.Person, "Profile")
                                        1 -> Icon(
                                            painterResource(id = R.drawable.ic_friends),
                                            "Friends"
                                        )
                                        2 -> Icon(Icons.Filled.Notifications, "Notification")
                                        else -> Icon(Icons.Filled.Settings, "Settings")
                                    }
                                },
                                label = { Text(stringResource(screen.resourceId)) },
                                selected = currentRoute == screen.route,
                                selectedContentColor = MaterialTheme.colors.primary,
                                unselectedContentColor = Color.Black,
                                onClick = {
                                    navController.navigate(screen.route) {
                                        navController.graph.startDestinationRoute?.let {
                                            popUpTo(it) {
                                                saveState = true
                                            }
                                        }
                                        launchSingleTop = true
                                        restoreState = true
                                    }
                                }
                            )

                        }
                    }
                }
            ) {
                NavHost(navController, startDestination = Screen.Profile.route) {
                    composable(Screen.Profile.route) { Profile(navController) }
                    composable(Screen.FriendsList.route) { FriendsList(navController) }
                    composable(Screen.Notification.route) { FriendsList(navController) }
                    composable(Screen.Setting.route) { FriendsList(navController) }
                }
                
            }
        }
    }

Parrotfish

Answer 1

You can add the property maxLines = 1 to the Text used in the label:

BottomNavigationItem(
      /* your code */
      label = { Text("Notification",
               maxLines = 1,
               overflow = TextOverflow.Ellipsis) /* optional */
      }
)

Moorehead

Perfect. Thanks @Gabriele – Parrotfish

Be aware that ellipsis in navigation bar is now specifically marked as a "do not" in Material3 specs. Sadly they do not offer an alternative, except to use small words. m3.material.io/components/navigation-bar/… – Circus