I need to set a gradient as the background of the AppBarLayout. The issue being that the title overlays the status bar when the edge-to-edge mode is enabled. If fitsSystemWindows is set, white space will appear.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android=";
    xmlns:app=";
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools=";>

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:clipToPadding="true"
        app:liftOnScroll="true"
        app:liftOnScrollTargetViewId="@id/recycler_view">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            style="@style/CollapsingToolbar.Large"
            android:layout_width="match_parent"
            android:layout_height="?attr/collapsingToolbarLayoutLargeSize"
            app:contentScrim="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/gradient"
                app:layout_collapseMode="parallax" />

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/topAppBar"
                android:layout_width="match_parent"
                android:fitsSystemWindows="true"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="Title"
                />
            

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

I need to set a gradient as the background of the AppBarLayout. The issue being that the title overlays the status bar when the edge-to-edge mode is enabled. If fitsSystemWindows is set, white space will appear.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:clipToPadding="true"
        app:liftOnScroll="true"
        app:liftOnScrollTargetViewId="@id/recycler_view">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            style="@style/CollapsingToolbar.Large"
            android:layout_width="match_parent"
            android:layout_height="?attr/collapsingToolbarLayoutLargeSize"
            app:contentScrim="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/gradient"
                app:layout_collapseMode="parallax" />

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/topAppBar"
                android:layout_width="match_parent"
                android:fitsSystemWindows="true"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="Title"
                />
            

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

• android
• kotlin
• android-coordinatorlayout
• android-appbarlayout
• edge-to-edge

1 Answer 1

android:fitsSystemWindows

If true, adjusts the padding of this view to leave space for the system windows.

You can manually do that using WindowInsetsListener.

ViewCompat.setOnApplyWindowInsetsListener(appBar) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.statusBars())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

please refer to:

https://developer.android.com/develop/ui/views/layout/edge-to-edge#system-bars-insets

https://developer.android.com/reference/android/view/View#attr_android:fitsSystemWindows