NestedScrollView + AppBarLayout content goes behind

Question

I have implement a similar design as https://github.com/chrisbanes/cheesesquare

A collapsible toolbar with an image inside that collapse when scrolling down

<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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <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_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/pager"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/picture_heigth"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="parallax">

                </android.support.v4.view.ViewPager>


                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


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

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/scroll_view"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"         
            android:foreground="?android:windowContentOverlay"

            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            LinearLayout
            android:id="@+id/root"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

It works greats, but not always... For example inside in linear layout I have a view that gets filled after my rest request complete. This has the effect to push the content BEHIND the Viewpager , when i scroll down and up again everything goes into the right place again.

I saw on some SO thread that by setting "fill_vertical" on the NestedSCrollVew it was fixing some of the problem. It actually does, the content doesn't go behind BUT the bottom of the scrollView is CUT... By putting some bottom margin it fixes the problem but has it is dynamic i don't known advance what margin to put...

Answer 1

Add to your LinearLayout focus attributes:

        android:focusable="true"
        android:focusableInTouchMode="true"

Answer 2

One solution is to set the padding on the NestedScrollView and to set padding clipping to false as such:

android:paddingTop="?actionBarSize"
android:clipToPadding="false"

(Ref1) (Ref2)