Android Material Signature element with a listview

Question

I have a layout that consists of a Cover image (hero image) a toolbar and a listview.

On the new Material design guideline (like seen on this checklist: tangible surfaces), when I scroll the list view, the cover image should go behind the toolbar and the listview, then the toolbar should scroll to the top.

on the Google i/o 2014 app, you can see this feature under the session activity. The problem is that they are using a ScrollView that have everything inside it.

How can you do the same thing with a listview instead?

[EDIT] : after the release of the new Design support library (http://android-developers.blogspot.co.uk/2015/05/android-design-support-library.html), the solution is using a coordinator layout with a recyclerview. But thanks to @Endor anyway!

Answer 1

You can use a FrameLayout as a root, add an ImageView as the first child for the cover and then add a ListView as the second child.

Like this:

<merge xmlns:android="http://schemas.android.com/apk/res/android" >

    <TextView
        android:id="@+id/tv_splash"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_blue_light"
        android:gravity="center"
        android:text="@string/app_name"
        android:textColor="@android:color/black"
        android:textSize="24sp" >
    </TextView>

    <ListView
        android:id="@+id/lv_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="#CA8500"
        android:dividerHeight="1dp" >
    </ListView>

</merge>

Obviously the ListView will be blocking the ImageView, so the trick here is to add a transparent header to the ListView with the same height as your cover ImageView.

Then as user scrolls up the ListView, the ImageView will be covered by the real content of the ListView.