Why there is no space between CardViews on Lollipop?

Question

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

enter image description here

<?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?

add `LinearLayout` between the cards – Andres Cárdenas Nov 20 '14 at 09:17 — Andres Cárdenas, Nov 20 '14 at 09:17

tomrozb · Accepted Answer · 2015-08-26T18:46:11.210

205

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.

edited Aug 26 '15 at 18:46

answered Dec 09 '14 at 01:30

tomrozb

25,773
31
101
122

1

I used the "app" namespace instead. Is "card_view" still used? – wsgeorge Aug 26 '15 at 14:58
1

@wsgeorge that was from Android documentation, but I've edited it to more friendly app namespace. – tomrozb Aug 26 '15 at 18:46
looks better but how remove divider line? – no news Aug 25 '16 at 13:34
@nonews You can try `android:divider="@null"`. – SREE Nov 14 '16 at 08:02

score 29 · Answer 2 · edited Feb 02 '16 at 02:31

29

Use this two tags below inside of your cardview:

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

edited Feb 02 '16 at 02:31

Alex Lockwood

83,063
39
206
250

answered May 21 '15 at 21:11

Omar Faroque Anik

2,531
1
29
42

null pointer · Answer 3 · 2014-11-20T11:05:58.493

13

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.

edited Nov 20 '14 at 11:05

answered Nov 20 '14 at 09:19

null pointer

5,874
4
36
66

so the size of cardview we see in editor is not the real size we can use when below lollipop ,there is a part of it which is used to add the padding, and on lollipop the size in layout is the same as the real, it seems that give a padding of it looks better，but how should i do to separate them? – cajsaiko Nov 20 '14 at 10:15
what you seen in the editor is what you get in real. To have the same margin between the cards in all screens.set margin if the API lever is 21 or higher – null pointer Nov 20 '14 at 11:07
5

This answer is correct. In addition to that, if you want to make the UI consistent w/o adding separate margins for values-21, you can set compat padding to true so that it will add the same padding in L as well. https://developer.android.com/reference/android/support/v7/widget/CardView.html#attr_android.support.v7.cardview:cardUseCompatPadding – yigit Nov 21 '14 at 06:40
@billgates after adding a margin the cardview looks good on both lollpop and pre-lollpop,thanks for your answer! – cajsaiko Nov 21 '14 at 14:11
1

is it possible to remove the padding on pre-lollipop devices? – user2456977 Apr 27 '15 at 03:31

score 5 · Answer 4 · edited May 23 '17 at 12:34

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.

Why there is no space between CardViews on Lollipop?

4 Answers4

Linked