Google Plus Android App UI Design - ListView swipe

Question

Could someone please explain how Google implemented the "detail" page of their Google + app? The detail page features an image at the top (which can be tapped) and a ListView that is positioned roughly 50% down the screen.

Like so: Example

When you swipe up the ListView moves up to fill the entire screen: Example

After this, additional swipes control the listView up/down: Example

I've done my research but very little is available to suggest how they implemented this.

Thanks

Answer 1

The short answer is that they're using various tricks for enabling the sliding menus. Tons of resources have been authored by folks in the Android community, most notably:

• The video on the subject here: https://plus.google.com/115177579026138386092/posts/FjnASs9no1a
• The sample that was authored to accompany the video: https://github.com/jfeinstein10/SlidingMenu
• And finally, a demo app that exists in the play store.

The easiest way to get the demo is to search for SlidingMenu Demos in the Play store. The specific controls of interest in the Demo are the "ViewPager" example and the "Slide" example.

When you look at the library, you'll notice that it pretty much rewrites significant pieces of the existing controls from View on up as well as custom transformations for a canvas element used in the view.

The sample that Jeremy authored, which really is an alternative library to existing ListView and Page controls, supports a large spectrum of Android devices as well as a number of UI controls that are slightly different variations of the examples you gave and that use varying transitions.