Pinterest like Grid in Android

Matroska picture Matroska · Sep 15, 2012 · Viewed 12.1k times · Source

I want to build a grid like the one in Pinterest app on Android.

I started extending an AdapterView<ListAdapter> but I cannot make many things working (for example the overscroll effect) so, after abandoning the idea to extend AbsListView, now I am starting thinking it is better to extend a ListView and override the layoutChildren() method.

What do you think?

Thanks

Answer

Anjal Saneen picture Anjal Saneen · Aug 19, 2017

We won’t be needing any external library for this as Android’s native RecyclerView makes implementing a Pinterest masonry layout simply by changing the RecyclerView’s Layout Manager

mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
RecyclerAdapter adapter = new RecyclerAdapter(this);
mRecyclerView.setAdapter(adapter);

Cool. it's Very easy ,but margin on my LinearLayout didn’t seem to work. So here’s a quick fix.

SpacesItemDecoration decoration = new SpacesItemDecoration(16);
mRecyclerView.addItemDecoration(decoration);

SpacesItemDecoration class:

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
private final int mSpace;

public SpacesItemDecoration(int space) {
    this.mSpace = space;
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    outRect.left = mSpace;
    outRect.right = mSpace;
    outRect.bottom = mSpace;

    // Add top margin only for the first item to avoid double space between items
    if (parent.getChildAdapterPosition(view) == 0)
        outRect.top = mSpace;
    }
}

Github link of example

my final Results