Search code examples
androidandroid-toolbarandroid-coordinatorlayoutandroid-appbarlayout

AppBarLayout scrolling content below Toolbar


I'd like to have a content area below my Toolbar. Its behavior should be to scroll while scrolling up and to enter immediately while scrolling down. Toolbar should stay on its place without any scrolling.

My layout is like that:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.MainActivity">

    <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"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <RelativeLayout
            android:id="@+id/box_search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:layout_scrollFlags="scroll|enterAlways">

            <TextView
                android:id="@+id/text_search_filter"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Line 1"
                android:textColor="#FFF" />

            <TextView
                android:id="@+id/text_search_category"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_search_filter"
                android:text="Line 2"
                android:textColor="#FFF" />

            <TextView
                android:id="@+id/text_search_location"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_search_category"
                android:text="Line 3"
                android:textColor="#FFF" />
        </RelativeLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>

If I put content area above Toolbar I am able to get the desired effect, but obviously it's in the wrong position.

If I put content area below Toolbar nothing scrolls...


Solution

  • If I put content area above Toolbar I am able to get the desired effect, but obviously it's in the wrong position.

    Of course it is in the wrong position since: http://www.google.com/design/spec/layout/structure.html#structure-app-bar

    The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.

    So, you need to add a CollapsingToolbarLayout and the contents on it.

    And:

    I'd like to have a content area below my Toolbar. Its behavior should be to scroll while scrolling up and to enter immediately while scrolling down, Toolbar should stay on its place without any scrolling.

    To not to scrolling the Toolbar after adding that CollapsingToolbarLayout, you may want to add app:layout_collapseMode="pin" to that Toolbar.