Exec Exec - 3 months ago 12
Android Question

How do I scroll content over an image?

I'm trying to implement the Play Store header image behaviour, without success.
I was able to have the entire page scrolled, but only along with the

ImageView
inside the
CollapsingToolbarLayout
.

I used the example at the announcement of Android Design Support library. The XML of the activity as of now looks like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.AppBarLayout
android:layout_height="192dp"
android:layout_width="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"
layout_width="wrap_content" layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.CollapsingToolbarLayout

android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed" layout_width="wrap_content"
layout_height="wrap_content">
<ImageView

android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/imageView" android:layout_gravity="center_vertical" android:src="@android:mipmap/sym_def_app_icon"/>
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin" layout_width="wrap_content" layout_height="wrap_content"/>

</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/textView" android:layout_gravity="center_vertical"/>
</android.support.design.widget.CoordinatorLayout>


I'm pretty sure that something's missing here.

Answer

Instead of using ScrollView, you need to wrap your AppBarLayout inside a CoordinatorLayout.

You would also need to put app:layout_behavior="@string/appbar_scrolling_view_behavior" on the ViewGroup immediately following the AppBarLayout that is the main page content.

Here's a layout from Chris Banes' cheesesquare sample app.

Comments