CardView inside RecyclerView has extra margins

Question

I am using a CardView as element inside a RecyclerView. When doing so android automatically generates margins between the cardView and the screen and between different cardViews.

<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_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/galleryCardBGColor"
app:cardCornerRadius="2dp" >

<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical" />

I followed the instructions in the link to integrate them into my project: using-recyclerview-and-cardview-in-eclipse-adt

I had been previously using a linearlayout for the list element :

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

This was working perfectly fine, with no margins whatsoever between the list elements. I have now just placed the linear layout inside the cardView which has resulted in extra margins.

The reason being that i want to provide exact margins to these elements, and any margins I supply now is being added over to this preexisting margins. I have tried supplying zero/negative paddings/margins to the cardView element but none of these work.

Any idea, I can remove these margins or otherwise know exactly how much margin is being added.

Answer 1

did you check if it is margin or padding? (Dev Options / show layout bounds)

CardView adds padding in platforms pre-L to draw shadows. In L, unless you set useCompatPadding=true, there should not be any gap.

Adding negative margins (although it is ugly) should work. If it is not, please add some more code on how you are adding them and how you are setting up the RecyclerView.

Answer 2

It worked for me. Use:

 card_view:cardElevation="0dp"
 card_view:cardMaxElevation="0dp"

Answer 3

Just described in @yigit 's answer, the CardView will add a default padding to draw it's shadow before Android L. The padding size is described in CardView's doc.

I found the way to clear this padding (also to add padding for content) is to use CardView's contentPaddingLeft(/Right/Top/Bottom) attributes.

If you want to clear the default padding, you can set the contentPadding to minus value. If you want to add content padding, set the contentPadding to the value you want.

In my case, I use these code to clear the default padding:

card_view:contentPaddingLeft="-3dp"
card_view:contentPaddingRight="-3dp"
card_view:contentPaddingTop="-3dp"
card_view:contentPaddingBottom="-3dp"

I tried @Shubham 's answer, but an IllegalStateException is thrown in RadialGradient.java with message the "radius must be > 0".

Answer 4

Use this two tags below:

card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true"

Answer 5

add card_view:cardPreventCornerOverlap="false" to your card It works only if your Image has Rounded Corners

Answer 6

Well, seems there is a much easier way to do it, without guessing the padding and all:

card_view:cardPreventCornerOverlap="false"

or using java:

cardView.setPreventCornerOverlap(false)

Answer 7

The comment from @vj9 under the accepted question helped me to calculate the offsets. Sharing it here because it might help someone else:

public static int getVerticalCardViewOffset(Context context) {
    Resources res = context.getResources();
    int elevation = res.getDimensionPixelSize(R.dimen.cardview_default_elevation);
    int radius = res.getDimensionPixelSize(R.dimen.cardview_default_radius);
    return (int) (elevation * 1.5 + (1 - Math.cos(45)) * radius);
}

public static int getHorizontalCardViewOffset(Context context) {
    Resources res = context.getResources();
    int elevation = res.getDimensionPixelSize(R.dimen.cardview_default_elevation);
    int radius = res.getDimensionPixelSize(R.dimen.cardview_default_radius);
    return (int) (elevation + (1 - Math.cos(45)) * radius);
} 

Answer 8

use

android:adjustViewBounds="true"

on the view you want wrapped in the cardview

Answer 9

I know its late but i hope it will help someone

app:cardPreventCornerOverlap="false"

setting app:cardPreventCornerOverlap to false will do the trick :)

Answer 10

If you don't need the corner radius or elevation downlevel, consider using FrameLayout on pre-Lollipop.

<include layout="@layout/card_view_compat" />

layout/card_view_compat

<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <include layout="@layout/content" />
    </FrameLayout>
</merge>

layout-v21/card_view_compat

<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="3dp"
        app:cardElevation="4dp"
        >
        <include layout="@layout/content" />
    </android.support.v7.widget.CardView>
</merge>

Answer 11

myCardView.setShadowPadding(0,0,0,0);