Trying to understand edge to edge in Android

Question

After updating my SDK to version 35, I noticed that my app's UI now starts directly from the top of the display, including behind the status bar. Previously, the design started below the status bar. To understand how edge-to-edge functionality works, I created a sample layout.

The XML layout I am using is as follows:

xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    android:id="@+id/main">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />
    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        android:layout_marginBottom="16dp"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

With android:fitsSystemWindows="true", my output looks like this:

In this case, the status bar and AppBarLayout share the same color.

However, when I change android:fitsSystemWindows to "false" and use the following code in my activity:

ViewCompat.setOnApplyWindowInsetsListener(
    findViewById<View>(R.id.main)
) { v: View, insets: WindowInsetsCompat ->
    val systemBars: Insets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
    v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
    insets
}

I get a different result:

Now the status bar and AppBarLayout have different colors.

This confuses me. When I set android:fitsSystemWindows="true" in XML, the status bar and AppBarLayout are the same color. But when I handle the insets programmatically, the colors are different. I tried setting the status bar color with this.getWindow().setStatusBarColor, but it no longer works from Android 15 (SDK 35). I also tried using the following code:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
    window.insetsController?.setSystemBarsAppearance(
        APPEARANCE_LIGHT_STATUS_BARS, // For light status bar icons
        APPEARANCE_LIGHT_STATUS_BARS
    )
} else {
    @Suppress("DEPRECATION")
    window.decorView.systemUiVisibility =
        window.decorView.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR // For light status bar icons
}

But the status bar color still doesn't change.

Questions:

1. Why is edge-to-edge functionality mandatory?
2. How do I properly implement edge-to-edge in a regular Android app (non-gaming)?
3. What are the potential side effects of using edge-to-edge, such as issues with height calculations?
4. Need solution for my issue.

I would appreciate any help on this.

---

Answer 1

In Android 15 and above, the status bar will be transparent by default. To handle this, you need to adjust the AppBarLayout by applying padding to it.

Here's how to manage the padding for AppBarLayout:

ViewCompat.setOnApplyWindowInsetsListener(
    findViewById<View>(R.id.appbar)
) { v: View, insets: WindowInsetsCompat ->
    val systemBars: Insets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
    v.setPadding(0, systemBars.top, 0, 0)
    insets
}

This code applies the necessary padding to the AppBarLayout, making it appear as though the status bar and AppBarLayout have the same color. You can also add an image to the AppBarLayout, which will then extend into the status bar area, creating a seamless visual effect.

And also @Jayanta Sarkar Answer also gave me some ideas.

Answer 2

Apply edge to edge solution for both newer and older versions of Android

Target SDK 35 (Android 15) directly enable the edge to edge, we just need to handle the insets to manage the status bar and navigation bar.

For older versions we just need to add the gradle of activity and enable edge to edge:

Gradle:

dependencies {
    val activity_version = activity_version
    // Java language implementation
    implementation("androidx.activity:activity:$activity_version")
    // Kotlin
    implementation("androidx.activity:activity-ktx:$activity_version")
}

Enable edge to edge:

EdgeToEdge.enable(this);

Handle overlaps using insets: (Both for newer and older versions)

Handled statusbar space with toolbar using below code and also managed the statusbar icon colour using the below code:

ViewCompat.setOnApplyWindowInsetsListener(mToolbar, (v, windowInsets) -> {
            Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
            // Apply the insets as a margin to the view. This solution sets only the
            // bottom, left, and right dimensions, but you can apply whichever insets are
            // appropriate to your layout. You can also update the view padding if that's
            // more appropriate.
            v.setPadding(0, insets.top, 0, 0);
            // Managing statusbar icons colour based on the light/dark mode, 
            //I am working on white label solution so this is helping me to set icons colour based on the app theme
            WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView())
                    .setAppearanceLightStatusBars(colorManager.isUsingWhiteTheme());
            return windowInsets;
        });

Thanks @vijayadhas for the question and your answer. Actual code is from the official doc