I'm copying the ui of the Keep Notes app and I want to make a transparent status bar and something like a search bar that hides when scrolling through the list.

First of all, I tried to make the Status bar transparent in the theme resources by assigning a transparent color to it

<item name="android:statusBarColor">@android:color/transparent</item>

But from this it only became white but not transparent. Then I used other attributes and their combinations, but nothing worked.

<item name="statusBarBackground">@android:color/transparent</item>
<item name="statusBarForeground">@android:color/transparent</item>

There is another attribute

<item name="android:windowTranslucentStatus">true</item>

But it makes the Status bar black and translucent and applying the android:statusBarColor attribute doesn't change anything

Only this line of code had any effect, the Status bar became transparent and now the color change attributes work

WindowCompat.setDecorFitsSystemWindows(window, false)

But now the Status bar overlaps some of the content. I tried to solve it with the following code

ViewCompat.setOnApplyWindowInsetsListener(binding.appBarLayout) { v, insets ->
    v.updatePadding(top = insets.getInsets(WindowInsetsCompat.Type.systemBars()).top)
    WindowInsetsCompat.CONSUMED
}

There was another problem, my views that are inside AppBarLayout are not completely hidden and are visible through the Status bar

Here is the markup xml file fragment_notes_list.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"
    tools:context=".ui.notes.NotesListFragment">

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

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            app:cardBackgroundColor="#F2F6FB"
            app:cardCornerRadius="32dp"
            app:contentPadding="12dp"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:strokeWidth="0dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageButton
                    android:id="@+id/menu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:src="@drawable/ic_menu"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <com.google.android.material.textview.MaterialTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:text="Serach your notes"
                    android:textSize="16sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toEndOf="@id/menu"
                    app:layout_constraintTop_toTopOf="parent" />

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="8dp"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:src="@drawable/ic_grid_view"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </com.google.android.material.card.MaterialCardView>

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/notesList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:padding="4dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:layoutManager="StaggeredGridLayoutManager"
        tools:listitem="@layout/note_item"
        tools:spanCount="2" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/newNote"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:backgroundTint="@color/green_300"
        android:src="@drawable/ic_add"
        tools:ignore="ContentDescription" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

I also failed to make AppBarLayout transparent.

android:background="@android:color/transparent"

Nothing changes.

I also found that in the Keep Notes app, the Recyclerview seems to have a margin top. And I thought about the opacity of AppBarLayout, I think it's because AppBarLayout is above Recyclerview instead of being above it, but I don't know how to do it using CoordinatorLayout(Is it possible achieve hiding on scroll using another Layout?)

Question: How do I fix AppBarLayout not being completely hidden. And how to make AppBarLayout transparent?