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.

Unawares

can you share the screen grab to easily understand – Bertina

You still have this "white border" if you remove android:layout_marginRight="6dp"? – Firedrake

@Firedrake - yes it is still there – Unawares

ok, so it will be helpful if you post a screen shot of your view. – Firedrake

i am also struggling with this issue, how to solve it? – Bonnes

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: #35801271 – Argufy

Answer 1

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>

Geyer

It was app:cardUseCompatPadding="true" since i'm extending from xmlns:app="schemas.android.com/apk/res-auto" . Be careful guys! Time consumer! xd – Perbunan

Thanks! It works. But there is a problem. After adding this tag, it dismiss the corner radius. How can I solve this? – Cacia

@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. – Geyer

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); – Cabal

@Perbunan I don't get what you're saying. Did you use cardUseCompatPadding="true" instead of cardPreventCornerOverlap="false"? – Gris

cardPreventCornerOverlap="false" and contentPadding="0dp" – Spare

To me it was app:cardPreventCornerOverlap="false" instead of card_view:cardPreventCornerOverlap="false". I have changed this and it worked. – Andyane

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

Answer 2

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:

Sprit

Answer 3

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 :) :

Dinesen

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

Vitrine

This doesn't address the issue at all. – Elation