Animating logo along with collapsing toolbar within CoordinatorLayout

Question

I want to implement collapsible toolbar with a logo in the following manner:

1. Flexible Space with overlapping content, like shown here (have this already);
2. Parallaxed pattern in this space that gets scrimmed with solid color (have this too)
3. A horizontally-centered logo, which must appear right above the content but float upwards as toolbar collapses: In action it should be something like Pesto's leaves here (not necessarily resizable, but that would be a plus):

Here's my layout:

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        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:layout_width="match_parent"
            android:layout_height="192dp"
            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:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:contentScrim="?attr/colorPrimary">

            <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:src="@drawable/random_pattern"
                    android:scaleType="fitXY"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.75"/>

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

            </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_behavior="@string/appbar_scrolling_view_behavior"
            app:behavior_overlapTop="64dp">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivityFragment"
                android:orientation="vertical">

            <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp">

                <!-- card content -->

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

        </LinearLayout>

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

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

The problem is, wherever I try to place the logo picture, either it doesn't move like I need it too, or everything breaks. It feels like a custom Behavior might be required. Unfortunately neither of the tutorials I found on the new Design library explain how to extend it — only how to use provided stuff. There's no source code of it released, the decompiled code has no comments and is extremely tangled, and the fact that I'm not yet very comfortable with Android's layouting internals makes it even worse.

Please help?

Answer 1

Okay, I sorta did it!

My solution is horrible, so I'll still be expecting for better ones :)

I went on and created a custom view CollapsingLogoToolbarLayout, which is a subclass of CollapsingToolbarLayout. The latter class is where title transition is taken care of — so in my subclass I placed the logic that changed properties of the logo view, namely its translationY based on "expanded-ness" fraction. Gist with code is here. Now after I found suitable offset parameters, my layout looks like this:

...
<com.actinarium.random.common.CollapsingLogoToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"

        app:logoViewId="@+id/collapsing_logo"
        app:collapsedViewOffset="0dp"
        app:expandedViewOffset="-56dp">

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:src="@drawable/random_pattern"
            android:scaleType="fitXY"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.75"/>

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

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

    <FrameLayout
            android:id="@+id/collapsing_logo"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom">

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/random_logo"/>

    </FrameLayout>

</com.actinarium.random.common.CollapsingLogoToolbarLayout>
...