Status Bar Color Change in Compose Multiplatform

Question

I want to change the status bar color. I have tried some code in App.kt file MaterialTheme{ } But it's not affect on statusbar color.

I want to change the status bar color like the background of then login screen. And make sure it doesn't effect on ios also. I tried edgeToedge(). But it's hiding the status bar. I don't want to hide the status bar. Just wanna change the color in light mode or dark mode.

Answer 1

I did not use compose multiplatform so much, but I would add this line to the android Activity

        WindowCompat.setDecorFitsSystemWindows(window, false)

This will give you full access of the screen. Then, for bottom navigation on android devices you will probably need to add:

        Modifier.windowInsetsPadding(WindowInsets.navigationBars),

That you would pass to your main composable.

Answer 2

I have solve the issue by doing this in MainAciviy.kt

enableEdgeToEdge(
            statusBarStyle = SystemBarStyle.light(
                Color.TRANSPARENT, Color.TRANSPARENT
            ),
            navigationBarStyle = SystemBarStyle.light(
                Color.TRANSPARENT, Color.TRANSPARENT
            )
        )

This in the ContentView.swift

ComposeView()
                        .ignoresSafeArea(edges: .all)
                        .ignoresSafeArea(.keyboard)

Then In CommonMain

Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color(0xFFEAFBF2))
                .windowInsetsPadding(WindowInsets.safeDrawing)
        ) {

          }