androidedge-to-edge

Trying to understand edge to edge in Android


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:

enter image description here

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.

enter image description here

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.



Solution

  • 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.