Add line separator on first item of recyclerview

Question

How could I add a line just above of first item (10) a line?

I'm using RecyclerView and LinearLayoutManager to implement my design.

activity_main.xml:

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

    <SeekBar
    android:id="@+id/timesTablesSeekBar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginRight="5dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 <androidx.recyclerview.widget.RecyclerView
     android:id="@+id/recyclerView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_marginTop="32dp"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

list_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:showDividers="beginning">

<TextView
    android:id="@+id/timeTables"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text=""
    android:textSize="70px"
    android:textStyle="bold|italic" />
</LinearLayout>

may be identify the first item in the recyclerview and have it implement a layout that has an upper border — George Udosen, Nov 27 '19 at 19:33

score -1 · Answer 1 · answered Nov 27 '19 at 21:30

First of all, using LinearLayout's android:showDividers to divide items is not a best practice. First, I would remove outer LinearLayout from your list_layout.xml like this:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/timeTables"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text=""
    android:textSize="70px"
    android:textStyle="bold|italic" />

To show dividers, the best way is to use RecyclerView.ItemDecoration. Please see DividerItemDecoration to draw divider: https://developer.android.com/reference/androidx/recyclerview/widget/DividerItemDecoration

dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
    layoutManager.getOrientation());
recyclerView.addItemDecoration(dividerItemDecoration);

Then the only thing missing would be drawing top line. You can implement a custom ItemDecoration like this:

public class TopLineDecoration extends RecyclerView.ItemDecoration {
    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};

    private final Drawable divider;

    public TopLineDecoration(Context context) {
        TypedArray a = context.obtainStyledAttributes(ATTRS);
        divider = a.getDrawable(0);
        a.recycle();
    }

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            if (parent.getChildAdapterPosition(child) == 0) {
                RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

                int top = child.getTop() - params.topMargin;
                int bottom = top + divider.getIntrinsicHeight();
                int left = parent.getPaddingLeft();
                int right = parent.getWidth() - parent.getPaddingRight();

                divider.setBounds(left, top, right, bottom);
                divider.draw(c);
            }
        }
    }
}

And your final implementation would be like:

dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
    layoutManager.getOrientation());
topLineDecoration = new TopLineDecoration(recyclerView.getContext())
recyclerView.addItemDecoration(dividerItemDecoration);
recyclerView.addItemDecoration(topLineDecoration)

Add line separator on first item of recyclerview

1 Answers1