Logo animation along with a routine toolbar in CoordinatorLayout

Question

I want to implement a collapsible logo toolbar as follows:

• Flexible space with overlapping content, for example, shown here (it already exists);
• A parallaxed pattern in this space that is processed in solid color (this too)
• A logo with a horizontal orientation, which should appear directly above the content, but float up when the toolbar collapses: In action, it should be something like Pesto goes here (not necessarily mutable, but it will be a plus):

Here is 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 image of the logo, either it does not move the way I need it, or everything breaks. It looks like normal behavior might be required. Unfortunately, none of the tutorials that I found in the new Design library explain how to expand them - only how to use the materials provided. There is no source code that was released, the decompiled code has no comments and is extremely confusing, and the fact that I'm still not very comfortable with Android's internal structures makes it even worse.

Please, help?

Answer 1

Ok, I did it!

My decision is terrible, so I will still expect the best :)

I continued and created a custom view, CollapsingLogoToolbarLayout , which is a subclass of CollapsingToolbarLayout . The last class is the one in which the transition by type is swallowed - therefore, in my subclass, I put in a logic that changed the properties of the logo type, namely its translationY based on the "advanced" fraction. There is a code with a code . Now, after I found the appropriate offset options, 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> ...