Android Recycler StaggeredGrid divider

Question

My problem is that I've been trying to put some black lines between the elements of the staggeredGrid, but I can't seem to get it to work properly. I found this class which adds spaces between each individual item:

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;
    }
}

How can I adapt it to color those spaces ?

Answer 1

You just need to override onDraw() to actually paint something on the view. Beware, if adding multiple decorations, the order is important.

Below is some example code drawing a border on the bottom of the view, you will need to draw all 4 borders.

public class DividerDecoration extends RecyclerView.ItemDecoration {

private final Paint mPaint;
private int mHeightDp;


public DividerDecoration(Context context, int color, float heightDp) {
    mPaint = new Paint();
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(color);
    mHeightDp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, heightDp, context.getResources().getDisplayMetrics());
}

@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    for (int i = 0; i < parent.getChildCount(); i++) {
        View view = parent.getChildAt(i);
            c.drawRect(view.getLeft(), view.getBottom(), view.getRight(), view.getBottom() + mHeightDp, mPaint);
    }
}

}

Also you can check out a full example here on drawing a bottom divider.