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.
I would appreciate any help on this.
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.