How to change height of NavigationBar in Jetpack Compose with Material 3?

Question

I would like to change default height of NavigationBar of Material 3 using Jetpack Compose.

I have tried changing NavigationBar height using Modifier.height but it has a limit and the icon collides with the text.

This is my code:

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    Scaffold(
        bottomBar = {
            NavigationBar(
                containerColor = MainWhite
            ) {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination

                listOfNavItems.forEach { navItem ->
                    val selected =
                        currentDestination?.hierarchy?.any { it.route == navItem.route } == true

                    NavigationBarItem(
                        selected = selected,
                        onClick = {
                            navController.navigate(navItem.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        },
                        icon = {
                            Icon(
                                if (selected) navItem.filledIcon else navItem.outlinedIcon,
                                contentDescription = navItem.description,
                                modifier = Modifier.size(30.dp),
                            )

                        },
                        label = {
                            Text(
                                text = navItem.label,
                                style = MaterialTheme.typography.bodyLarge,
                                fontSize = 12.sp,
                                fontWeight = FontWeight.SemiBold,
                            )
                        },
                        colors = NavigationBarItemDefaults.colors(
                            selectedIconColor = MainTurquoise,
                            selectedTextColor = MainTurquoise,
                            indicatorColor = MainWhite,
                            unselectedIconColor = MainGrey,
                            unselectedTextColor = MainGrey,
                            disabledIconColor = Color.Black,
                            disabledTextColor = Color.Black
                        )
                    )
                }
            }
        }
    ) { paddingValues ->
        NavHost(
            navController = navController,
            startDestination = Screen.HomeScreen.route,
            enterTransition = {
                slideIntoContainer(
                    AnimatedContentTransitionScope.SlideDirection.Start,
                    tween(100)
                )
            },
            exitTransition = {
                slideOutOfContainer(
                    AnimatedContentTransitionScope.SlideDirection.Start,
                    tween(100)
                )
            },
            popEnterTransition = {
                slideIntoContainer(
                    AnimatedContentTransitionScope.SlideDirection.End,
                    tween(100)
                )
            },
            popExitTransition = {
                slideOutOfContainer(
                    AnimatedContentTransitionScope.SlideDirection.End,
                    tween(100)
                )
            },
            modifier = Modifier.padding(paddingValues)
        ) {
            composable(route = Screen.HomeScreen.route) {
                MainScreen()
            }
            composable(route = Screen.NewPostScreen.route) {
                NewPostScreen()
            }
            composable(route = Screen.InboxScreen.route) {
                InboxScreen()
            }
            composable(route = Screen.AccountScreen.route) {
                AccountScreen()
            }
        }
    }
}

I don't know how to change the height of the NavigationBar. Following https://m3.material.io/components/navigation-bar/overview we can see that container is taller, but it doesn't specify how to make it shorter.

Answer 1

To change the height of the NavigationBar in Jetpack Compose with Material 3, you need to create a custom NavigationBar since the default NavigationBar uses a fixed height defined by NavigationBarHeight. Here’s how you can do it:

Step 1: Create a Custom Navigation Bar

The default NavigationBar function uses .defaultMinSize(minHeight = NavigationBarHeight), which sets the default height. To customize the height, you can create your own version of the NavigationBar function.

Here’s a custom implementation:

@Composable
fun CustomNavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationBarDefaults.containerColor,
    contentColor: Color = MaterialTheme.colorScheme.contentColorFor(containerColor),
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
    windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = containerColor,
        contentColor = contentColor,
        tonalElevation = tonalElevation,
        modifier = modifier
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .windowInsetsPadding(windowInsets)
                .defaultMinSize(minHeight = 24.dp) // Change minHeight to your desired height
                .selectableGroup(),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            verticalAlignment = Alignment.CenterVertically,
            content = content
        )
    }
}

Step 2: Use the Custom Navigation Bar in Your App

When using the custom NavigationBar, make sure not to use NavigationBarItem as its child, since it also uses the default NavigationBarHeight. Instead, use other components like Text, IconButton, etc.

Here's an example of using the custom NavigationBar with IconButton:

@Composable
fun KPBottomBar(
    currentDestination: NavDestination?,
    onClick: (Any) -> Unit
) {
    CustomNavigationBar(
        containerColor = MaterialTheme.colorScheme.onPrimary,
        tonalElevation = 0.dp,
    ) {
        bottomNavigationItems.forEach { screen ->
            IconButton(
                modifier = Modifier.weight(1f),
                onClick = { onClick(screen.route) }
            ) {
                Icon(
                    imageVector = ImageVector.vectorResource(screen.icon),
                    contentDescription = null,
                    tint = if (currentDestination?.route == screen.route.javaClass.canonicalName) 
                           MaterialTheme.colorScheme.primary else Color.Gray
                )
            }
        }
    }
}

With this custom implementation, you can change the minHeight to any value you prefer for your navigation bar. Here are screenshots showing different heights using this method. Enjoy the customization!

Answer 2

You can add modifier like this for height

  NavigationBar(
                    containerColor = MainWhite,
                    modifier = Modifier.height(65.dp) 
                ) {}