Why does accompanist-systemuicontroller not work when using Jetpack Compose with Material3?

Question

I'm learning the use of Material3 in jetpack compose, and I'm trying to set the statusbar to be transparent just as I used to. However, with the following code:

WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
    val systemUiController = rememberSystemUiController()
    SideEffect {
        systemUiController.setSystemBarsColor(
            color = Color.Transparent,
            darkIcons = true
        )
    }

    TestStatusBarTheme {
        Surface(
            modifier = Modifier
                .statusBarsPadding()
                .fillMaxSize(),
            color = MaterialTheme.colorscheme.background
        ) {
            Text(text = "Test")
        }
    }
}

While navigationbar becomes transparent, statusbar does not change anyway. Then I apply the same code, this time using original material design library while keeping everything else unchanged, and it works properly, as the statusbar turns into transparent too.

I can't figure out why I can't use accompanist to change the statusbar in material3. As navigationbar becomes transparent, it's obvious that the systemUiController has got the window and can make changes to navigationbar, then why it can't work with statusbar, which also is a systembar? Is there anything new I haven't notice to make accompanist-systemuicontroller cooperate with Material3, or is it just an unfixed bug for the current version of Material3 or accompanist?

My compose version is 1.2.0-beta02, accompanist version is 0.24.9-beta, and material3 version is 1.0.0-alpha12.

Answer 1

I was trying to move to Windows.Insets API in 1.2.0-rc02 version of compose. And looks like it's working. Try to start my sample:

 class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        makeStatusBarTransparent()
        //WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            Box(
                Modifier
                    .background(Color.Blue)
                    .fillMaxSize()
                    .padding(top = 10.dp, bottom = 10.dp)
                    .statusBarsPadding() //systemBarsPadding
            ) {
                //Box(Modifier.background(Color.Green).navigationBarsPadding()) {
                Greeting("TopStart", Alignment.TopStart)
                Greeting("BottomStart", Alignment.BottomStart)
                Greeting("TopEnd", Alignment.TopEnd)
                Greeting("BottomEnd", Alignment.BottomEnd)
                //}
            }
        }

/*        setContent {
            MyComposeApp1Theme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = Color.Red) {
                    Box(Modifier
                            .fillMaxSize()
                            .padding(top = 34.dp)
                    ) {
                        Greeting("Android")
                    }
                }
            }
        }*/
    }
}

@Composable
fun Greeting(name: String, contentAlignment: Alignment) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = contentAlignment
    ) {
        Text(
            text = "Hello $name!",
            Modifier
                .background(color = Color.Cyan)
        )

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyComposeApp1Theme {
        Greeting("Android", Alignment.TopStart)
    }
}

@Suppress("DEPRECATION")
fun Activity.makeStatusBarTransparent() {
    window.apply {
        clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
        addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
        decorView.systemUiVisibility =
            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
        statusBarColor = android.graphics.Color.GREEN//android.graphics.Color.TRANSPARENT
    }
}

val Int.dp
    get() = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        toFloat(),
        Resources.getSystem().displayMetrics
    )

Answer 2

It looks like Material3 version of Scaffold is adding insets by default:

@ExperimentalMaterial3Api
@Composable
fun Scaffold(
    ...
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
) {

So if you want to add status bar padding, you have to remove top inset:

Scaffold(
    modifier = Modifier
        .statusBarsPadding(),
    contentWindowInsets = WindowInsets(top = 0.dp)
)