Jetpack Compose how to handle long bottom bar text labels

Question

When using the bottom navigation bar with Jetpack Compose version 1.5.4, Material3 1.2.0-rc01 as follows

BottomNavigationItem().bottomNavigationItems().forEachIndexed { _, navigationItem ->
    NavigationBarItem(
        selected = navigationItem.route == currentDestination?.route,
        label = {   
            Text(navigationItem.label)
        },          
        icon = {    
            Icon(       
                navigationItem.icon,
                contentDescription = navigationItem.label
            )           
        },          
        onClick = { 
            navController.navigate(navigationItem.route) {
                popUpTo(navController.graph.findStartDestination().id) {
                    saveState = true
                }           
                launchSingleTop = true
                restoreState = true
            }           
        }           
    )           
}  

I see it like here (in Moto G - 4.5") when I use a longer text label. Looks ok on Pixel 5.

The label "Top Movies" wraps and pushes the icon above.

I don't think I should use explicit fontSize (like 10.dp which fixes the issue). Is there a better way of handling this across device sizes?

Answer 1

According to Material Design 3 guidelines, the right thing to do would be to come up with a shorter text label instead, preferably consisting of one word.

Does your app specialize in movies? Would it be appropriate to omit the word "Movies" and label the destination "Top" or "Hot" or "Best" or "Popular"?

Answer 2

There is no guarantee that there will be enough space in this case. Things will get worse with the use of multiple languages.

1. You can limit the line of text below the icon to balance the buttons. But it will not be able to display all the text
2. With small screens this will be worse so the solution is to allow horizontal scrolling of the navigation bar
3. As a last resort, if you cannot meet that requirement, you need to redesign it to reduce the number of buttons in the toolbar below.

Hope to help you!