Search code examples
androidandroid-layoutandroid-recyclerviewandroid-appbarlayout

AppBarLayout overlaps RecyclerView


I have been searching for quite a while to resolve this issue without success. My AppBarLayout is overlapping the RecyclerView in one of my xml files. I have tried rearranging the views without any positive results. Any help is appreciated. Here is my code:

<android.support.v4.widget.DrawerLayout
    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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:background="@color/bg_register">

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

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

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

        <include layout="@layout/content"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:id="@+id/x"/>
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/activity_main_drawer"
        android:clickable="true"/>
</android.support.v4.widget.DrawerLayout>

Here is the xml file of content:

<RelativeLayout 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"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:orientation="vertical"
                android:background="@color/bg_register"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                tools:showIn="@layout/activity">

    <TextView
        android:padding="5dp"
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/list" />

    <android.support.v7.widget.RecyclerView
        android:layout_below="@id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lv_recycler"
        android:background="@color/white"
        android:scrollbars="vertical"
        android:clickable="true"
        android:fadeScrollbars="true"/>

</RelativeLayout>


Solution

  • Add this attribute to the include below the toolbar:

        app:layout_behavior="@string/appbar_scrolling_view_behavior"
    

    When you are using CoordinatorLayout and AppBarLayout, you are setting up for that coordinated scrolling where the toolbar pushes out of the way first. But in order to get that, you need to give the view below the toolbar the appbar scrolling view behavior. This not only sets up the coordinated scroll, but tells the CoordinatorLayout to layout the lower view so that it appears beneath the toolbar.

    If you don't want the coordinated toolbar scrolling, replace CoordinatorLayout with a vertical LinearLayout.