CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-material3android-compose-textfieldmaterial3
rysv
rysv

Reputation: 3440

Jetpack Compose how to handle long bottom bar text labels

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.

enter image description here

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?

Upvotes: 3

Views: 588

Answers (3)

JoaoGalli
JoaoGalli

Reputation: 472

I find it strange that the app Home from Google uses Material 3 bottom bar, but when I tried with the same labels and same text size the labels don't fit.

I am trying to configure the Margin between destinations...

enter image description here

Upvotes: 0

Đốc.tc
Đốc.tc

Reputation: 923

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!

Upvotes: 1

Arthur Khazbulatov
Arthur Khazbulatov

Reputation: 930

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"?

Upvotes: 1

Related Questions