How to determine column position in staggered grid

Question

I’m using a staggered recycler view layout for a list of photos. I want the spacing on the sides to be zero while still having space between the two columns. I’m using an item decoration sub class to get the spacing seen in the attached photo. I know I have control over the left and right spacing but the problem is that I never know which column the photo is in. It seems like the staggered layout manager does some of its own reordering. I've tried using getChildAdapterPosition but it seems to return the position in the data source array and not the actual position of the photo in the layout. Any idea how I should approach this?

Answer 1

I managed to get it working. So in my case I don't need any borders on the left and right edges of then screen. I just needed borders in the middle and at the bottom. The solution is to get the layout parameters of the view that are of type StaggeredGridLayoutManager.LayoutParams. In those parameters you can get the spanIndex which tells you on which index the view is. So if you have a spanCount of 2, the left view will have a spanIndex of 0 and the right view will have a spanIndex of 1.

Here is my code so maybe it will help you

public class SpaceItemDecoration extends RecyclerView.ItemDecoration {
private int space;

public SpaceItemDecoration(int space) {
    this.space = space;
}


@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    int position = parent.getChildAdapterPosition(view);

    StaggeredGridLayoutManager.LayoutParams lp = (StaggeredGridLayoutManager.LayoutParams)view .getLayoutParams();
    int spanIndex = lp.getSpanIndex();

    if(position > 0){
        if(spanIndex == 1){
            outRect.left = space;
        } else{
            outRect.right = space;
        }

        outRect.bottom = space * 2;
    }
}

}

In my case first I have to get the position since on the index 0 I have a header view which doesn't have any borders. After that I get the span index and depending on it I set the border that I need on that view. And finaly I set the bottom border on every view.

Answer 2

so the one solution I was able to use was with an item decorator but it definitely is a little weird/hacky feeling.

Basically you'll adjust the outer rectangle of the item based on its column position (or something similar). My understanding is that the outer rectangle is more or less the spacing you want to change. Give the code below a try, obviously you'll need to make your own adjustments and logic to 'calculate' which column the item is on but this should be enough to figure it out, hopefully:

recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            int left = outRect.left;
            int right = outRect.right;
            int top = outRect.top;
            int bottom = outRect.bottom;
            int idx = parent.getChildPosition(view);
            int perRow = gridLayoutManager.getSpanCount();

            int adj = blahh... // some adjustment

            if (idx < itemsPerRow) {
                // on first row, adjust top if needed
            }

           if(idx % perRow == 0){
                // on first column, adjust. Left magically adjusts bottom, so adjust it too...
                left += adj;
                bottom -= adj;
           }

           if(idx % itemsPerRow == perRow - 1){
               // on last column, adjust. Right magically adjusts bottom, so adjust it too...
               right += adjustment;
               bottom -= adjustment;
           }

            outRect.set(left, top, right, bottom);
        }
    });

Again this is hacky and takes some trial and error to get right.

Another solution I have tried with some success is to define different views for the different columns. In your case the columns would have views with different, negative margins, on the left and right to get the effect you want.

As a side note, I assume you are using an elevation on the card view. One thing I've noticed is that if the card view does NOT have elevation and instead you handle it yourself (yeah, i know, isn't the point to not handle elevation yourself) much of this difficulty goes away and things start to behave, likely because of the elevation/shadow calculations. But anyway... Hope this is at least somewhat helpful...