Bottom navigation bar label get clipped to next line even without filling the whole space jetpack compose

Admin 1
Viewed 697

How to make icon label in single line without breaking it, Reducing font size help but making smaller makes hard to read.

Bottom Navigation implementation :

    BottomNavigation(backgroundColor = Color.White) {
        items.forEach { item ->
            BottomNavigationItem(
                selected = currentRoute == item.route,
                onClick = { /*TODO*/ },
                icon = {
                    if (currentRoute == item.route) ActiveIcon(item.activeIcon)
                    else Icon(painterResource(item.disableIcon), null)
                },
                label = {
                    Text(
                        stringResource(item.title), // Label
                        fontWeight = FontWeight.SemiBold
                    )
                },
            )
        }
    }

enter image description here

android-jetpack-compose
1 Answers

Use softWrap on your Text and set it to false:

BottomNavigation(backgroundColor = Color.White) {
  items.forEach { item ->
        BottomNavigationItem(
             selected = currentRoute == item.route,
             onClick = { /*TODO*/ },
             icon = {
                  if (currentRoute == item.route) ActiveIcon(item.activeIcon)
                  else Icon(painterResource(item.disableIcon), null)
             },
             label = {
                  Text(
                        stringResource(item.title), // Label
                        fontWeight = FontWeight.SemiBold,
                        softWrap = false
                  )
             },
        )
   }
}

Note: The BottomNavigation is not scrollable, so if the number of items in your navigation bar is too much, the text will get clipped on those items where it exceeds the tab's width. This is by design.

user_7536320
Related