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

you can create a table layout, and in table row, you can add col and row span to create such a layout.

Answer 2

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. =)

Answer 3

This one doesn't look like a normal Gridview or a listview Adapter. You may have to create a custom control for it. For example in the given example some apps have more weightage compared to others. The ones which have more weightage should occupy full width and others will occupy 50% or 33% of the width (based on the landscape or portrait).

So the logic create a table layout and based on the weightage add more controls on the adapter. And based on the weightage you have to create the row or column span accordingly.

Answer 4

This should be done with a GridView.

By the looks of it you have 3 sizes: one that covers 1 space, one that covers 2 and one that covers 4 spaces. It shouldn't be easy.

But how the images are in a stack and how the layout is oriented I believe the best option you have is to go by a GridView. It is quite flexible in implementing columns and rows and it gives some ready implementation in the orientation changes.

You should make 3 kind of items one that has 4 small Views, another that has 2 items and another that has one big View. In each cell there can be one of the above.

According to some properties you should populate the GridView. Then you should experiment with the options that GridView provides(it has some properties that "auto" stacks elements according to width and height in the layout). That is all I can offer because i have not done anything similar.

EDIT: Trying to implement the android market interface without searching a little bit and only by copy-paste?? This CAN'T be as easy as you think it is.

Anyway, if I were you I would still start with the implementation I mentioned before. Although I can't provide any code, because I have not done anything similar, in your case the GridView with all the implementation that already provides would be a great help.

PS: My opinion is to try searching a little bit first and then update the question again.

Answer 5

I think the market app is done using a ViewPager and each page contains a RelativeLayout or LinearLayout. For making a metro like interface, a GridView for each page is more suitable.

    page 1             page 2         page 3
________________________________________________
|              |                 |              | 
|              |                 |              | 
|    GridView  |     GridView    |   GridView   | 
|              |                 |              | 
|              |                 |              | 
|              |                 |              | 
|              |                 |              |
|              |                 |              |
-------------------------------------------------

Here you will find some links to ViewPager tutorials

Another one here

Update:

You can even use a OverScroller to give it an elastic effect while scrolling.

Answer 6

Have you tried this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.54" >
        <Button
            android:id="@+id/Button01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.00"
            android:text="Button" />    
        <Button
            android:id="@+id/Button02"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.00"
            android:text="Button" />    
    </LinearLayout>
    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="99dp" > 
        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />  
        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button" />    
    </LinearLayout>   
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >   
            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:layout_height="152dp"
                android:text="Button" />    
            <Button
                android:id="@+id/button5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />    
        </LinearLayout>    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >
            <Button
                android:id="@+id/button6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />
            <Button
                android:id="@+id/button7"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Check this thread: Heterogeneous GridLayout