Cardview - white border around card

Question

I am using a cardview as the root of a custom view I am writing. I using the v7 support library. My XML looks like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginRight="6dp"
        card_view:cardElevation="0dp">

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

        <!-- some other views -->
    </LinearLayout>
</android.support.v7.widget.CardView>

My problem is that I am getting a white border around my card view. It looks like it is there to indicate elevation as it is thicker on the right side. I've tried adjusting cardElevation and MaxCardElevation in my XML like so : card_view:cardElevation="0dp"

and in code in my custom view that extends CardView and uses this layout:

setCardElevation(0);
setMaxCardElevation(0);

But the white border persists. I'm not sure how to get rid of it. If anyone had any input into why this is happening or suggestions on how I can remove the white border it would be appreciated. Thanks much.

You still have this "white border" if you remove `android:layout_marginRight="6dp"`? — Rami, Apr 01 '15 at 14:06
ok, so it will be helpful if you post a screen shot of your view. — Rami, Apr 01 '15 at 14:22
My problem was inflating my CardView from xml inside a CardView subclass that I created. I changed it to extend RelativeLayout instead of CardView and it worked. More details: http://stackoverflow.com/questions/35800771/white-border-around-dark-themed-cardviews?rq=1 — Justin, Feb 09 '17 at 18:54

score 87 · Accepted Answer · edited Dec 26 '22 at 23:54

87

I know it's a bit late, but for anyone having a similar problem:

I had the same issue: A white border was shown on pre-lollipop devices.

I solved it setting the cardPreventCornerOverlap to false on your XML.

Like this:

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_marginRight="6dp"
    card_view:cardPreventCornerOverlap="false">

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

        <!-- some other views -->
    </LinearLayout>
</android.support.v7.widget.CardView>

edited Dec 26 '22 at 23:54

starball

20,030
7
43
238

answered May 14 '15 at 16:37

pol_databender

886
7
4

3

It was app:cardUseCompatPadding="true" since i'm extending from xmlns:app="http://schemas.android.com/apk/res-auto" . Be careful guys! Time consumer! xd – ArturoNaredo Sep 02 '15 at 18:53
2

Thanks! It works. But there is a problem. After adding this tag, it dismiss the corner radius. How can I solve this? – Can Uludağ Sep 14 '15 at 16:19
@CanUludağ , I don't think that it would be possible using the support library. Prior to Lollipop, rounded corners were too expensive, so the CardView prevents clipping the bounds by adding padding. Removing it with `cardPreventCornerOverlap` would also remove the rounded corners. I believe that to solve it, you would have to use a custom background image. – pol_databender Sep 15 '15 at 18:47
It didn't worked for me by adding cardPreventCornerOverlap to false on the XML. I have to set it in java code and it worked. mCardView.setPreventCornerOverlap(false); – Taimur Hassan Dec 30 '15 at 08:04
@ArturoNaredo I don't get what you're saying. Did you use cardUseCompatPadding="true" instead of cardPreventCornerOverlap="false"? – Stealth Rabbi Mar 04 '16 at 15:46
2

cardPreventCornerOverlap="false" and contentPadding="0dp" – ademar111190 Jul 17 '16 at 18:08
4

To me it was `app:cardPreventCornerOverlap="false"` instead of `card_view:cardPreventCornerOverlap="false"`. I have changed this and it worked. – Danilo Prado Sep 22 '16 at 18:11
note `xmlns:card_view="http://schemas.android.com/apk/res-auto"` . I had it set to `xmlns:card_view="http://schemas.android.com/tools"` in my parent layout and that caused some issues. – Arjun Sunil Kumar Mar 05 '17 at 13:49

score 3 · Answer 2 · answered Oct 01 '15 at 13:12

Support CardView doesn't support content clipping, because it's expensive on older devices. It's possible to clip content using Canvas.saveLayer/restoreLayer and PorterDuff modes. This is how Carbon implements rounded corners with correct content clipping. See the image:

score 3 · Answer 3 · answered Dec 28 '17 at 15:44

I might be late in the game, but I had the same issue. Just wanted to share a simple solution!

My custom view extended a CardView and I had a margin applied to the root element (i.e. CardView) in the XML just like in the original question. This ended up giving me the extra white border like this:

Solution was to move the margin from root of the Custom View XML to the declaration of your custom view (check comments in the snippet)

Code snippet:

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cvSettings"
    style="@style/DefaultCardViewStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/default_margin" <!-- Remove this -->
    app:cardElevation="@dimen/default_card_elevation">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        .
        .
        .
</android.support.v7.widget.CardView>

Ended up just moving over the margin to my custom view declaration which got rid of the extra white border:

<com.example.android.custom.MyCustomView
        android:id="@+id/custom_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin" <!-- Move it here-->
        cv:pt_widgetColor="@color/colorAccent" />

After the change, much cleaner :) :

score -4 · Answer 4 · answered Nov 17 '15 at 15:01

-4

use cardBackgroundColor="color" in xml card_view sample code :

<android.support.v7.widget.CardView
        android:id="@+id/card_view_khaterat"
        android:layout_width="250dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        app:cardBackgroundColor="#f56f6c"/>

answered Nov 17 '15 at 15:01

nargroup

1

1

This doesn't address the issue at all. – Luke Allison May 25 '16 at 05:35

Cardview - white border around card

4 Answers4

Linked