Reduce padding in NavigationBar with Material 3

user_11287140 0
Viewed 641

I'm using the new Material 3 NavigationBar and NavigationBarItem components, I want the NavigationBar to be thinner, because the default one is too large. I want one similar to the one Gmail or Drive has (see picture at the end for the comparison). Making the icon smaller doesn't work, and neither changing all the available paddings (Icon, NavigationBar and NavigationBarItem).

This is the Composable code, if I change the NavigationBar heigh (using Modifier) then this happens: enter image description here

I primarly want to remove the space between the label and the bottom, and the one between the top and the icon.

@Composable
fun MyAppBottomBar(navController: NavController, tabs: Array<MenuBottom>) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route ?: MenuBottom.INICIO.route
    val rutas = remember { MenuBottom.values().map { it.route } }
    if (currentRoute in rutas) {
        NavigationBar(containerColor = elevation01) {
            tabs.forEachIndexed { index, item ->
                NavigationBarItem(
                    selected = currentRoute == item.route,
                    onClick = {
                        if (item.route != currentRoute) {
                            navController.navigate(item.route) {
                                popUpTo(navController.graph.startDestinationId) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    },
                    label = { Text(stringResource(id = item.title)) },
                    icon = {
                        if (item.route == currentRoute) {
                            Icon(item.selectedIcon, contentDescription = null, tint = Color.Black)
                        } else {
                            Icon(item.unselectedIcon, contentDescription = null)
                        }
                    },
                    colors = NavigationBarItemDefaults.colors(
                        selectedIconColor = Color.Black,
                        unselectedIconColor = Color.Black,
                        indicatorColor = Greenyellow,
                        selectedTextColor = Color.Black,
                        unselectedTextColor = Color.Black
                    )
                )
            }
        }
    }
}

enter image description here

material-components-android android-jetpack-compose kotlin android
2 Answers

This most likely has to do with the bottom navigation. The grey bar you see has its own padding by default.

Have a look at this documentation on how to remove those System intents.

Here's what you need to do in a nutshell:

implementation "com.google.accompanist:accompanist-insets:<version>"

Then in your MainActivity call WindowCompat.setDecorFitsSystemWindows(window, false) like this:

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContent {...}
    }

Now your App should use the entire Screen and your NavigationBar should have the same height as the one from Gmail.

To apply single ones of them again e.g. StatusBar call a modifier:

Modifier.statusBarsPadding()
user_172587090

NavigationBar does not use padding. It uses a fixed height. How do I know that? While working with MUI (which is a React implementation of Material design) I found that they use a fixed height, and margin: auto to center items vertically. Then I figured jetpack compose NavigationBar might do the same and the idea was right. So whats the solution?

NavigationBar(
    modifier = Modifier.height(64.dp)
) {...}

Or change it to your taste. It will shrink and grow the space taken up.

user_140566480
Related