2

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)
            }
        }
    }

enter image description here

Mine version — bottom picture Google Play — top picture

0 Answers0