Android - How to add a dashed/dotted separator line for RecyclerView?

Question

I have used the code from this answer to create a solid separator line for my RecyclerViews.

However, I would like the line to be dashed/dotted.

I already have a line_dashed.xml resource that I am using elsewhere in my app:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="line" >

    <stroke
        android:color="@color/blue"
        android:dashGap="12dp"
        android:dashWidth="12dp"
        android:width="1dp" />

</shape>

But if I try applying this as the drawable resource that is accessed via my call to recyclerView.addItemDecoration(new SimpleDividerItemDecoration(getContext())), no line is drawn at all.

How to solve so a dashed line is shown?

score 6 · Answer 1 · edited Sep 27 '16 at 18:38

Just add your drawable resource into this item decorator.

DividerItemDecoration decorator = new DividerItemDecoration(ContextCompat.getDrawable(getContext(), R.drawable.line_dashed));
recyclerView.addItemDecoration(decorator);

and DividerItemDecorator class:

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

    private Drawable mDivider;
    private int mPaddingLeft;

    public DividerItemDecoration(Drawable divider) {
        mDivider = divider;
        mPaddingLeft = 0;
    }

    public DividerItemDecoration(Drawable divider, int paddingLeft) {
        mDivider = divider;
        mPaddingLeft = paddingLeft;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        if (mDivider == null) return;
        if (parent.getChildAdapterPosition(view) < 1) return;

        if (getOrientation(parent) == LinearLayoutManager.VERTICAL) {
            outRect.top = mDivider.getIntrinsicHeight();
        } else {
            outRect.left = mDivider.getIntrinsicWidth();
        }
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (mDivider == null) {
            super.onDrawOver(c, parent, state);
            return;
        }

        if (getOrientation(parent) == LinearLayoutManager.VERTICAL) {
            final int left = parent.getPaddingLeft() + mPaddingLeft;
            final int right = parent.getWidth() - parent.getPaddingRight();
            final int childCount = parent.getChildCount();

            for (int i = 1; i < childCount; i++) {
                final View child = parent.getChildAt(i);
                final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
                final int size = mDivider.getIntrinsicHeight();
                final int top = child.getTop() - params.topMargin;
                final int bottom = top + size;
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }

        } else { //horizontal
            final int top = parent.getPaddingTop();
            final int bottom = parent.getHeight() - parent.getPaddingBottom();
            final int childCount = parent.getChildCount();

            for (int i = 1; i < childCount; i++) {
                final View child = parent.getChildAt(i);
                final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
                final int size = mDivider.getIntrinsicWidth();
                final int left = child.getLeft() - params.leftMargin;
                final int right = left + size;
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }
        }
    }

    private int getOrientation(RecyclerView parent) {
        if (parent.getLayoutManager() instanceof LinearLayoutManager) {
            LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
            return layoutManager.getOrientation();
        } else
            throw new IllegalStateException("DividerItemDecoration can only be used with a LinearLayoutManager.");
    }
}

Should work I tested it.

UPDATE:

    android:layerType="software"

add this parameter in xml for recyclerView Also add size into your shape drawable:

<size android:height="1dp"/>

Have you test it with datted drawable like @ban-geoengineering showed? Does it really work? — Roman_D, Sep 23 '16 at 20:05
@Roman_Donchenko Check update, with this changes defenetly works. — Mykhailo, Sep 23 '16 at 20:25
It works for me - with one change: I had to add `` to my **line_dashed.xml** for it to be seen - i.e., I had to specify a height of `2dp` rather than `1dp`. Any ideas why? — ban-geoengineering, Sep 27 '16 at 18:42
I too have to specify a height of 2dp rather than 1dp to make this work. Any ideas? — Ozeetee, Apr 19 '17 at 23:48
yes exactly, it is working when having height of `2dp` rather than `1dp`. — Deepak Goyal, Nov 13 '17 at 22:24
@DeepakGoyal - Some device sizes end up getting 1dp translated to < 1 pixel in the conversion math. In instances like this, its usually a good idea to set it to 1px or 2dp like you did. — Mitch Ware, Nov 14 '17 at 21:16
it's working but android:layerType="software" disable card view shadow — Mohamed Moamen, Feb 16 '19 at 23:06

score 2 · Answer 2 · answered Apr 07 '20 at 06:48

currently u can use DividerItemDecoration from the box.

recyclerView.apply {
        layoutManager = LinearLayoutManager(this@YourFragment.context)
        adapter = this@YourFragment.adapter
        addItemDecoration(
            DividerItemDecoration(
                this@YourFragment.context,
                DividerItemDecoration.VERTICAL
            ).apply {
                context.getDrawable(R.drawable.divider)?.let {
                    setDrawable(it)
                }
            }
        )
    }

Use the next shape XML:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">

    <size android:height="1dp" />

    <solid android:color="@color/primary" />

    <stroke
        android:width="0.5dp"
        android:color="@color/primary"
        android:dashWidth="5dp"
        android:dashGap="5dp" />
</shape>

Attention: The stroke width must be less than the height of the line. In another case, the line will be not drawn.

This bit was key for me: ``` Attention: The stroke width must be less than the height of the line. In another case, the line will be not drawn. ``` — trod, Aug 19 '20 at 06:55

score 0 · Answer 3 · answered Sep 23 '16 at 20:40

Draw dashed line in Android is not so easy deal. Drowable like you showed and even just draw dotted line on canwas (canvas.drawLine(..., paintWithDashEffect)) not always works (not for all devices). You may use android:layerType="software" or draw path. IMHO, the better solution is to not draw dotted line at all (draw just line). But if you really need dotted line, you can use @fearless answer or somethink like this:

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

private Paint mPaint;
private int mDividerSize;

public DividerItemDecoration(int dividerSize) {
    mDividerSize = dividerSize;
    mPaint = new Paint();
    mPaint.setColor(ContextCompat.getColor(context, R.color.colorAccent));
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(dividerSize);
    mPaint.setPathEffect(new DashPathEffect(new float[]{dashGap,dashWidth},0));
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    outRect.bottom = mDividerSize;
}

@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    int left = parent.getPaddingLeft();
    int right = parent.getWidth() - parent.getPaddingRight();

    int childCount = parent.getChildCount();
    Path path = new Path();
    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);

        RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

        int top = child.getBottom() + params.bottomMargin + mDividerSize/2;

        path.moveTo(left, top);
        path.lineTo(right, top);
    }
    c.drawPath(path, mPaint);
}

}

Android - How to add a dashed/dotted separator line for RecyclerView?

3 Answers3

Linked