[FIXED] Jetpack Compose – BottomBar is under Bottom Navigation

Issue

I’ve implemented BottomBar via Scaffold in Jetpack Compose.

It works fine with a smartphone with gesture navigation. But when legacy bottom buttons are enabled, the overlap my BottomBar.

screenshot

My code:

Scaffold(
        bottomBar = {
            BottomMenu()
        }
    ) { innerPadding ->
        Surface(
            color = AppTheme.colors.background.primary,
            modifier = Modifier
                .fillMaxSize()
        ) {
            Column(
                modifier = Modifier
                    .verticalScroll(rememberScrollState())
                    .padding(bottom = innerPadding.calculateBottomPadding())
            ) {
                MyContent()
            }
        }
    }

BottomMenu():

Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(AppTheme.colors.background.secondary)
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(1.dp)
                .background(AppTheme.colors.background.primary)
        )
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 8.dp),
        ) {
    ...

Solution

Use Compose’s BottomAppBar as parent of Column() as it has inbuilt property to show view accroding to System navigation drawer. Example:

    BottomAppBar(
        cutoutShape = RoundedCorner(10.dp),
        elevation = 0.dp,
        contentColor = "bottomContentColor",
        backgroundColor = "bottomBarColor"
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .background(AppTheme.colors.background.secondary)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(1.dp)
                    .background(AppTheme.colors.background.primary)
            )
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 8.dp),
            ) {

            }
        }.....
    }

Sample Image:-

Answered By – Megh

Answer Checked By – Timothy Miller (FixeMe Admin)