CODEWITHSUNDEEP
androidandroid-cardview
TheMethod
TheMethod

Reputation: 3001

Cardview - white border around card

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.

Upvotes: 34

Views: 40571

Answers (4)

pol_databender
pol_databender

Reputation: 886

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>

Upvotes: 87

prerak
prerak

Reputation: 409

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:

Before

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

enter image description here

Upvotes: 3

nargroup
nargroup

Reputation: 1

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

Upvotes: -4

Zielony
Zielony

Reputation: 16537

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:

enter image description here

Upvotes: 3

Related Questions