Android CardView remove padding

Question

how do I get rid of this strange padding in the layout below:

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/ColorPrimaryDark">

    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="10dp"
        android:layout_marginTop="9dp"
        android:layout_marginLeft="9dp"
        android:layout_marginRight="9dp"
        card_view:cardElevation="0.01dp"
        android:layout_marginBottom="0dp"
        card_view:cardPreventCornerOverlap="true"
        card_view:cardUseCompatPadding="true"
        card_view:cardBackgroundColor="@color/ColorPrimary">

        <RelativeLayout
            android:id="@+id/top_layout"
            android:layout_width="fill_parent"
            android:layout_height="180dp"
            android:background="@color/ColorPrimary">

            <ImageView
                android:id="@+id/img_thumbnail"
                android:layout_width="fill_parent"
                android:layout_height="180dp"
                android:scaleType="fitXY"
                android:background="@drawable/korabltest"/>

            <RelativeLayout
                android:id="@+id/inner_layout"
                android:layout_width="fill_parent"
                android:layout_height="36dp"
                android:background="#5c1b1b1b"
                android:layout_gravity="bottom"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true">

                <TextView
                    android:id="@+id/tv_nature"
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:paddingLeft="5dp"
                    android:paddingRight="5dp"
                    android:layout_gravity="bottom"
                    android:gravity="center_vertical"
                    android:alpha="0.8"
                    android:textColor="#fff"
                    android:textSize="18sp"
                    android:text="Lexington"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true" />

                <TextView
                    android:id="@+id/tv_nature_1"
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:paddingLeft="5dp"
                    android:paddingRight="5dp"
                    android:layout_gravity="bottom"
                    android:gravity="center_vertical"
                    android:alpha="0.8"
                    android:textColor="#fff"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:text="527 (31%)"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true" />
            </RelativeLayout>
        </RelativeLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

are you talking about the padding between the cards? – rahul.ramanujam Jul 08 '15 at 17:39 — rahul.ramanujam, Jul 08 '15 at 17:39

fahmy · Accepted Answer · 2015-07-08T18:41:20.360

80

UDPATE

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)

You can read all about it here.

ORIGINAL ANSWER

It is an intentional padding to avoid content from bleeding off the rounded corner of the card in pre lollipop versions (since clipping is not available). If you want to get rid of it all together you may use a negative padding in pre-lollipop versions for the contentPadding attribute of the CardView such as:

card_view:contentPadding="-8dp"

or using java:

int padding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics());
cardView.setContentPadding(-padding,-padding,-padding,-padding);

I'm not particularly sure which value will work seamlessly, you'll need to experiment and see for yourself.

edited Jul 08 '15 at 18:41

answered Jul 08 '15 at 18:36

fahmy

3,543
31
47

3

thanks for the answer, but after changing card_view:cardPreventCornerOverlap to false, rounded corners dissapeared at all and not it's just a square. – Ivan Fazaniuk Jul 08 '15 at 20:12
@IvanFazaniuk Yeah, I didn't try the `cardPreventCornerOverlap` attribute. Try it with explicitly setting the `cardCornerRadius` as well. Might work. If it doesn't, the negative `contentPadding` will do the trick: corners are intact. I did try it myself. – fahmy Jul 08 '15 at 22:48
Is there a way to do this in XML? – tccpg288 Jun 29 '16 at 02:13
Ignore that last comment – tccpg288 Jun 29 '16 at 02:15
@fahmy the contentPadding only sets your content over the card margins. If you set the cardPreventCornerOverlap to false you basically get a card on which the elevation shadow is covered by it's negative padded content. – TibiG Oct 12 '16 at 15:11
This worked for me: https://android.jlelse.eu/using-full-width-cards-to-maximize-content-f739cb863ce8 – Sagar Patel Nov 15 '17 at 11:04

score 8 · Answer 2 · answered Aug 28 '17 at 05:58

8

Please remove this from your code -

card_view:cardUseCompatPadding="true"

answered Aug 28 '17 at 05:58

Shoeb Siddique

2,805
1
22
42

score 6 · Answer 3 · edited May 23 '17 at 12:02

6

Got the same problem and this worked for me.

app:cardPreventCornerOverlap="false"

For device with API < 21, I had to make a custom ImageView class, override the onDraw to draw the round corners.

@Override
protected void onDraw(Canvas canvas) {
    float radius = getContext().getResources().getDimension(R.dimen.card_corner_radius);
    Path path = new Path();
    RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
    path.addRoundRect(rect, radius, radius, Path.Direction.CW);
    canvas.clipPath(path);
    super.onDraw(canvas);
}

edited May 23 '17 at 12:02

Community

1
1

answered Jan 27 '17 at 21:46

s-hunter

24,172
16
88
130

What about reusing your Path instance? – TheRealChx101 Jan 16 '19 at 14:25

score 2 · Answer 4 · answered Feb 26 '18 at 11:53

2

use this:

cardView.setPadding(0,0,0,0);
cardView.setUseCompatPadding(true);
cardView.setContentPadding(-6,-6,-6,-6);
cardView.setPreventCornerOverlap(false);

answered Feb 26 '18 at 11:53

Ali Bagheri

3,068
27
28

score 0 · Answer 5 · answered Dec 14 '20 at 18:11

0

I previously specifically defined the height of the cardview - after changing it to "wrap_content", the issue was resolved.

answered Dec 14 '20 at 18:11

George

389
5
17

Android CardView remove padding

5 Answers5

Linked