Material Design - Flexible Space Header With Image

Material design proposed interesting animation features, that can be seen throughout it’s design guidelines. One of these features is called Flexible Space Header, and today we’re going to take a closer look on how to implement it.

To get the visual feeling of what we’re about to implement, check out this video.

‍

The code

We’ve prepared the demo code at : https://github.com/SnowdogApps/Material-Flexible-Space-Header You can import it to Android Studio and give it a try straight away. The code works with Appcompat library, so it’s fine to run it on any 4.x+ device.

Note that we use excellent ObservableScrollView library by Ksoichiro. It provides handy ways for observing the scroll events in scrollable views.

‍

First, we need to create XML layout file

It’s structure allows us to divide the UI in 2 sections – Flexible Header Space and place for displaying actual Data. Here’s an excerpt from the XML, to give you an idea of what split sections:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/root" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
   <pl.snowdog.materialflexiblespaceheader.view.ObservableScrollViewWithFling android:id="@+id/observable_sv" android:layout_height="match_parent" android:layout_width="match_parent" >

       <RelativeLayout android:id="@+id/scroll_view_child" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false">
             
           <!-- FLEXIBLE IMAGE SECTION -->
           <FrameLayout android:id="@+id/fl_image" android:layout_width="match_parent" android:layout_height="wrap_content">

               <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="@dimen/parallax_image_height" android:scaleType="fitCenter" android:src="@drawable/snowdog_logo" />
               <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="@dimen/parallax_image_height" android:id="@+id/ll_above_photo"/>
           </FrameLayout>

           <View android:id="@+id/anchor" android:layout_width="match_parent" android:layout_height="@dimen/parallax_image_height" android:minHeight="@dimen/parallax_image_height" />

           <!--DETAILS CONTAINER-->
           <LinearLayout android:id="@+id/details_container" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/anchor" android:paddingTop="16dp" android:paddingRight="16dp" android:paddingLeft="72dp" android:paddingBottom="30dp" android:clipToPadding="false" android:background="@color/background_floating_material_light">

               ...

           </LinearLayout>

       </RelativeLayout>

   </pl.snowdog.materialflexiblespaceheader.view.ObservableScrollViewWithFling>

   <!-- FLEXIBLE TOOLBAR, TITLE AND STUB VIEWS -->
   <View android:id="@+id/flexible_space" android:layout_width="match_parent" android:layout_height="0dp" android:background="@android:color/transparent" />

   <include layout="@layout/view_toolbar" android:id="@+id/toolbar" android:layout_alignParentTop="true" android:layout_height="wrap_content" android:layout_width="match_parent"/>

   <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingLeft="@dimen/toolbar_margin_start">

       <TextView android:id="@+id/title" android:text="Material design" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="end" android:gravity="center_vertical" android:maxLines="1" android:minHeight="?attr/actionBarSize" android:maxHeight="?attr/actionBarSize" android:textColor="@android:color/white" android:background="@android:color/transparent" android:textSize="16sp" />

       ...
   </RelativeLayout>

</FrameLayout>‍

To see the full source code, follow this link.

It’s pretty straight-forward implementation.

‍

Second, we create ObservableScrollViewWithFling class

It allows us to track the fling events while view is being scrolled. Processing the fling started event gives us the right place to show back the toolbar. Without intercepting fling event, we didn’t have a chance to show / hide toolbar while scrollview was in the fling state. Lucky us the solution is quite simple, and works like a charm. The class can be found here.

‍

Third, it’s time to create Fragment that will make use of our layout and ObservableScrollViewWithFling.

The fragment itself can be found here.

What’s worth additional comment is the way we move our Flexible space. Couple of notes:

1. We determine if toolbar needs to be shown based on the scrollY position.
2. If it’s visible and folded (Flexible Space is not visible), we use mToolbarViews background.
3. If it’s unfolded, so the Flexible Space is visible, mToolbarViews background is transparent, and we change the llTintLayers background color instead (up to the point where it matches toolbar heights).
4. Lastly we translate and scale the Flexible Space Text.

‍

Ending note

If you go trough the code available at github, you should be easily able to implement this solution in your own app. In case you need additional informations or help, feel free to ask in the comments below.

‍