Android CardView inside RecyclerView - cardElevation cause unwanted margin & bottom shadow

Question

In Android, I am using RecyclerView. For RecyclerView's item, I am using CardView as item's layout, with below xml layout:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="0dp"
    app:cardElevation="2dp"
    app:cardCornerRadius="0dp"
    app:cardPreventCornerOverlap="false"

    android:foreground="?attr/selectableItemBackground"
    android:clickable="true" >

    <LinearLayout
        android:minHeight="48dp"
        android:layout_marginTop="0dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="0dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    .......

    </LinearLayout>
</CardView>

I am using CardView from android.support.v7.widget.CardView.

I set cardElevation="2dp", layout_marginBottom="0dp", layout_marginTop="0dp". Setting cardElevation makes shadow around left, right & bottom of CardView. Then by setting layout_marginBottom & layout_marginTop=0dp, if item is not the last item in the list, it's bottom shadow will disappear as it is covered by the next item (CardView) in the list.

Below is the intended UI behaviour. Whole Watchlist looks like single CardView, but indeed it is a RecyclerView, with each item consists of CardView, just the bottom shadow is covered up by next item below it. This works well in Android API 25 (Android 7.1.2) :

But on Android API 16 (Android 4.1.2), outcome is not as expected. The bottom shadow (border) still is visible, also look like there is extra margin added between each item.

Any idea how to solve this problem in Android 4.1.2 ?

`Elevation` attribute is only applicable in Android API over 21.
Check [this](https://stackoverflow.com/a/21445593/5402482) link for getting an idea for implementing the desired effect below API 21 : — Kavach Chandra, Jul 25 '17 at 05:33
The OP is not asking why `Elevation` is not working. (She is using `app:cardElevation` from support library. So, it make sense to see elevation effect in Android 4) She is asking why there is *no* space between rows in Android 6, but there's space between rows in Android 4. — Cheok Yan Cheng, Jul 25 '17 at 05:56

score 2 · Accepted Answer · answered Jul 25 '17 at 06:03

My raw guess is, you are using CardView from support library. There are different card view implementation under different version of of Android.

I believe before Android L, the library add padding in order to reserve space for shadow drawing.

Please check CardView inside RecyclerView has extra margins for more details.

Android CardView inside RecyclerView - cardElevation cause unwanted margin & bottom shadow

1 Answers1