Android Heterogeneous Gridview Like Pinterest

Android heterogeneous gridview like pinterest?

Create layout like as follow

<ScrollView...>
<LinearLayout....
   android:id="@+id/linear1"
   orientation="horizontal">

   <LinearLayout....
     android:id="@+id/linear2"
     android:layout_weight="0.33"
     orientation="vertical">

   <LinearLayout....
     android:id="@+id/linear3"
     android:layout_weight="0.33"
     orientation="vertical">

   <LinearLayout....
     android:layout_weight="0.33"
     orientation="vertical">

</LinearLayout>
</ScrollView>

Now add your ImageView dynamically in layouts

linear1 = (LinearLayout) findViewById(R.id.linear1);
linear2 = (LinearLayout) findViewById(R.id.linear2);
linear3 = (LinearLayout) findViewById(R.id.linear3);

for(int i=0;i<n;i++)
{
   ImageView iv = new ImageView(this);
   iv.setImageResource(R.id.icon);

   int j = count % 3;  <---- 
   if(j==0)
       linear1.addView(iv);
   else if(j==1)
       linear2.addView(iv);
   else
       linear3.addView(iv); 
}

output:

How to Use Adapter While Filling Layouts

After a lot of research, finally I found a library which have lazy loading and heterogeneous gridview and also not has any scroll or recycling lags/problems.

Maurycy's StaggeredGridView is completely what I'm looking for.

Here is the library and also there is a demo too.

Grid with different item height and width

For this you need a work around or you can say a third party Library named as "AndroidStaggeredGrid"

You can check it on here

Google+ Android grid widget for tablet tutorial

Depending on how variable the items' heights are, you have a few options:

1. If you're looking to do a GridView with many variations of heights (e.g. Pinterest) you should play around with StaggeredGridView - as far as I can tell, it's the best open source solution out there right now.

2. In the image you posted, it looks as if there are parent rows with variable height children - this is a slightly easier problem to solve, and can be mimicked by using a regular ol' ListView and a subclass of BaseAdapter. Writing out the code for this is too involved for a SO answer, but i'll give you an overview of how I might achieve this effect.

   • The BaseAdapter must determine the rough layout of each row ahead of time such that it can report to the listview how many rows it will require - you'll need to override getCount().
   • In getView() of your adapter, you will inflate a single LinearLayout (or perhaps use convertView if it's been recycled) and add as many children (again, more LinearLayouts) as you will require for the width of the device (you should figure this out at runtime, unless you want to just create a phone and tablet version).
   • Each child LinearLayout added to the row should be set to weight=1 such that they stretch to the entire width of the parent row. In the screenshot you posted, there are 3 columns (the third id cut off).
   • Each child LinearLayout you just added to the row represents a column. You should set their orientations to vertical, being as they are columns!
   • Within each column, if you were to add a single child, you'd have a gridview.
   • If you wish to achieve the effect above, you can add more items to each column.
   • For example, row 1, column 1 has one large child. Columns 2 and 3 in row 1 both have 2 half-height children.

Syncing Two ListViews side by side Android

Okay, so I ended up using the Linear Layout Method(See the Question) and used setTag to get the onItemClickListener working, and a CustomScrollView implementation to get the infinite List working.

Basically, two linearLayouts stacked horizontally, inside a scrollview. It works rather well, and loads much faster.

Also, to load my images SmartImageView if that helped.

If someone wants the code, I might be able to post parts of it.

---

Related Topics