How to reduce top and bottom padding of Material3 NavigationBar

1k Views Asked by At

I am using material3 NavigationBar for the bottom navigation, inside the bottomBar slot of a Scaffold. Even in the specs, it look very thick - https://m3.material.io/components/navigation-bar/specs

How do I remove some padding from the top and bottom of the icon/text to make it more slender?

enter image description here

When I play with the height, it makes the text and icon overlap, but keeps the big padding intact.

navigationBar with lower height

Trying to play with the windows insets, like other answers here suggested did not yield what I am looking for. Then again, the explanation to use them was not very clear.

Looking at the top and bottom padding of the NavigationBarDefaults.windowsInsets.getTop/Bottom yields zeros.

Not using modifiers, this is out of the box components. Only added modifiers to color the background and change height for testing only ,to produce the screenshots.

NavigationBar {
    tabs.forEach { tab ->
        NavigationBarItem(label=..., icon=..., onClick=..., selected=...)
   }
}

Here's the code that produced the green squashed bar

NavigationBar(modifier = Modifier.height(60.dp)) {
    tabs.forEach { tab ->
        NavigationBarItem(modifier = Modifier.background(Color.green), label=..., icon=..., onClick=..., selected=...)
   }
}
0

There are 0 best solutions below