Android: Appbar scroll from middle of screen as in Google I/O app

With the release of Android Design Support Library, designing to the specification of Material Design has become very convenient to the developers. The replacement of ActionBar with Toolbar generalized the application’s action bar as a separate View which can be embedded anywhere in the screen. With the introduction of AppBarLayout, the material motions such as Parallax scrolling, Collapsing Toolbar are just 2–3 XML tags ahead!

Here’s the screenshot of Detail activity for an event in Google I/O 2015 app. Appbar is placed at an offset of an ImageView. When scrolled vertically, the Appbar scrolls up and sticks at the top along with parallax scroll applied to the ImageView.

Google I/O 2015 app — Event Detail Screen

As of the date of publication, Google I/O — 2015 source code hasn’t been released for Android. So I made a quick layout with similar behavior. Let me walk-through the code!

Layout Hierarchy

There are only 2 activities, MainActivity and DetailActivity. Although, we can design in a single activity, let’s just retain the hierarchy (Main -> Detail). MainActivity has a single button, starting the DetailActivity.

MainActivity.java & activity_main.xml code

Sketching the Detail activity

Let me simplify the layout structure of detail activity we require.

LinearLayout (Or RelativeLayout)

— ImageView

— Appbar

— LinearLayout (has all contents)

At the end, we want the root LinearLayout to be scrolled. Let’s have a ScrollView encapsulating the LinearLayout.

ScrollView

— LinearLayout (Or RelativeLayout)

— — ImageView

— — Appbar

— — LinearLayout (has all contents)

Now, let’s peek into the Appbar. We can see 3 parts — Toolbar, TextView (for event title), TextView (for event timings)

AppBar — 1. Toolbar, 2. Event Title, 3. Event Timings

AppBarLayout code — part of activity_detail.xml

With the ScrollView encapsulating the whole layout, the code for activity_detail.xml :

After setting the Toolbar as Support-action-bar, DetailActivity.java would look like:

Now, if we run the app, the whole screen will be scrolled as we expected (including the appbar).

Next, we have 2 things to do:

1. Make the Appbar stick to the top when scrolled
2. Parallax Scroll for ImageView

Sticking the Appbar

Instead of a ScrollView, we can replace it by StickyScrollItems library. By specifying the View to be stuck, our requirements can be satisfied. Include the library in build.gradle.

compile 'se.emilsjolander:StickyScrollViewItems:1.1.0'

Add a tag “sticky” to AppBarLayout.

<android.support.design.widget.AppBarLayout
    ---
    ---
    ---
    android:tag="sticky">

Replace ScrollView with com.emilsjolander.components.StickyScrollViewItems.StickyScrollView

The final activity_detail.xml would be,

ImageView — parallax scroll

Parallax effect can be achieved as:

• Add an OnScroll listener for StickyScrollView
• Inside the onScroll method, obtain the scrollY (vertical scroll)
• set the translationY for imageView as scrollY/2.

Final DetailActivity.java code:

The complete source code is available in GitHub.

https://github.com/nowke/appbar_middle_scroll