CardView has extra margin in each edge on Pre-Lollipop

Question

Here are two pictures.

on Lollipop:

on Pre-Lollipop:

Answer 1

I realise this has already been answered, but I'd like to add that in addition to card_view:cardPreventCornerOverlap="false", I also had to set CardView.setMaxCardElevation(0) to get rid of the margins on pre-Lollipop. Setting the elevation only to 0 did not work. I'm using support library v23.4.0.

Answer 2

Try with card_view:cardUseCompatPadding="true"

if we set this property to true then margin works same on all versions.

developer note

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

source docs

Answer 3

just add this in your code for pre lollipop versions:

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
    {
        cardView.setMaxCardElevation(0f);
        cardView.setPreventCornerOverlap(false);
    }

Answer 4

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.

From the CardView reference here

Try setting a negative left margin on the CardView like this

<android.support.v7.widget.CardView
        android:id="@+id/card_title_schedule"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        app:cardCornerRadius="0dp"
        app:cardBackgroundColor="@color/colorAccent" 
        app:cardUseCompatPadding="true"
        android:layout_marginLeft="-2dp" />

You may need to adjust the margin to get the desired result.

PS, this is kind of a hack-y way to do it.

Answer 5

To solve the "shadow space" issue for PRE-L versions, you can dynamically update the CardView margin by negative values to compensate the space.

To get the actual shadow space:

shadowSpaceLeft = getPaddingLeft() - getContentPaddingLeft();

To fix the margin:

layoutParams.leftMargin -= shadowSpaceLeft;

This will work for all Android versions since we are getting the padding values and the contentPadding values dynamically.

For example, here is a class that does it whenever we set new layout params:

public class NoPaddingCardView extends CardView {

    public NoPaddingCardView(Context context) {
        super(context);
        init();
    }

    public NoPaddingCardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public NoPaddingCardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // Optional: Prevent pre-L from adding inner card padding 
        setPreventCornerOverlap(false);
        // Optional: make Lollipop and above add shadow padding to match pre-L padding
        setUseCompatPadding(true);
    }

    @Override
    public void setLayoutParams(ViewGroup.LayoutParams params) {
        // FIX shadow padding
        if (params instanceof MarginLayoutParams) {
            MarginLayoutParams layoutParams = (MarginLayoutParams) params;
            layoutParams.bottomMargin -= (getPaddingBottom() - getContentPaddingBottom());
            layoutParams.leftMargin -= (getPaddingLeft() - getContentPaddingLeft());
            layoutParams.rightMargin -= (getPaddingRight() - getContentPaddingRight());
            layoutParams.topMargin -= (getPaddingTop() - getContentPaddingTop());
        }

        super.setLayoutParams(params);
    }
}

Answer 6

So here it goes perfectly fine on Kitkat, samsung device to be precise.

I tried card_view:cardUseCompatPadding="true" but no avail. Didn't work!

Then I discovered from a stackoverflow post this card_view:cardPreventCornerOverlap="false" and VOILA! Worked! There were no round corners (Since, I wanted none as the Card has an Image background).

The moral is, an extra padding is because of those tiny round corners which, need to be disabled. Basically that is not a flaw rather a Design constraint!

ORIGINAL SOF REPLY

Image: Notice that top corners are edges (A view which has colour and an image in background) while bottom has just TextViews and no backgrounds hence, the round corners. That means if a view is requesting match_parent inside the CardView, card_view:cardPreventCornerOverlap="false" will allow that to be taken up, on the affected corners.