Compose BottomNavigation padding

Question

Im trying to properly apply a bottom window inset on the BottomNavigation composable. I have an edge to edge scaffold it looks like that:

When using:

modifier.navigationBarsPadding()

On the bottom navigation im getting the following:

I'm trying to achieve the following:

         Scaffold(
            modifier = Modifier
                .background(brush = NanitColors.blueGradient),
            topBar = {
                topBar()
            },
            bottomBar = {
                if (shouldShowBottomBar) {
                    BottomNavigationBar(navController)
                }
            },
            scaffoldState = scaffoldState,
            drawerContent = {
                Drawer { route ->
                    scope.launch {
                        scaffoldState.drawerState.close()
                    }
                    navController.navigate(route.route) {
                        popUpTo(navController.graph.startDestinationId)
                        launchSingleTop = true
                    }
                    currentDestination = route
                }
            },
            drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
        ) { innerPadding ->
            NavigationHost(navController = navController, modifier = Modifier.padding(innerPadding))
        }
    
     val topBar: @Composable () -> Unit = {
            MainToolbar(
                modifier = modifier.statusBarsPadding(),
                title = title ?: "",
                onMenuClicked = {
                    scope.launch {
                        scaffoldState.drawerState.open()
                    }
                }
            )
        }

 BottomNavigation(
        modifier = modifier.navigationBarsPadding()
    ) {
        items.forEach { item ->
            BottomNavigationBarItem(
                item = item,
                isSelected = selectedItem?.route == item.route,
                onSelectedChange = { onSelectedItemChange(item) }
            )
        }
    }

Do you use bottomBar inside a Scaffold? It would be better if you provide the code — AliSh, Feb 10 '23 at 13:51
Added the code. @AbdullahJaved I want it to be transparent.. — Evgeni Roitburg, Feb 10 '23 at 14:00

AliSh · Answer 1 · 2023-02-10T14:05:06.053

0

You can use accompanist systemuicontroller to set color to navigation bar, use default color for other screens and add color just for the screen you need:

@Composable
fun AppTheme(
    systemBarColor: Color = MaterialTheme.colors.background,
    content: @Composable () -> Unit,
) {
   ...

    SideEffect {
        systemUiController.setNavigationBarColor(
            color = systemBarColor,
            darkIcons = useDarkIcons
        )
    }
}

edited Feb 10 '23 at 14:05

answered Feb 10 '23 at 14:01

AliSh

10,085
5
44
76

I don't want to color it, I want the BottomNavigation the take up the whole space.. The "desired result" screenshot actually uses this technique, but this harms another UI stuff, like drawer and bottom navigation ripple effect.. – Evgeni Roitburg Feb 10 '23 at 14:04
1. If you are following material design, bottom navigation bar background and navigation drawer background colors are the same, so you can set surface color for them as well as navigation bar. 2. About ripple effect, it is not expected to have ripple on navigation bar. – AliSh Feb 10 '23 at 15:06

Compose BottomNavigation padding

1 Answers1