Bottom navigation bar overlap button in jetpack compose

Question

This is my compose app.

Scaffold( // main content
    modifier = Modifier.fillMaxSize(),
    scaffoldState = scaffoldState
) {
    Surface(
        modifier = Modifier
            .fillMaxSize()
            .padding(it),
        color = MaterialTheme.colors.background
    ) {
        NavGraph(navController)
    }
}

// my main screen
Column(
    Modifier.fillMaxSize()
) {
    Column(modifier = Modifier.weight(1f)) {
        HeaderView()
        // other element
    }
    Spacer(modifier = Modifier.height(Padding16))
    ButtonPrimary(
        modifier = Modifier.padding(horizontal = Padding24),
        text = stringResource(id = R.string.accept_and_continue),
        onClick = {
            onContinueClick()
        })
    Spacer(modifier = Modifier.height(Padding16))
}

For most of the devices, the code above was working fine. However, when I tested on a Samsung 21, and Android 12, the bottom button was cut off as below image. Does anyone know the cause and how to solve it?

Answer 1

Seems like your app is under the navigation bar. Try adding a .navigationBarsPadding() modifier to your screen's Column