Why there is no space between CardViews on Lollipo

Question

I try to use the CardView and it works well below 5.0, but looks strange on Lollipop.

<?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="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">

<android.support.v7.widget.CardView android:layout_width="match_parent"
    android:layout_height="200dp">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="card1"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView android:layout_width="match_parent"
    android:layout_height="200dp">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="card2"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</android.support.v7.widget.CardView>
</LinearLayout>

I meet the same question when i use the RecyclerView, should I have to add something if it runs on Lollipop?

Answer 1

first image is the expected behavior of card view. when the card has elevation the shadow falls on the bottom layers. In the pre-lollipop devices the elevation is made by adding padding. so the pre-lollipop devices will have a padding around the card view.

Before L, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

Answer 2

You have to add app:cardUseCompatPadding="true" to your Cardview. But just adding that may give you an error. To avoid that error, you also have to add xmlns:app="http://schemas.android.com/apk/res-auto" to your CardView.

For example,

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:cardUseCompatPadding="true">

    // Other views here

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

Some would add card_view:cardUseCompatPadding="true" and xmlns:card_view="http://schemas.android.com/apk/res-auto" instead of those mentioned above. Both ways are correct.

If you want to know more about app in XML(Android), please go through this answer :

Although previous answers will solve the problem, they didn't explain what each attribute does. So to be more helpful to answer seekers,

cardPreventCornerOverlap attribute adds padding to CardView on v20 and before to prevent intersections between the Card content and rounded corners.

cardUseCompatPadding attribute adds padding in API v21+ as well to have the same measurements with previous versions.

Answer 3

Set this on a CardView:

app:cardUseCompatPadding="true"

From documentation:

Add padding in API v21+ as well to have the same measurements with previous versions.

Answer 4

Use this two tags below inside of your cardview:

app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"