CODEWITHSUNDEEP
androidlistviewandroid-recyclerviewinfinite-scrollandroid-gridview
shanraisshan
shanraisshan

Reputation: 3603

Staggered Alike Recycler View

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...

4 cases

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

5 case

6 case

enter image description here

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.

Upvotes: 0

Views: 937

Answers (2)

Danish Amjad
Danish Amjad

Reputation: 192

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

Upvotes: 1

Akash Patel
Akash Patel

Reputation: 3141

It is possible with using custom layout-manage. we can modify layout-manger as per our needs.

I have used DelegateAdapter from vlayout git lib and it's really work awesome. Check below link for more details.

https://github.com/alibaba/vlayout

Upvotes: 0

Related Questions