AppBarLayout scrolling content below Toolbar

Question

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...

score 3 · Accepted Answer · answered Apr 27 '16 at 08:01

3

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.

answered Apr 27 '16 at 08:01

ʍѳђઽ૯ท

16,646
7
53
108

Just tried. Everything collapses, including Toolbar (even with app:layout_collapseMode="pin")... :( – Alessandro Apr 27 '16 at 16:07
I'm guessing that you are using the wrong flag for that `CollapsingToolbarLayout`, Check this link : http://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout But all i'm saying is, this is the best way to do that! – ʍѳђઽ૯ท Apr 27 '16 at 16:17
Like i guessed, Check this: https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout#creating-collapsing-effects And try to use: `app:layout_scrollFlags="scroll|exitUntilCollapsed"` inside the `CollapsingToolbarLayout`. of course it'll be collapsed with your codes.. – ʍѳђઽ૯ท Apr 27 '16 at 16:20

Travis Yim · Answer 2 · 2016-04-26T07:27:48.773

Update:

Since my original suggestion did not work, another method to achieve the desired outcome would be to break out the Toolbar from the CoordinatorLayout. You can structure your layout XML as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical">
    <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" />
    <android.support.design.widget.CoordinatorLayout
        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_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">
            <RelativeLayout
                android:id="@+id/box_search"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:layout_marginBottom="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"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        <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>
</LinearLayout>

If it's still not working, you should consider not using the include statement as this might be the source of the issues. Rather, bring in the layout definition directly into this layout and place under a NestedScrollView (apply app:layout_behavior="@string/appbar_scrolling_view_behavior" to this NestedScrollView). If you need additional help, post the contents of your content_main layout XML in your OP.

Original Response:

Make sure you define the app:layout_behavior for your main content, which defines that the scrolling of the main content should affect the AppBarLayout. Specifically, try this:

<include layout="@layout/content_main"
     app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Extracting Toolbar from AppBarLayout gives awful results, with the toolbar going under content... — Alessandro, Apr 27 '16 at 16:08
Post the contents of your content_main layout. Let's see what you've got — Travis Yim, Apr 27 '16 at 19:14

AppBarLayout scrolling content below Toolbar

2 Answers2