How to create User interface like the attached photo

Question

Can any one tell me what is this photo effect called. And I would like to know how to create an adapter for this attached image effect.

@Edited: This is a sample photo o

Answer 1

If I were to replicate the market layout these are the following classes that I would use:

 1. Obviously ViewPager for horizontal swiping ability.
 2. A heavily customized ListView.

There is a method in ListView called addHeaderView(), in which you can manipulate the first few items which appeared in the listview with your own custom layout. In this case, the first, 4th, 5th and 6th item in the list will be a an ImageView with match parent for its width and probably a fixed height.

The 2nd and 3rd item will simply be a horizontal LinearLayout with 2 ImageViews with equal weights, and the rest are simply Listviews with custom layouts.

All these above refers to the "Portrait" view in the phone. For the "landscape" view, again, you will have to do it manually.

The trick is how you modify your BaseAdapter to fill up your listview. In default listviews one "position" refers to one row in the listview. In this case your custom listview layout consists of two items in a single row. Try figuring that out, play around with your data and arrays. I'm sure it can be done. =)