android - CollapsingToolbarLayout and NestedScrollView issue when scrolling

Question

I have a simple collapsingToolbarLayout xml, like the following:

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

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="@dimen/expandedTitleMarginBottom"
            app:expandedTitleMarginEnd="@dimen/expandedTitleMarginEnd"
            app:expandedTitleMarginStart="@dimen/expandedTitleMarginStart"">

            <ImageView
                    android:id="@+id/img"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="parallax" />

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

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

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


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

            <!--SOME CONTENT-->

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_mail_white"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

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

Everything works fine, until I try to scroll from BOTTOM to TOP quickly (from the Nested Scroll View content to the CollapsingToolbarLayout) and the nested content goes over the image, and that's horrible. I have been trying all the options that I've found but nothing seems to work.

All my libraries are updated according to the docs and the base code comes from some basic examples that seems to work fine for everyone.

Can anybody help me with this issue?

I provide some images to explain better the problem:

1. Normal and correct content before scroll

2. When scrolling from nested to toolbar

Answer 1

I've finally understood the problem. You're code is correct, the real problem it's your device. I've tested the code you posted on my LG Nexus 5 and everything was fine. Here's a screenshot of my test application:

As you can see, the scroll works fine, and the cards don't overlap the toolbar. Finally yesterday I had the opportunity to test my code on your's phone model, Huawei P8 Lite. And here's the incredible result:

Apparently, this Huawei phone model (or maybe other models too, i don't know) has a strange bug that creates this overlap issue when using the CollapsingToolbarLayout.

The strangest thing is that I searched everywhere on the internet, but I couldn't found anything related to this annoying Huawei bug.

To solve this problem, I suggest that you write personally to Huawei or.. to change phone!