CODEWITHSUNDEEP
javaandroidandroid-recyclerviewitem-decoration
Mr.patel
Mr.patel

Reputation: 103

Add thickness to recycler view item decoration lines

In my activity I'm using a recycler view with grid layout there I'm simply setting recycler view item decoration which successfully adds lines to recycler view but those lines are too thin in thickness and not visible so my question is how can I increase the thickness and change color of those lines.

Here's the code I'm using:

recyclerView.addItemDecoration(new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.VERTICAL));
recyclerView.addItemDecoration(new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.HORIZONTAL));

Screenshot of my RecyclerView:

Screenshot of recyclerview

Upvotes: 1

Views: 3918

Answers (4)

Parth Lotia
Parth Lotia

Reputation: 803

I think I found the solution to your question...You need to implement one drawable file for increase the thickness to decoration lines...and add that to decoration...for changing color, in drawable you declare your color you want to show in the decoration lines..

Here is the solution:

Add divider.xml in your drawable folder...

divider.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="line">
<size
    android:width="1dp"
    android:height="15dp"/>

    <solid android:color="@android:color/white"/>
</shape>

And this lines to your activity..

 Drawable mDivider = ContextCompat.getDrawable(this, R.drawable.divider);
 dividerItemDecoration.setDrawable(mDivider);

Upvotes: 5

6rchid
6rchid

Reputation: 1301

Here's a cleaner solution:

First we can use the DividerItemDecoration to set the lines. In addition to setting thickness you can set the color of the dividers:

  • GradientDrawable.setSize(width, height) sets the dimension in pixels; specifying the height adjusts the divider thickness.
  • The GradientDrawable constructor takes a gradient orientation, and an array of color integers; two colors must be specified and you may keep them the same value.
DividerItemDecoration itemDecoration = new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.VERTICAL);
GradientDrawable drawable = new GradientDrawable(GradientDrawable.Orientation.BOTTOM_TOP, new int[]{0xfff7f7f7, 0xfff7f7f7});
drawable.setSize(1,3);
itemDecoration.setDrawable(drawable);
recyclerView.addItemDecoration(itemDecoration);

Upvotes: 1

Raihanul
Raihanul

Reputation: 91

Try this java code

ShapeDrawable vLine = new ShapeDrawable(new Shape() {
    @Override
    public void draw(Canvas canvas, Paint paint) {
        paint.setStrokeWidth(10);
        paint.setColor(Color.BLACK);
        canvas.drawLine(0, 0, 0, 500, paint);
    }
});
ShapeDrawable hLine = new ShapeDrawable(new Shape() {
    @Override
    public void draw(Canvas canvas, Paint paint) {
        paint.setStrokeWidth(10);
        paint.setColor(Color.BLACK);
        canvas.drawLine(0, 0, 500, 0, paint);
    }
});
DividerItemDecoration vDID = new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.VERTICAL);
DividerItemDecoration hDID = new DividerItemDecoration(recyclerView.getContext(), DividerItemDecoration.HORIZONTAL);
vDID.setDrawable(vLine);
hDID.setDrawable(hLine);
recyclerView.addItemDecoration(vDID);
recyclerView.addItemDecoration(hDID);

Note: You can do it by XML, but the above solution is solution in one place even though the code looks big.

Upvotes: 0

Ankit Tale
Ankit Tale

Reputation: 2004

You can use this to set grid equally 

public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {
  private int spanCount;
    private int spacing;
    private boolean includeEdge;

    public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) {
        this.spanCount = spanCount;
        this.spacing = spacing;
        this.includeEdge = includeEdge;
    }

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

        if (includeEdge) {
            outRect.left = spacing - column * spacing / spanCount; // spacing - column * ((1f / spanCount) * spacing)
            outRect.right = (column + 1) * spacing / spanCount; // (column + 1) * ((1f / spanCount) * spacing)

            if (position < spanCount) { // top edge
                outRect.top = spacing;
            }
            outRect.bottom = spacing; // item bottom
        } else {
            outRect.left = column * spacing / spanCount; // column * ((1f / spanCount) * spacing)
            outRect.right = spacing - (column + 1) * spacing / spanCount; // spacing - (column + 1) * ((1f /    spanCount) * spacing)
            if (position >= spanCount) {
                outRect.top = spacing; // item top
            }
        }
    }
}

/**
 * Converting dp to pixel
 */
private int dpToPx(int dp) {
    Resources r = getResources();
    return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics()));
}

And then,

recyclerView.addItemDecoration(new GridSpacingItemDecoration(2, dpToPx(10), true));

Upvotes: 0

Related Questions