Staggered Alike Recycler View

Question

I want to implement list of items, something like this as shown below.

1. if total number of items = 1 (show full item)
2. if total number of items = 2 (show 2 items in 2 columns)
3. if total number of items = 3 (show 3 items, 2 in column#1 and 1 in column#2)
4. and so on...

In case of 5 and 6 items, the section should scroll as shown below

I want to implement this, as one of my section in my application. What is the correct way of implementing this in Android, I need a starting point. Is this possible with a recycler view? Please share any library or github project if available.

Answer 1

Yes, You can achieve this by using StaggeredLayoutManager, in which you need to set your span count & Orientation according to your data size like below code:

enter code private void setSpanValue() {
    StaggeredGridLayoutManager staggeredGridLayoutManager;
    if (modelArrayList.size() == 1) {
        staggeredGridLayoutManager = new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
    } else if (modelArrayList.size() == 2) {
        staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
    } else if (modelArrayList.size() == 3) {
        staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
    } else if (modelArrayList.size() == 4) {
        staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
    } else {
        staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
    }

    recyclerView.setLayoutManager(staggeredGridLayoutManager);
    recyclerView.hasFixedSize();
    Adapter adapter = new Adapter(this, modelArrayList, checkEvenOrOdd(modelArrayList.size()));
    recyclerView.setAdapter(adapter);
}

For more than 4 items you need to check whether the data is even or odd like below code:

private boolean checkEvenOrOdd(int n) {
    if ((n % 2) == 0) {
        // number is even
        return true;

    } else {
        // number is odd
        return false;
    }
}

Check it out my sample project it will solved your problem https://github.com/DanishAmjad12/HetrogenousLayout