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?
When I play with the height, it makes the text and icon overlap, but keeps the big padding intact.
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=...)
}
}

