Android CardView with rounded corners displays grey corners

Question

I'm inflating a custom layout with CardView inside the layout. The rounded corners are displayed as expected but I also get grey background behind the corners.

The code is simple, uses a CardView with corner radius and a background color. I've tried setting transparent background but doesn't work. However, if i set another opaque color, it is displayed in corners.

Code is attached.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@android:color/white"
        app:cardCornerRadius="6dp"
        app:cardElevation="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent">

            <TextView
                android:id="@+id/tvProgress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@+id/ivIcon"
                android:layout_toStartOf="@+id/ivIcon"
                android:background="@android:color/transparent"
                android:padding="@dimen/elementPaddingSmall"
                android:text="Initial Discussion"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@android:color/black" />

            <ImageView
                android:id="@+id/ivIcon"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:background="@color/lightBrown"
                android:scaleType="centerInside"
                android:src="@drawable/ic_checkmark_circle" />
        </RelativeLayout>


    </android.support.v7.widget.CardView>
</RelativeLayout>

Result:

Please put this element inside your cardview app:cardUseCompatPadding="true" — Mahesh Vayak, Jan 15 '18 at 10:54
You can remove the `RelativeLayout` and have the `CardView` as parent and it would work. The `RelativeLayout` is wrapping the `CardView` and it seems that the border is grey whereas it's just the shadow — Pulak, Jan 15 '18 at 10:59
try to use app:cardUseCompatPadding="true" and app:contentPadding="20dp" or some other value. — yashkal, Jan 15 '18 at 11:06
Simple work-around, might not be the prettiest but it'll work, is to change the `RelativeLayout`s background color to the same one of the container of the recycler view. The same shade of grey. If you don't want to waste any more time on this :D — Vucko, Jan 15 '18 at 11:06

Misha Akopov · Accepted Answer · 2018-01-15T15:49:54.717

69

It is because of shadow, you need to give space to cardview to show full shadow. Add android:layout_margin="5dp" to CardView and you will see that the "grey" color is cut shadow.

Solution is adding app:cardUseCompatPadding="true" to CardView and it will give needed spacing.

edited Jan 15 '18 at 15:49

answered Jan 15 '18 at 10:59

Misha Akopov

12,241
27
68
82

4

`app:cardUseCompatPadding="true"` works. +1 for the shadow explanation! I wonder why this flag isn't enabled by default. Thanks anyways. – Prasad Pawar Jan 15 '18 at 15:13
1

Exactly what I needed! Other solutions didn't work for me – FabioR Aug 21 '20 at 21:21
This is creating extra space around the card. How to avoid it ? – K Pradeep Kumar Reddy Apr 20 '21 at 12:08
This worked for me, but it does add extra padding. To remove that, and the additional background color that you don't want, add the following (Kotlin) line to onCreateView(): dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT)) – ConcernedHobbit May 03 '21 at 10:26

score 11 · Answer 2 · answered Jan 15 '18 at 11:10

Try this...

Just set 0 value to app:cardElevation

.....
<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="6dp"
    app:cardElevation="0dp">
.....

OR you can call cardView.setCardElevation(0) to disable shadow programmatically.

score 0 · Answer 3 · answered Jan 15 '18 at 11:21

Remove the parent RelativeLayout that is wrapping the CardView and you are good to go. Just like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    app:cardCornerRadius="6dp"
    app:cardElevation="5dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent">

        <TextView
            android:id="@+id/tvProgress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/ivIcon"
            android:layout_toStartOf="@+id/ivIcon"
            android:background="@android:color/transparent"
            android:padding="@dimen/elementPaddingSmall"
            android:text="Initial Discussion"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@android:color/black"/>

        <ImageView
            android:id="@+id/ivIcon"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:background="@color/lightBrown"
            android:scaleType="centerInside"
            android:src="@drawable/ic_checkmark_circle"/>
    </RelativeLayout>


</android.support.v7.widget.CardView>

The issue was related to no spacing available for shadow as explained by Misha Akopov. What you suggested was already tried by me and doesn't work. Thanks anyways. — Prasad Pawar, Jan 15 '18 at 15:15

score 0 · Answer 4 · answered Feb 26 '19 at 14:22

0

If someone faces the problem when the edges' color is darker than you set, it could happen if you set the color in #AARRGGBB format. To fix this issue, just set the color in the normal #RRGGBB format.

answered Feb 26 '19 at 14:22

ivan8m8

388
4
17

score -5 · Answer 5 · edited Oct 16 '19 at 03:07

-5

Change app:cardUseCompatPadding="true" to card_view:cardUseCompatPadding="true"

edited Oct 16 '19 at 03:07

Trenton McKinney

56,955
33
144
158

answered Oct 16 '19 at 02:25

metadata

1
1

Code dumps without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it works better than what the OP provided. – palaѕн May 14 '20 at 04:25

Android CardView with rounded corners displays grey corners

5 Answers5

Linked