I'm using the <sample> BottomNavigation bar and it...

# compose

[Colton Idle]

I'm using the sample BottomNavigation bar and it's items like such:

BottomNavigation {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
)}}

but on samsung devices (which are typically "zoomed in" out of the box) the text and icon overlap. If I try to increase the icon size (or add padding) then it grows larger than the bottomBar can support and so my icons are cut off. Surprisingly the BottomNavigationBar doesn't grow in height to support the larger text size or icon size. Is there any "right" way to fix this or should I look to implement an autosize text for the tab text?

[Chris Sinco [G]]

@Louis Pullen-Freilich [G] the "not growing on content size" part is intentional?

[Louis Pullen-Freilich [G]]

The spec explicitly fixes the height:

https://material.io/components/bottom-navigation#specs

So I would say this is WAI, although it’s surprising that the text and icon overlap with the default font scale, there should be enough space for most font sizes

[Colton Idle]

Having a fixed height is like... wrong though right? if anything it should be a min height, but it should be able to grow? I'm using a pretty standard setup, but just running on an s21 with text enlarged. I guess for now I'll try to enable some auto resize text in the meantime. Definitely a bit weird thouh.