Android: CoordinatorLayout RecyclerView First Item not visible

Problem

I had to implement a Toolbar with tabs, together with CoordinatorLayout, and the content of each tab had to be a list of items, for which I used RecyclerView. But when I ran the app, the first item in the list was overlapped by the tabs, so it was not fully visible.

This is how my xml file looked like:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="enterAlwaysCollapsed" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:tabIndicatorColor="@color/white"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/white"
                app:tabTextColor="@color/white_transparent" />

        </android.support.design.widget.AppBarLayout>

        <!-- As the main content view, the view below consumes the entire
            space available using match_parent in both dimensions. -->
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/light_gray"/>
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_drawer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer" />

</android.support.v4.widget.DrawerLayout>

FrameLayout is replaced in the code with a fragment containing the RecyclerView.

Solution

This property MUST be added to your scrolling view in order to make all list’s items visible:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

In my case, as I was using a FrameLayout which contained a RecyclerView, I had to add this property to the FrameLayout, and not directly to the RecyclerView as it was in another xml file and wouldn’t work. But if you declare your RecyclerView directly inside CoordinatorLayout, you should add this property to it, and everything should be fine.

Just a final Note

If you are using ListView instead of RecyclerView together with CoordinatorLayout, you will encounter different scrolling and UI issues that will be difficult to handle. At first I had a ListView and tried to make the app work with it, but I ended up in refactoring the code and used RecyclerView instead. This way, all the UI issues were solved much more easily.

So my recommandation is to refactor your code and replace ListViews with RecyclerViews if you intend to benefit from the power of CoordinatorLayout.

Menu