CollapsingToolbarLayout | Scrolling and layout issues

Question

Related Questions

CollapsingToolbarLayout | Scrolling and layout issues 2

Question

I have been working with the Android Support Design Library and successfully implemented the CoordinatorLayout that causes the Toolbar and TabLayout to scroll out of view when scrolling. This works very well, so I figured I would try my luck with the new CollapsingToolbarLayout.

In a seperate activity, I have been having issue-after-issue with implementing CollapsingToolbarLayout. I am, as they say, close but no cigar.

I want to use 2 different fragments

1. Header Image (Currently just an ImageView)
2. "Scrollable" content (actually content isn't really scrollable, but I forced it will long Lorem Ipsum text for testing)

I had built one example of this layout by myself, but could not get it working after many tries. Finally, I found this [enter image description here][5] and modified it to get to the point I am now

Issues

Note: I don't know if these are caused by 1 thing (dominoes effect), or if these are individual. Also, I have looked at quite a few related questions, but none seem to have any of these issues.

1. Scrollable Content is shown above the Header Image
2. Scrollable Content is not anchored to the bottom of the Header Image

3. On Scrolling of Scrollable Content it will scroll the Header Image seemingly randomly of either:

   • Just right and follows the speed of the finger (perfect)
   • Too fast and will animate the Header Image off the screen by moving my finger the height of 1 line of text

   • Also on Scroll down, the 2 above effects happen along with a 3rd effect

     • Instant or Near instant "animation" of showing the Header Image at full width

Edit: These below are asked in another question!! The above had 1 simple fix

4. The CollapsingToolbarLayout does not allow me to expand the Toolbar to see the full Header Image

   • It shows a majority of the image, but not all. Top is cut, but the bottom is visible.

5. The Toolbar is set to Pin but it is hidden when scrolling

   • Just the Header Image should disappear

Code

General Layout

<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout>

        <android.support.design.widget.CollapsingToolbarLayout>

            <ImageView/> <!-- Will be a fragment later -->

            <android.support.v7.widget.Toolbar/>

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

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

    <android.support.v4.widget.NestedScrollView>

        <fragment/>  <!-- Not a scrolling fragment layout -->

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

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

Layout.xml

<android.support.design.widget.CoordinatorLayout 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="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="16dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/download"

                android:scaleType="centerCrop" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"

                app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/imageView1">

        <fragment
            android:id="@+id/detail"
            android:name="<package>.<fragment_name>"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

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

1 2 3

4 5 6

Answer 1

You need to add app:layout_behavior="@string/appbar_scrolling_view_behavior" to your NestedScrollView - this marks the class which should be positioned below the AppBarLayout (and hence, below the CollapsingToolbarLayout).