Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding a DividerItemDecoration on top of the element

I'm trying to add a divider on top of my element in a RecyclerView.

Following google i've succeded to add a DividerItemDecoration, the code is as below:

DividerItemDecoration:

public class DividerItemDecoration extends RecyclerView.ItemDecoration {

private static final int[] ATTRS = new int[]{
        android.R.attr.listDivider
};

public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
private Drawable mDivider;
private int mOrientation;

public DividerItemDecoration(Context context, int orientation) {
    final TypedArray a = context.obtainStyledAttributes(ATTRS);
    mDivider = a.getDrawable(0);
    a.recycle();
    setOrientation(orientation);
}

public void setOrientation(int orientation) {
    if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
        throw new IllegalArgumentException("invalid orientation");
    }
    mOrientation = orientation;
}

@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    if (mOrientation == VERTICAL_LIST) {
        drawVertical(c, parent);
    } else {
        drawHorizontal(c, parent);
    }
}

public void drawVertical(Canvas c, RecyclerView parent) {
    final int left = parent.getPaddingLeft();
    final int right = parent.getWidth() - parent.getPaddingRight();

    final int childCount = parent.getChildCount();
    for (int i = 0; i < childCount; i++) {
        final View child = parent.getChildAt(i);
        final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                .getLayoutParams();
        final int top = child.getBottom() + params.bottomMargin;
        final int bottom = top + mDivider.getIntrinsicHeight();
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
}

public void drawHorizontal(Canvas c, RecyclerView parent) {
    final int top = parent.getPaddingTop();
    final int bottom = parent.getHeight() - parent.getPaddingBottom();

    final int childCount = parent.getChildCount();
    for (int i = 0; i < childCount; i++) {
        final View child = parent.getChildAt(i);
        final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                .getLayoutParams();
        final int left = child.getRight() + params.rightMargin;
        final int right = left + mDivider.getIntrinsicHeight();
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    if (mOrientation == VERTICAL_LIST) {
        outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
    } else {
        outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
    }
}
}

The result:

DividerItemDecoration

What i'm trying to accomplish:

DividerItemDecorationResult

I've tried to play with the offset and the index but didn't get expected result.

How can I add the same item divider on top of my elements?

Also in case of necessary i've leave my layout of the row, here is the code:

Row:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tvDescrizione"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:textStyle="italic"
        android:textColor="#000"
        android:textSize="18sp"/>

    <TextView
        android:id="@+id/tvBarcode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvDescrizione"
        android:textColor="#000"
        android:textSize="18sp"/>

    <TextView
        android:id="@+id/tvData"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvDescrizione"
        android:layout_alignParentEnd="true"
        android:textColor="#000"
        android:textSize="18sp"/>

</RelativeLayout>
like image 275
G. Ciardini Avatar asked Jun 11 '18 10:06

G. Ciardini


1 Answers

Explanation : In this answer i have added a divider above every item in your RecyclerView and after the RecyclerView itself. This way you wont have "overdraw", where 2 lines are painted on top of each other.I have used View tag for this purpose which draws a simple line from the xml.

Row file :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View android:layout_height="2dp"
        android:layout_width="match_parent"
        android:layout_marginBottom="5dp"
        android:background="@color/colorPrimary"/>

    <TextView
        android:id="@+id/tvDescrizione"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:textStyle="italic"
        android:textColor="#000"
        android:textSize="18sp"/>

    <TextView
        android:id="@+id/tvBarcode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvDescrizione"
        android:textColor="#000"
        android:textSize="18sp"/>

    <TextView
        android:id="@+id/tvData"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvDescrizione"
        android:layout_alignParentEnd="true"
        android:textColor="#000"
        android:textSize="18sp"/>

</RelativeLayout>

Main file :

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/repository_rv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:listitem="@layout/tmp3"
            android:layout_marginTop="30dp"/>

        <View
            android:id="@+id/bottomLine"
            android:layout_height="2dp"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:background="@color/colorPrimary"/>

 </LinearLayout>
like image 157
Vidhi Dave Avatar answered Oct 26 '22 22:10

Vidhi Dave