CardView has extra margin in each edge on Pre-Lollipop

Question

Here are two pictures.

on Lollipop:

on Pre-Lollipop:

we can see that it's just close to the screen side on Lollipop. that's what I want. but on the Pre-Lollipop device, it has extra margin to the screen edge. do you guys have any experience ? thank you.

here is the layout xml:

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

Answer 1

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 2

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 3

If the Android 4 (pre-lollipop) behavior is desired, adding app:cardUseCompatPadding="true" to the CardView should fix it.

If the Android 5+ behavior is desired (which is actually the right behavior of card views according to material guidelines), the exact same thing can not be easily achieved. I usually use this fix to avoid defining multiple layout files and have reasonable output on all devices:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentPaddingRight="@dimen/fix_cardview"
    app:contentPaddingLeft="@dimen/fix_cardview"
    app:contentPaddingTop="@dimen/fix_cardview_vertical"
    app:contentPaddingBottom="@dimen/fix_cardview_vertical" />

and in normal values/dimens.xml file we should have:

<dimen name="fix_cardview">-8dp</dimen>
<dimen name="fix_cardview_vertical">-12dp</dimen>

and in values-v21/dimens.xml:

<dimen name="fix_cardview">0dp</dimen>
<dimen name="fix_cardview_vertical">0dp</dimen>

note that the numbers -8dp and -12dp might have to be adjusted for your layout, since they depend on elevation, etc.

This is only a work-around to avoid ugly paddings in Android 4 views, without using different views in different layout files (which usually makes the code more difficult to maintain)

Answer 4

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

Answer 7

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