Place View pager below AppBarLayout

Question

I have the View Pager inside a NestedScrollView inside a CollapsableToolbar. But the content of the ViewPager fragments hide behind the AppBarLayout. Viewpager is perfectly scrollable however.

How to fix this?

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="128dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="128dp"
            android:background="@color/colorPrimary">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="128dp"
                android:orientation="vertical">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="64dp"
                    android:gravity="center"
                    android:textSize="32dp"
                    android:fontFamily="@font/amaranth"
                    android:text="@string/app_name" />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="59dp"
                    android:background="@drawable/rounded_corners"
                    android:layout_marginRight="14dp"
                    android:hint="Search"
                    android:padding="10dp" />
            </LinearLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
    android:id="@+id/nested_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom"
    android:fillViewport="true">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.CardView
    app:layout_anchor="@id/nested_scroll_view"
    app:layout_anchorGravity="bottom"
    android:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    app:cardElevation="1dp"
    app:cardMaxElevation="3dp">

    <android.support.design.widget.TabLayout

        android:id="@+id/tablayout"
        style="@style/MyCustomTabTextAppearance"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/whiteColor"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/tabBackgroundColor"
        app:tabMode="fixed">

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

</android.support.v7.widget.CardView>
</android.support.design.widget.CoordinatorLayout>

Here are the screenshots. I think it must be the scrolling behavior of appbarlayout. I am a newbie to coordinatorlayout.

Answer 1

Add

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

to your nestedscrollView