My app has a simple navigation bar built with Material 3 and Jetpack Compose. Always good, but the icons inside the navigation bar seem to align a little differently than they do in the Google Play app.
What modifier or line of code do I need to write to get the result like Google Play?
Navigation bar:
@Composable
fun BottomNavScreen(
navController: NavHostController,
modifier: Modifier = Modifier
) {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
val selectionMap = remember(currentDestination) {
tabItems.associateWith { tabItem ->
(currentDestination?.hierarchy?.any { it.route == tabItem.route } == true)
}
}
NavigationBar(modifier = modifier) {
tabItems.forEach { tabItem ->
val selected = selectionMap.getOrDefault(tabItem, false)
NavigationBarItem(
selected = selected,
onClick = { navigate(navController, tabItem.route) },
icon = {
val icon = if (selected) {
tabItem.selectedIcon
} else {
tabItem.unselectedIcon
}
Icon(imageVector = icon, contentDescription = null)
},
label = {
val textWeight = if (selected) {
FontWeight.Bold
} else {
FontWeight.Medium
}
Text(
text = stringResource(tabItem.iconTextId),
fontWeight = textWeight,
fontSize = 14.sp
)
}
)
}
}
}
And I place it like this:
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Scaffold(bottomBar = { BottomNavScreen(navController) }) { paddingValues ->
Column(modifier = Modifier.padding(paddingValues)) {
NavGraph(navController)
}
}
}
Mine version — bottom picture Google Play — top picture