Collapsible Toolbar with Custom View that Moves as Scrolling Happens and Gets Pinned (like in Phonograph)

Question

I would like to achieve something similar to the following in my app, but I want the whole red area (where it says "Guardians Of The Gala..." in the screenshots below) to be a custom view. (Some elements would fade out as the toolbar is collapsed.)

`` `

I've been trying for hours and hours to get it to work, but to no avail.

Obviously, just putting it into <Toolbar> doesn't work, since it doesn't know that it's supposed to animate it:

<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
        <android.support.design.widget.CollapsingToolbarLayout>
            <ImageView/>
            <android.support.v7.widget.Toolbar>
                <include layout="@layout/link_view_title_bar"/>

I've tried doing most of the answers from here and here but nothing actually worked.

How could I do this, preferably using mostly XML and the Android Design Support library. Any help would be appreaciated.

Answer 1

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/homeAppBarLayout"
        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/homeCollapseToolbar"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            //This can be changed to ImageView
            <com.daimajia.slider.library.SliderLayout
                android:id="@+id/homeSliderLayout"
                app:layout_collapseMode="parallax"
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="350dp"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/homeToolbar"
                android:title=""
                android:layout_width="match_parent"
                android:layout_height="115dp"
                android:gravity="top"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:titleMarginTop="15dp" >

                <ImageView
                    android:src="@drawable/ic_logo"
                    android:paddingLeft="10dp"
                    android:layout_gravity="center|top"
                    android:layout_width="wrap_content"
                    android:layout_height="35dp" />

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

            //Instead of the TabLayout, put your Red Layout
            <android.support.design.widget.TabLayout
                android:id="@+id/homeTabLayout"
                android:layout_marginBottom="15dp"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:tabGravity="center"
                app:tabIndicatorColor="@color/colorAccent" />

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/homeViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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