Stylish Design Pattern for Displaying a Lot of Information and a Huge Picture

Home improvement store OBI has an App called Pflanzenfinder (in Germany) that has a design pattern that just blew my mind!

OBI uses it to display facts and a huge picture of different plants.
When you open the plant details page, the upper half of the screen shows the picture, while the lower half shows something like a pile of paper sheets with a table view with facts.
When you scroll up, the picture starts being covered up by the “pile of sheets”, through which you can scroll like in a normal table view.

This is so damn simple but at the same time so very effective and good looking!

I can imagine this to have plenty of use cases, among these are:
– for any type of shopping apps, especially in the fashion segment, where it is crucial to also be able to present a full screen picture of the product
– a really stylish contacts app (imagine the iPhone contacts would be presented like this! Wow!)

Best thing is, that it is fairly easy to implement.
– set the image view first on the screen so that it fills up the space
– insert a scroll view with the same size and position like the image view
– inside the scroll view place a transparent view of the size you want to have the initial “picture” area before scrolling
– below the transparent view in the scroll view place your table view with all its rows & sections

Doing it on Android shouldn’t present too much trouble either, use a relative or frame layout for the image and the scroll view, then a vertical linear layout for the transparent view and the list view.

TADA: simple and effective!

I can imagine so many variations, like placing videos instead of the image or giving the possibility to swipe through items…

Really need to try this sometime! :-D