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 ?

score 0 · Accepted Answer · edited Nov 04 '15 at 23:29

0

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.

edited Nov 04 '15 at 23:29

Bogdan Daniel

2,689
11
43
76

answered Nov 04 '15 at 19:05

David Medenjak

33,993
14
106
134

I separated the questions. I saw that mPaint is android.graphics.Paint. How do I specify the color ? – Bogdan Daniel Nov 04 '15 at 19:34
@BogdanDaniel Updated the answer ;) – David Medenjak Nov 04 '15 at 19:40
If I give an int value to mSpace, the '@Override' complains. – Bogdan Daniel Nov 04 '15 at 19:55
@BogdanDaniel there has to be an error some place else, this should not be related – David Medenjak Nov 04 '15 at 20:01
`view.getBottom() + mSpace`. If I replace mSpace with 15, the program complains. – Bogdan Daniel Nov 04 '15 at 20:06
@BogdanDaniel #1 I've linked you a working code sample. #2 I just tested the code (copied the parts, added the paint variable) and it is working #3 replacing variable with hardcoded int is working, too So please check your own code before accusing me of anything. – David Medenjak Nov 04 '15 at 23:25
I made it work. Btw how do I use it for left,right,top. I tried ` c.drawRect(view.getLeft(), view.getBottom(), view.getRight(), view.getRight() + mHeightDp, mPaint);` but it's not working – Bogdan Daniel Nov 04 '15 at 23:30
it's ```drawRect(left, top, right, bottom)``` so you'd need ```drawRect(getRight(), getTop(), getRight() + mHeightDp, getBottom())```, you might wanna look into setting the paint to ```STROKE``` and just painting the non-filled rect around, but I don't know how the stroke drawing exactly works – David Medenjak Nov 04 '15 at 23:34
I tried using `drawRect(getRight(), getTop(), getRight() + mHeightDp, getBottom())` but it doesn't work – Bogdan Daniel Nov 04 '15 at 23:37
Just tried it, ```c.drawRect(view.getRight(), view.getTop(), view.getRight() + mHeightDp, view.getBottom(), mPaint);```works. If you have the same border width on vertical and horizontal you can use ```c.drawRect(view.getLeft() - mHeightDp/2, view.getTop() - mHeightDp/2, view.getRight() + mHeightDp/2, view.getBottom() +mHeightDp/2, mPaint);``` if you set the Paint to STROKE and the stroke width... – David Medenjak Nov 04 '15 at 23:45
Found the problem. I had some padding from other decoration and the black line was under the image. Thank you. – Bogdan Daniel Nov 05 '15 at 00:00
The problem that I'm still having is that the items keeps moving and sometimes I'm left with black space as in this photo http://6pix.net/images/64768344805714967218.jpg – Bogdan Daniel Nov 05 '15 at 00:01

Android Recycler StaggeredGrid divider

1 Answers1