androidandroid-activityandroid-jetpack-composeandroidx

Compose scaffold padding values are too big when using enableEdgeToEdge()


I'm using the paddingValues provided by the compose scaffold to account for the bottom bar in my app.

I also just implemented the new enableEdgeToEdge() feature provided by androidx.activity:activity-compose:1.8.0 to make the nav bar transparent.

Padding values before applying enableEdgeToEdge():

PaddingValues(start=0.0.dp, top=0.0.dp, end=0.0.dp, bottom=80.0.dp)

Padding values after applying enableEdgeToEdge():

PaddingValues(start=0.0.dp, top=50.333332.dp, end=0.0.dp, bottom=104.0.dp)

As you can see when using enableEdgeToEdge() it increases the padding values and the content becomes smaller. This has been tested on a Pixel 8 Pro.

I'm using androidx.compose:compose-bom:2023.10.00

Full code:

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()
    super.onCreate(savedInstanceState)

    setContent {
        val navController = rememberNavController()

        TSViewerTheme {
            Scaffold (
                bottomBar = {
                    BottomNavBar(
                        navController = navController,
                    )
                },
                content = { paddingValues ->
                    NavHost(navController = navController, startDestination = startDestination, modifier = Modifier.padding(paddingValues).fillMaxSize()){
                        // Screens
                    }
                }
            )
        }
    }
}

Is there a fix for this or should I wait for an update of the dependencies?

Comparison screenshots: Not using enableEdgeToEdge() Using enableEdgeToEdge()


Solution

  • Found a solution:

    Add this line to all your scaffolds (Main + Screens):

    contentWindowInsets = WindowInsets(0.dp),