Android heterogeneous gridview like pinterest?

Question

Is it possible to create pinterest like layout on Android using GridView? I want to create image gallery using GridView but I am not sure if it is good solution. I do not want create three LinearLayouts (I think that this solution is not good: Pinterest style listview or gridview in android)

Any ideas ;)?

enter image description here

GridView will not work here because `height` is not same for all images — MAC, Jul 31 '12 at 09:13
It really looks just like three columns of imageViews to me. — Shark, Jul 31 '12 at 09:25
3 ListViews might be better because you can get some recycling going. However, it may also cause unwanted UI behaviour given that you can scroll each column independently. — Che Jami, Jul 31 '12 at 09:27
I think the best approach would be to create your own view and handle the draw code yourself. — Che Jami, Jul 31 '12 at 09:34

vladexologija · Answer 1 · 2012-11-21T13:27:26.653

25

I've been playing with this also (used LinearLayout) but at the end I had lot of problems with memory consumption (especially when I had to reload the items). I settled on simple solution which uses two synchronized ListViews. This way I can exploit internal caching which helps a lot. To do this I had to use OnTouchListener and OnScrollListener who synchronize lists. Here's an example:

https://github.com/vladexologija/PinterestListView

enter image description here

edited Nov 21 '12 at 13:27

answered Sep 21 '12 at 08:32

vladexologija

6,857
4
29
28

can you post the sample code for this? – eugene Nov 16 '12 at 07:07
What exactly do you need? Whole Activity source? – vladexologija Nov 16 '12 at 13:14
well anything more than the above code actually. Being a novice android developer, it's going to take me a while to grasp the concepts that you laid out. – eugene Nov 19 '12 at 03:38
3

There you go. There are still a lot of things to do (fix few bugs, optimize, simplify...) but this version works fine. What's most important it uses recycling! – vladexologija Nov 21 '12 at 10:31
@vladexologija Thank you so much for such a great post. – San Jan 03 '14 at 05:56
@vladexologija I want to set the images from my SDCard. As you have used Integer array, I am not able to pass the path to the images. Any idea on how to achieve this ?? It would be really helpful. Thanks in advance. – San Jan 04 '14 at 07:39
What this example does is that it just syncs two lists. If you build any two lists with their custom adapters (in your case loading image with some lazy loading) they should work with minor changes to posted code. – vladexologija Jan 06 '14 at 08:46
does anyone know how to handle onItemClick, it doesn't work for me – fish40 Sep 05 '14 at 12:23

MAC · Accepted Answer · 2012-07-31T09:41:13.550

22

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:

enter image description here

edited Jul 31 '12 at 09:41

answered Jul 31 '12 at 09:12

MAC

15,799
8
54
95

33

I know that it is possible but I don't want to use LinearyLayout because of bad view recycling. This solution will not work well with many imageviews. – radzio Jul 31 '12 at 09:38
1

ok as u wish but i have done this and i am loading 120 images from URL – MAC Jul 31 '12 at 09:40
This is a very neat solution. – jmishra Jul 31 '12 at 09:44
Hm... I will check this solution after work. Maybe it's what I need ;-) – radzio Jul 31 '12 at 09:44
@downvoter: plz care to say reason for downvote – MAC Sep 28 '12 at 08:31
2

is it run fast without problems with memory consumption? – Nam Vu Oct 15 '12 at 10:06
@MAC pleas help me for same issue – Chintan Khetiya Nov 28 '12 at 10:22
@chintankhetiya: whats problem ? – MAC Nov 28 '12 at 10:46
@downvoter care to say reason for downvote – MAC Dec 13 '12 at 09:41
@MAC How can I check which ImageView was clicked with this code? I want to be able to differentiate exactly which one was clicked and move to a different Activity (like a position variable would give me in an onItemClickListener) – Kgrover Apr 02 '13 at 01:33
@Kgrover: use `iv.setTag(""+i)` and set `onClick()` and use `v.getTag()` – MAC Apr 02 '13 at 08:44
1

this solution would work, but if there are a lot of items it could cause both slowliness of initializations and OOM . i've added a possible solution that uses the same idea of an adapterView. – android developer Sep 09 '13 at 09:57
Best library https://github.com/maurycyw/StaggeredGridViewDemo – Pratik Butani Feb 08 '14 at 11:34

score 21 · Answer 3 · answered Sep 18 '13 at 10:18

21

Some useful libraries for implementing Pinterest-like grid view:

answered Sep 18 '13 at 10:18

petrnohejl

7,581
3
51
63

Is there an example with horizontal scroll? – Gorets Feb 05 '14 at 15:18
used the staggeredGridView library in my app https://play.google.com/store/apps/details?id=com.taureano.amazicons . Worked great so up voting this answer. There is a small bug in orientation change in the library but i found the fix in stack overflow. – Swati Rawat Jun 15 '14 at 09:20

score 7 · Answer 4 · answered May 13 '15 at 07:00

7

For Recent visitors to this question , I would suggest using RecyclerView with StaggedGridLayoutManager. It's having more than enough functions and flexibility.

answered May 13 '15 at 07:00

MohK

1,873
1
18
29

yanchenko · Answer 5 · 2013-08-08T00:50:47.570

6

A standalone helper for synchronizing scrolling of 2 ListViews: https://gist.github.com/yanchenko/6179793

edited Aug 08 '13 at 00:50

answered Jan 24 '13 at 10:05

yanchenko

56,576
33
147
165

score 3 · Answer 6 · answered Aug 09 '13 at 03:29

I am using this lib: https://github.com/huewu/PinterestLikeAdapterView.

It works pretty well. The only issue I have is that the setOnItemClickListener and setOnItemLongClickListener are a bit buggy so I set the listeners directly on the convertView.

score 2 · Answer 7 · answered Jan 03 '14 at 13:03

2

This library comes from the Etsy application: https://github.com/etsy/AndroidStaggeredGrid

answered Jan 03 '14 at 13:03

HannahMitt

1,010
11
14

Android heterogeneous gridview like pinterest?

7 Answers7

Linked

Related