Android: Adding a border and rounding to recyclerView items

Fred White :

I have a recyclerView currently set up to add a drop shadow to the bottom of each item with spacing which works well. I want to add a thin gray border around each item as well as a soft rounding if possible. Code so far:

    public class VerticalSpaceItemDecorator extends RecyclerView.ItemDecoration {

    private final int verticalSpaceHeight;

    public VerticalSpaceItemDecorator(int verticalSpaceHeight) {

        this.verticalSpaceHeight = verticalSpaceHeight;
    }

    @Override
    public void getItemOffsets(Rect outRect,
                               View view,
                               RecyclerView parent,
                               RecyclerView.State state) {

        // 1. Determine whether to add a spacing decorator
        if (parent.getChildAdapterPosition(view) != parent.getAdapter().getItemCount() - 1) {

            // 2. Set the bottom offset to the specified height
            outRect.bottom = verticalSpaceHeight;
        }
    }
}

public class ShadowVerticalSpaceItemDecorator extends RecyclerView.ItemDecoration {

    private Drawable divider;

    public ShadowVerticalSpaceItemDecorator(Context context) {

        // Use the default style divider
        final TypedArray styledAttributes = context.obtainStyledAttributes(
                new int[] { android.R.attr.listDivider });
        this.divider = styledAttributes.getDrawable(0);
        styledAttributes.recycle();
    }

    public ShadowVerticalSpaceItemDecorator(Context context, int resId) {

        // Use a custom divider specified by a drawable
        this.divider = ContextCompat.getDrawable(context, resId);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

        // 1. Get the parent (RecyclerView) padding
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        // 2. Iterate items of the RecyclerView
        for (int childIdx = 0; childIdx < parent.getChildCount(); childIdx++) {

            // 3. Get the item
            View item = parent.getChildAt(childIdx);

            // 4. Determine the item's top and bottom with the divider
            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) item.getLayoutParams();
            int top = item.getBottom() + params.bottomMargin;
            int bottom = top + divider.getIntrinsicHeight();

            // 5. Set the divider's bounds
            this.divider.setBounds(left, top, right, bottom);

            // 6. Draw the divider
            this.divider.draw(c);
        }
    }
}

Custom layout of recyclerView items:

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

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"

    app:srcCompat="@mipmap/ic_launcher" />

<TextView
    android:id="@+id/textView_title"
    style="@style/AudioFileInfoOverlayText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/imageView"
    android:layout_alignLeft="@+id/imageView"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignStart="@+id/imageView"
    android:layout_gravity="left"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:text="TextView"
    android:textColor="@android:color/white"
    android:textSize="22sp" />

<TextView
    android:id="@+id/textView_info"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignStart="@+id/textView_title"
    android:layout_below="@+id/imageView"
    android:layout_marginTop="12dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:text="TextView" />

<Button
    android:id="@+id/button_one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/textView_info"
    android:layout_marginBottom="5pt"
    android:layout_marginRight="5pt"
    android:background="@drawable/circle_button"
    android:text="One"
    android:textColor="@android:color/white" />

<Button
    android:id="@+id/button_two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView"
    android:layout_below="@+id/textView_info"
    android:layout_marginBottom="5pt"
    android:layout_marginLeft="5pt"
    android:background="@drawable/circle_button"
    android:backgroundTint="?android:attr/colorControlHighlight"
    android:text="Two"
    android:textColor="@android:color/white" />
</RelativeLayout>

</LinearLayout>

drop_shadow code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="4dp" />
    <solid android:color="@color/darkGray" />
    <corners android:topLeftRadius="0dp" android:topRightRadius="0dp"
    android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp"/>
</shape>

Border:

<?xml version="1.0" encoding="UTF-8"?>

<stroke android:width="3dp"
    android:color="@color/gray"
    />

<padding android:left="1dp"
    android:top="1dp"
    android:right="1dp"
    android:bottom="1dp"
    />

<corners android:bottomRightRadius="7dp"
    android:bottomLeftRadius="7dp"
    android:topLeftRadius="7dp"
    android:topRightRadius="7dp"/>

ND1010_ :

Create Xml on Drawable folder named border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:color="@color/colorAccent" android:width="1dp"/>
    <corners android:radius="5dp" />
</shape>

then after change background of RelativeLayout

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


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/border"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"

            app:srcCompat="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/textView_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageView"
            android:layout_alignLeft="@+id/imageView"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignStart="@+id/imageView"
            android:layout_gravity="left"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:text="TextView"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

        <TextView
            android:id="@+id/textView_info"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/imageView"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignStart="@+id/textView_title"
            android:layout_below="@+id/imageView"
            android:layout_marginTop="12dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:text="TextView" />

        <Button
            android:id="@+id/button_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/textView_info"
            android:layout_marginBottom="5pt"
            android:layout_marginRight="5pt"
            android:text="One"
            android:textColor="@android:color/white" />

        <Button
            android:id="@+id/button_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/imageView"
            android:layout_below="@+id/textView_info"
            android:layout_marginBottom="5pt"
            android:layout_marginLeft="5pt"
            android:backgroundTint="?android:attr/colorControlHighlight"
            android:text="Two"
            android:textColor="@android:color/white" />
    </RelativeLayout>

</LinearLayout>

If you want to bold the border then <stroke android:color="@color/colorAccent" android:width="5dp"/>