Android: How to create a Facebook like images gallery grid?

Question

I'm trying to implement a facebook like, gallery grid, where items have different sizes:

I was trying to use different libraries/solutions but for now without success:

1. I tried to use AsymemetricGridView. But the problem with this implementation is that there are empty dead spaces left in the grid after going throw the adapter.

2. I also thought of using the StaggeredGridLayoutManager and a RecycleView, but items, in this case, don't have equal or half sizes to other items as it implemented in the Facebook gallery.

Now I thinking of providing different view holders for different cases in the adapter, but I really don't like this idea. What is a better approach to this task?

Cinerary

Answer 1

Finally, I have decided to use the TwoWayView library.

That you can get from: https://github.com/lucasr/twoway-view

In my code I did the following major changes:

Added TwoWayView in the xml layout:

 <org.lucasr.twowayview.widget.TwoWayView
            android:id="@+id/twvGrid"
            android:background="@android:color/white"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            style="@style/TwoWayView"
            app:twowayview_layoutManager="SpannableGridLayoutManager"
            app:twowayview_numColumns="3"
            app:twowayview_numRows="3" />

In code I made the following changes:

private TwoWayView mTwvGrid;
.........

 mTwvGrid = (TwoWayView) findViewById(R.id.twvGrid);
    final Drawable divider = getResources().getDrawable(R.drawable.divider);
    mTwvGrid.addItemDecoration(new DividerItemDecoration(divider));


    mTwvGrid.setOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            RequestManager glideRequestManager = Glide.with(TimelineStoryActivity.this);
            if (newState == RecyclerView.SCROLL_STATE_IDLE || newState == RecyclerView.SCROLL_STATE_SETTLING) {
                glideRequestManager.resumeRequests();
            } else {
                glideRequestManager.pauseRequests();
            }
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {}
    });
.......

if (mAdapter == null) {
            mAdapter = new TimelineStoryRecycleAdapter(this, mStory, mTwvGrid, this);
            mTwvGrid.setAdapter(mAdapter);
        } else {
            mAdapter.setStory(mStory);
        }

Here is the end result:

Cinerary

@Emil Adz can u post code of your TimelineStoryRecycleAdapter, this view requires a ListAdapter , and in current android listadpter is an interface , so please help on how to desgin and apply the adapter – Nolitta

@Ak9637, Sorry, I can't as I don't have this class in my possession anymore. – Cinerary

ok, can u please explain this if possible : this view requires a ListAdapter , and in current android listadpter is an interface , so please help on how to desgin and apply the adapter – Nolitta

twoway-view is very much simpler and faster to implement than AsymemetricGridView. – Manuel

this library is not working now. any other solution? – Lon

Answer 2

You can use recyclerview with StaggeredGridLayoutManager to accomplish this. StaggeredGridLAyoutManager already handles this, also u can use setFullSpan for a image to use a whole row

Postmark

If you look at section number 2 in my question, you will know that I tried this option but there is a problem with the heights of the items in the grid. I need to heights to be same of double the size. – Cinerary

whose height are u need , u can easily give a fix height to imageview to achieve this, i already saw your 2nd point – Postmark