How to remove native navigation bar elevation through Compose?-CodePudding

I'm trying to get rid of a faint divider between the native navigation buttons on the bottom of the screen and the content of my app.

This is what I have - you can see a very faint divider between the navigation buttons and the bottom navigation bar of my app. Is it elevation? Shadow?

But this is what I want (this is the Android Slack app) - all same colour.

In my app, I'm explicitly setting the bottom navigation bar to white, as well as use the accompanist library to set the navigation bar to white, like so:

BottomNavigation(
        modifier = Modifier
            .background(Color.White),
        backgroundColor = Color.White,
        elevation = 0.dp,
    )

...

    val systemUiController = rememberSystemUiController()
    SideEffect {
        systemUiController.setSystemBarsColor(
            color = Color.White,
        )
    }

What else can I do?

CodePudding user response：

I can't quite reproduce this issue, when I attempt to set background of BottomNavigation by using Modifier. It does not affect anything (still using default purple primary color from material color I think), but when I try to set background by parameter backgroundColor, still there is no faint divider between the system navigation bar and the app navigation bar as you can see here.

Can you show me the detail implementation of your BottomNavigation and what device did you use?

CodePudding user response：

I've found the issue - it looks like if the Scaffold is wrapped in a ModalBottomSheetLayout, it will do weird colour changes like this to the BottomNavigation.

In order to avoid this, you can do:

    ModalBottomSheetLayout(
        sheetElevation = 0.dp,
        bottomSheetNavigator = bottomSheetNavigator,
    ) { ... }

and the "faint divider" goes away!

The ModalBottomSheetLayout is from the accompanist library as well - com.google.accompanist:accompanist-navigation-material