Toolbar covers listview

Question

I've got a simple layout:

<?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"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abLayoutDriver"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/BrightYellowCrayola">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tbDriver"
            app:navigationIcon="@drawable/baseline_menu_24"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            >

            <androidx.appcompat.widget.SearchView
                android:id="@+id/svDriver"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:defaultQueryHint="@string/search_drivers"
                app:iconifiedByDefault="false"
                app:searchIcon="@null"
                app:queryBackground="@android:color/transparent"
                app:submitBackground="@android:color/transparent"
                android:imeOptions="flagNoExtractUi"

                />

        </androidx.appcompat.widget.Toolbar>



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


        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvListDriver"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="@dimen/zero_margin_when_normal"
            android:paddingEnd="@dimen/zero_margin_when_normal"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            android:layout_toEndOf="@id/abLayoutDriver"
            />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabAddDriver"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:contentDescription="@string/add_driver"
        android:minHeight="48dp"
        android:src="@drawable/baseline_person_add_24"
        app:backgroundTint="@color/BrightYellowCrayola" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

The issue is that on start, the first listview is automatically covered by the toolbar which I dont wan't it to be:

The expected view should look like this:

Basically I want the first item to be below the toolbar without having to scroll down first, how can I accomplish this?

score 2 · Accepted Answer · answered Aug 14 '21 at 17:34

Try adding the following line in your recyclerview:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

So it would look like this:

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvListDriver"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="@dimen/zero_margin_when_normal"
        android:paddingEnd="@dimen/zero_margin_when_normal"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

score 0 · Answer 2 · answered Aug 14 '21 at 16:24

does that does the job ?

I have put layout_gravity:"bottom" to the recycleview to pull it downwards, put layout_gravity:"top" to the appbar to pull it upwards, then made the recycle view get anchored to the appbar so that it's pulled downwards by the layout's gravity but have to be anchored under the appbar.

<?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"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abLayoutDriver"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="@color/BrightYellowCrayola"
        >

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tbDriver"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:navigationIcon="@drawable/baseline_menu_24"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <androidx.appcompat.widget.SearchView
                android:id="@+id/svDriver"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:imeOptions="flagNoExtractUi"
                app:defaultQueryHint="@string/search_drivers"
                app:iconifiedByDefault="false"
                app:queryBackground="@android:color/transparent"
                app:searchIcon="@null"
                app:submitBackground="@android:color/transparent"

                />

        </androidx.appcompat.widget.Toolbar>


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


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvListDriver"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="@dimen/zero_margin_when_normal"
        android:paddingEnd="@dimen/zero_margin_when_normal"
        android:layout_gravity="bottom"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_anchor="@id/abLayoutDriver"
        app:layout_anchorGravity="bottom" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabAddDriver"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:contentDescription="@string/add_driver"
        android:minHeight="48dp"
        android:src="@drawable/baseline_person_add_24"
        app:backgroundTint="@color/BrightYellowCrayola" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

yes, the appbar is still visible before the first item, only thing that changed is that the item is maybe 20dp more visible but not fully — Jenej Fjrjdn, Aug 14 '21 at 16:33
I couldn't identify the problem yet as everything appears fine in my design/blueprint, if no one posted another answer to your problem and you don't want to change the coordinator layout, you might try adding some layout margin enough to make the recycle view get far away from the app bar,though that won't be the professional way of handling things — Omar Shawky, Aug 14 '21 at 17:06
sometimes the problem with the phone itself, as I've come across something similar before where some FABs where appearing fine on api 30 but with strange margins on api 21. — Omar Shawky, Aug 14 '21 at 17:08

Toolbar covers listview

2 Answers2