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 of Android market. I want to create a layout like this. I suppose this should be made overriding a GridView adapter.
Portrait Screenshot
Landscape Screenshot
Another Screenshot
I'm extremely sorry my question was not clear to you guys.
Possible duplicate.
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
You create in this order:
LinearLayout(VERTICAL) with weightSum of 2;
LinearLayout(VERTICAL) with weight of 1 and weightSum of 3;
Inside it will be 3 layouts, horizontal linear layout with weight of .70, horizontal linear layout with weight of .50 and an imageView with weight of 1.80
LinearLayout(VERTICAL) with weight of 1 and weight sum of 3;
Inside it will be 3 linear layouts
2 *(2 of these) -horizontal with weight of .50 and weight sum of 2 inside this horizontal layout will be two image views with a weight of 1 each
thirdly and finally an image view with the weight 1.50
do this and you'l have the correctly weighted layout to your liking
you can create a table layout, and in table row, you can add col and row span to create such a layout.
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.
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. =)
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.
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
You can even use a OverScroller to give it an elastic effect while scrolling.
