Set custom divider line between RecyclerView items

i'm trying to set a custom divider dashed line between Recyclerview items like that :

enter image description here

XML :

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

    <stroke
        android:width="1dp"
        android:color="#000"
        android:dashWidth="20px"
        android:dashGap="50px" />
</shape>

Java :

DividerItemDecoration itemDecorator = new DividerItemDecoration(getContext(), DividerItemDecoration.VERTICAL);
itemDecorator.setDrawable(ContextCompat.getDrawable(getContext(), R.drawable.dashedline));

code above doesn't work instead of dashed line i get this :

enter image description here

Upvotes: 1

Views: 650

Answers (1)

AGDownie
AGDownie

Reputation: 638

DividerItemDecoration assumes the drawable you provide is a solid rectangle and annoyingly ignores your line XML definition. A workaround I have found is to create a tiled BitmapDrawable manually, e.g.:

    // get pixel count for 1 dip
    float dip1 = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1f, getContext().getResources().getDisplayMetrics());

    // create a bitmap to draw our dash
    Bitmap bitmap = Bitmap.createBitmap((int)(15f * dip1) , (int)dip1, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();

    // fill the bitmap with the background colour of the list items
    canvas.drawColor(listItemBackgroundColour);

    // create a dash effect dash with = 10 dip, dash gap = 5 dip
    paint.setPathEffect(new DashPathEffect(new float [] { 10f * dip1, 5f * dip1 }, 0));

    // draw a single pixel wide line across the bitmap
    paint.setStrokeWidth(dip1);
    paint.setColor(lineColour);
    paint.setStyle(Paint.Style.STROKE);
    canvas.drawLine(0f, dip1 / 2f, 15f * dip1, dip1 / 2f, paint);

    // now create a tiled drawable using the bitmap
    BitmapDrawable drawable = new BitmapDrawable(context.getResources(), bitmap);
    drawable.setTileModeX(Shader.TileMode.REPEAT);

    // pass the drawable to the item decorator
    DividerItemDecoration itemDecorator = new DividerItemDecoration(getContext(), layoutManager.getOrientation());
    itemDecorator.setDrawable(drawable);
    addItemDecoration(itemDecorator);

Not as neat as an XML shape resource definition, but it does the trick.

Note that you need to know the colour of the recycler items' background to blend in the dashed line, otherwise you will get the theme background colour showing through the gaps in the dashes.

Hope this helps.

Upvotes: 1

Related Questions