Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CardView has extra margin in each edge on Pre-Lollipop

Here are two pictures.

on Lollipop: on Lollipop:

on Pre-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"
        >
like image 448
Jaden Gu Avatar asked Sep 10 '25 05:09

Jaden Gu


2 Answers

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.

enter image description here

like image 115
sud007 Avatar answered Sep 12 '25 20:09

sud007


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.

like image 32
shemarcl Avatar answered Sep 12 '25 18:09

shemarcl