Content of coordinator layout not gets scrolled when scrolling in appbar layout

Question

I'm trying to implement new android design support library. I have a view pager inside appbar layout and a tab layout below it. Also I need to stick my toolbar and tab header layout on top while scrolling. When I try to scroll the content by scrolling in appbar layout, it didn't gets scrolled. But when I scrolled in content of tablayout, the whole content will gets scrolled. Here is my xml:

 <android.support.design.widget.CoordinatorLayout
    android:id="@+id/outer_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffb4b4b4"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            app:layout_scrollFlags="scroll|enterAlways">

            <android.support.v4.view.ViewPager
                android:id="@+id/top_viewpager"
                android:layout_width="match_parent"
                android:layout_height="320dp"
                android:fitsSystemWindows="true" />

        </RelativeLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="enterAlwaysCollapsed"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabTextColor="@color/white" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>​

Answer 1

To answer your question, first you need to know how the nest scroll works.

The nest scroll behavior implemented by AppBarLayout is mainly based the NestScrolling system. The system only start nest scroll event dispatching when the touch event start from the NestScrollingChild which is the RecyclerView inside the ViewPager.

Therefore, if you want to start nest scroll from the AppbarLayout, there is no easy way to just modify the xml to achieve it.

Answer 2

I had a similar layout and it works well. Here I will post so that you can be inspired.

activity_profile.xml:

<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"
    android:fitsSystemWindows="true"
    tools:context="me.danielpan.twitterlike.ProfileActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_tool_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/Widget.AppCompat.ActionBar.TabText"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="?attr/colorAccent">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:backgroundTint="@color/app_color_primary"
                app:collapseIcon="@drawable/header_avatar"
                app:layout_collapseMode="pin"
                app:navigationIcon="@mipmap/ic_launcher"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:subtitle="Incredible Pics"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:title="Twitter Profile" />
            <!--app:layout_scrollFlags="scroll|exitUntilCollapsed"-->

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            style="@style/TabLayoutStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabContentStart="2dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/app_color_accent"
            app:tabIndicatorHeight="2dp"
            app:tabMinWidth="24dp"
            app:tabMode="fixed"
            app:tabPadding="1dp"
            app:tabSelectedTextColor="@color/text_color_secondary"
            app:tabTextColor="@color/text_color" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:paddingEnd="0dp"
        app:paddingStart="0dp" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@color/text_color"
        app:borderWidth="3dp"
        app:elevation="2dp"
        app:fabSize="mini"
        app:layout_anchor="@id/coordinator_layout"
        app:layout_anchorGravity="bottom|right|end"
        app:pressedTranslationZ="3dp"
        app:rippleColor="@color/text_color_secondary" />
</android.support.design.widget.CoordinatorLayout>

profile_header_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:fitsSystemWindows="true"
    app:layout_collapseMode="parallax"
    app:layout_scrollFlags="scroll|enterAlways">

    <ImageView
        android:id="@+id/header_cover"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:scaleType="centerCrop"
        android:src="@drawable/header_cover" />

    <LinearLayout
        android:id="@+id/header_detail_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/header_cover"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="5dp"
        android:gravity="left"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp">

            <Button
                android:id="@+id/header_btn_follow"
                android:layout_width="65dp"
                android:layout_height="30dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="5dp"
                android:background="@drawable/btn_blue_bg_selector"
                android:gravity="center"
                android:text="Follow"
                android:textAllCaps="false"
                android:textColor="#646464"
                android:textSize="18sp" />

            <Button
                android:id="@+id/header_btn_favorite"
                android:layout_width="65dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:layout_marginRight="5dp"
                android:layout_toLeftOf="@id/header_btn_follow"
                android:background="@drawable/btn_white_bg_selector"
                android:gravity="center"
                android:text="Favorite"
                android:textAllCaps="false"
                android:textColor="#646464"
                android:textSize="18sp" />
        </RelativeLayout>

        <TextView
            android:id="@+id/header_nickname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:gravity="center"
            android:text="Incredible Pics"
            android:textAllCaps="false"
            android:textColor="#000000"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/header_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:gravity="center"
            android:text="@string/header_id_text"
            android:textAllCaps="false"
            android:textColor="#767676"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/header_brief"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="4dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="4dp"
            android:gravity="left"
            android:text="Good still exists in the world. Inspiring you in 140 characters or less."
            android:textAllCaps="false"
            android:textColor="#565656"
            android:textSize="18sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="25dp"
            android:layout_marginLeft="5dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left|center_vertical"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/header_following"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left|top"
                    android:text="12K"
                    android:textAllCaps="false"
                    android:textColor="#000000"
                    android:textSize="17sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:gravity="left|top"
                    android:text="FOLLOWING"
                    android:textAllCaps="false"
                    android:textColor="#898989"
                    android:textSize="17sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left|center_vertical"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/header_follower"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left|top"
                    android:text="23.5K"
                    android:textAllCaps="false"
                    android:textColor="#000000"
                    android:textSize="17sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:gravity="left|top"
                    android:text="FOLLOWER"
                    android:textAllCaps="false"
                    android:textColor="#898989"
                    android:textSize="17sp" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/header_avatar"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:background="@drawable/iv_bg_round_corner"
        android:scaleType="centerCrop"
        android:src="@drawable/header_avatar" />
</RelativeLayout>