gridView with different cells sizes, pinterest style

Question

Background

GridView is a class that extends AdapterView , which means it shows cells in a grid-style efficiently, recycling old views to be shown as new ones when the user scrolls it.

The problem

Sometimes, you would want to get a special UI, which resembles the Windows Phone Tiles UI, having cells of different sizes on top of each other.

Something like this:

AABB
AACC
AADD
AADD

each letter represents a part of its cell, so cell A is 2x4 , cell B and cell C take 2x1 each , and cell D is 2x2 .

It could be even more than that, where cell D finished a bit above what i've shown, and right beneath it there is another cell so the end of D and the end of A aren't necessary aligned.

an example of an app that has this style is pinterest .

GridView doesn't allow such a thing.

In fact , every solution I've tried has issues. Would like to ask if there are any other alternatives or better solutions.

What I've found

There are multiple ways to handle this problem:

1. As a class that extends AdapterView GridView has the ability to have a type for each item (using the BaseAdapter), which would allow you to set how to layout the cell .

   However, it still limits you since you will get rows of items, one beneath the other. you have to have them aligned.

2. GridLayout is a relatively new layout, and it's quite flexible. Google has published a nice compatibility library for it, supporing API7 and above.

   However, it doesn't use any recycling of views, so it's a bad choice in case you wish to show a lot of items.

   If you have a lot of items, you would need to create all of the views for them .

3. QuiltView Library - extends from GridLayout, so basically has the same problem like it.

4. StaggeredGridView - looks the most promising, but has a lot of bugs, especially when changing orientation. such bugs include empty cells, bad scrolling and NPEs (rare but still happens). I'm also not sure if it supports having customized cells instead of imageViews alone .

5. other solutions, as mentions here .

The question

Does anyone know of another alternative to this problem? Maybe some workarounds for any of the solutions I've shown?

---

EDIT: I think that about StaggeredGridView , the scrolling and exceptions can be solved by using a normal ImageView that you set its size inside the getView. i think that the reason for it to work in a weird way is that the sample updates the size of the imageview after it was loaded from the internet.

However, empty cells issue still remains in this library. not only that, but their sizes change a lot , even without changing the orientation.

---

EDIT: for now, i think the best solution is to use , PinterestLikeAdapterView library.

it doesn't have any issues that i can find.

however, it can't make items to take more than 1 cell width. it's very good nevertheless.

EDIT: sadly it has issues with notifyDataSetChanged . i've reported about it here.

Answer 1

Is it a bit late to answer?

check this library from etsy. it looks very promising.

https://github.com/etsy/AndroidStaggeredGrid

I think it is newer version of https://github.com/maurycyw/StaggeredGridView

.

Updated.

Try using RecyclerView StaggeredGridLayoutManager from google instead

    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
    recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
    recyclerView.setItemAnimator(new DefaultItemAnimator());
    recyclerView.setAdapter(adapter);

Answer 2

I think a RecyclerView with StaggeredGridLayoutManager can solve this issue, and that if you wish to also have a fast-scroller, you can try this library.

So, no more trick are needed, as Google provided a solution...

Answer 3

You may be able to accomplish this with a single ListView, where each cell contains a different grid template. I've done something similar to what you're describing, using this technique. If cell sizes need to be unique, this won't work, but it should be sufficient for the case you described:

AABB
AACC
AADD
AADD

Creating a handful of templates like this, with various arrangements of A,B,C,D, you can then randomly use them as ListView cells and some simple offset math would allow your adapter to populate each subcell to accomplish something like the following:

AABB
AACC
AADD
AADD

BBBB
ACCC
ADDD
ADDD

AAAA
BBCC
BBCC
DDDD

AABB
AACC
AADD
AADD

AABB
AACC
DDDD
DDDD