简体   繁体   中英

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 recycler view:

Screenshot of recyclerview

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.mxl 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);

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

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.

Here's a better 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);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM