Reputation: 21
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.
Upvotes: 2
Views: 1344
Reputation: 1278
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:
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
)
}
}
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!
Upvotes: 1
Reputation: 64
You can add modifier like this for height
NavigationBar(
containerColor = MainWhite,
modifier = Modifier.height(65.dp)
) {}
Upvotes: -1