Enable Edge to Edge in Android Jetpack Compose (Transparent Status Bar)

It is very common practice in android app world to go Edge to Edge to benefit from the full screen and improve app aesthetics. However, I have been asked and seen many questions for doing this in Jetpack Compose.

Rather going in details about the Window Insets let's see how to achieve edge to edge in android.

As the documentation already gives the instructions to enable edge to edge, there is a simple way a beginner, or a new project gets undesired result with status bar color on theme switch from Dark to Light.

To enable edge to edge,
Call enableEdgeToEdge() in Activity.onCreate. This will let your app display behind the system UI, that may be status bar, navigation bar, and other.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge() // Add this line

        setContent {
            YourAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ...
                }
            }
        }
    }
}

In your AndroidManifest.xml file set android:windowSoftInputMode=”adjustResize” inside activity. This let’s your app to receive the size of the software IME as insets (helpful to pad and lay out content).

<application
    <activity
          android:name=".MainActivity"
          android:exported="true"
          android:windowSoftInputMode="adjustResize" // Add this line
          ...
    </activity>
</application>

This is the recommended way to achieve edge to edge, however we get some undesired behavior when switching from Dark mode to Light mode.

With statusBarColor as primary, (primary color of material theme)

When statusBarColor is not set,
In Dark mode we get,

In Light mode we get,

The texts and icon color does not respond to the background color scheme. So, to fix this we need to make a little adjustment to our Theme.kt file in ui/theme package.

@Composable
fun YourAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    ...
    val view = LocalView.current
    if (!view.isInEditMode) {
      SideEffect {
        val window = (view.context as Activity).window
//        window.statusBarColor = colorScheme.primary.toArgb()
        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme // negate darkTheme
      }
    }
    ...
}

You can entirely remove the section between “…”, or make changes as shown i.e. comment out the line which assigns the color for status bar, and negate darkTheme.

I want to remove that section, are there any affects removing it?
The answer to this is NO for a general use case.

What does it exactly do?
As isInEditMode name itself suggests, this allows you(developer) to write code that behaves differently during editing compared to when the app is actually running on a device. There is exactly no use case unless you specifically want to use it.

Also, if you are using custom material theme using theme builder then it will not be a problem as you can simply follow step 1 and 2 above.

I hope you can easily enable edge to edge now.

Addition to that, to achieve the desired padding and place layout appropriately, it’s a good practice to properly use Window Insets which you can learn from the documentation.