Jetpack Compose beta cannot go edge-to-edge due to overriding fitsSystemWindows

Question

I have upgraded Compose for my app from 1.0.0-alpha10 to current latest of 1.0.0-beta03

I want to layout my activity contents edge to edge, underneath system bars.

Among other things I have used the below code to tell the system this intent.

window?.run {
    WindowCompat.setDecorFitsSystemWindows(this, false)
}

This has worked well in the previous Compose version, but it seems like beta03 (or may be an earlier version after alpha10) started setting fitsSystemWindows to true and makes the above code ineffective. (Moving it below setContent { } had no effect either)

In the Layout Explorer I can see the decorView and its direct child LinearLayout now has fitsSystemWindows = true

I have below code as a temp solution which works to get the expected behavior.

// code that used to work on alpha10        
window?.run {
    WindowCompat.setDecorFitsSystemWindows(this, false)
}

setContent {
   MyApp()
}

// temp workaround for beta03
window?.decorView?.fitsSystemWindows = false
window?.decorView?.allViews?.forEach { view ->
    view.fitsSystemWindows = false
}

This feels like I'm fighting against Compose for the desired result.

What is the "correct" way to tell Compose not to override fitsSystemWindows?

I don't think it would work. Page says > This library does not disable window decor fitting. For your view hierarchy to able to receive insets, you need to make sure to call: WindowCompat.setDecorFitsSystemWindows(window, false) from your Activity. Which is what I'm trying to do. — Madushan, Apr 14 '21 at 08:10
Did you try the example e2e provided? It works with beta04 without issues — Gabriele Mariotti, Apr 14 '21 at 08:13
@GabrieleMariotti Sorry I tried with beta04 and still doesn't work. I tried accompanist which also didn't help. Issue is not getting the window inset values, but setting fitsSystemWindows, which accompanist doesn't do anyway. — Madushan, Apr 20 '21 at 10:14

score -1 · Answer 1 · answered Jul 13 '21 at 11:18

I currently have edge to edge implemented using the following:

Firstly in your res > theme remove action bar;

<style name="Theme.app_android" parent="Theme.MaterialComponents.Light.NoActionBar">

Then call my composable in MainActivity, setting WindowCompat before as shown below

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    setContent {
         App()
       }
    }
 }

Then using the ProvideWindowInsets function to remember a systemUiController that's called inside a SideEffect function that sets the system status bar to transparent

@Composable
fun App() {
    AppTheme {
        ProvideWindowInsets {
            val systemUiController = rememberSystemUiController()

            SideEffect {
                systemUiController.setSystemBarsColor(Color.Transparent, 
                darkIcons = false)
            }

            val navController = rememberNavController()
            val coroutineScope = rememberCoroutineScope()
            val navBackStackEntry by 
            navController.currentBackStackEntryAsState()
            val currentRoute = navBackStackEntry?.destination?.route

            Scaffold() { innerPadding ->
                Box(modifier = Modifier.padding(innerPadding)) {
                    NavGraph(navController = navController)
                }
            }
        }
    }
}

If you clone the compose samples from here https://github.com/android/compose-samples they show you this way to implement it

Jetpack Compose beta cannot go edge-to-edge due to overriding fitsSystemWindows

1 Answers1