Android: Using Shape to create a Frame for RecyclerView cell, causes Overdraw

1k views Asked by At

I'm trying to add border/frame for each cell of my RecyclerView. I'm able to successfully achieve that by creating a "Drawable Resource File", and setting that as a background for the cell, as you can see in the following: .

.

enter image description here

However, I realized that doing so, creates extra overdraw in the page and causes lag in the performance. So I tried to set all the Layout background colors to @null to avoid the extra overdraw but I wasn't successful. You can compare the two overdraws in the following(The first pic has Frame and the second one has no frame set for it): .

.

.

.

.

Overdraw with the Frame:

enter image description here
.

.

.

.

.

Overdraw without the Frame: enter image description here .

.

The following is the xml code for Drawable Resource File. I set this layout as a background for the RecyclerView Cell.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke
                android:width="0.25dp"
                android:color="#000000" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp"/>
            <solid
                android:color="@null" />
        </shape>
    </item>
</selector>

.

.

Please help me fix this overdraw problem. Also, if you know of any other approach to create frames/border for the cell, without creating extra overdraw, I appreciate if you share that with me.

1

There are 1 answers

2
Rick On

I suggest to use a CardView instead of RecyclerView so that you can set app:cardPreventCornerOverlap="false" like this:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

</android.support.v7.widget.CardView>