Enable Edge to Edge in Android Jetpack Compose (Transparent Status Bar)
Tags: androiddev, jetpackcompose, edgetoedge, statusbar
Published: 2024-05-06 12:57:25

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 **<u>[Window Insets](https://developer.android.com/develop/ui/compose/layouts/insets)</u>** let's see how to achieve edge to edge in android.

As the <u>[documentation](https://developer.android.com/develop/ui/compose/layouts/insets#insets-setup)</u> 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)
![statusBarColor as primary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xczjzcbccvq5q5ehz5gu.png)

When statusBarColor is not set,
In Dark mode we get,
![statusBarColor in dark mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvxjlmeex3qdm9ivzakx.png)

In Light mode we get,

![statusBarColor in light mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl59rnqgjt0i9mah17m2.png)

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 [<u>theme builder</u>](https://m3.material.io/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 <u>[documentation](https://developer.android.com/develop/ui/compose/layouts/insets)</u>.