CardView not showing shadow elevation

Question

I am working with cardviews but the problem is my CardView is not showing any elevation or shadow. I have already tried some of the methods suggested in stackoverflow answers like I have tried using elevation and shadow property. I have also tried using card_view:cardUseCompatPadding="true", but without any success. This is my xml file

<?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"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    android:layout_marginTop="6dp"
    android:layout_marginBottom="6dp"
    app:cardBackgroundColor="#FAFBFD"
    app:cardElevation="5dp">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/post_profile_image"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@mipmap/ic_launcher"
                android:layout_marginLeft="12dp"
                android:layout_marginTop="12dp"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/post_profile_image"
                android:layout_marginLeft="12dp"
                android:orientation="vertical"
                android:layout_marginTop="16dp">

                <TextView
                    android:id="@+id/post_username"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Name"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#000000"/>

                <TextView
                    android:id="@+id/post_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="Time"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:textColor="@color/grayColor"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true">

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:drawable/ic_delete"
                    android:id="@+id/post_delete_btn"
                    android:visibility="invisible"/>

            </LinearLayout>

        </RelativeLayout>

        <ImageView
            android:id="@+id/post_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="12dp"
            android:adjustViewBounds="true"
            android:background="#00ffffff"
            android:src="@drawable/add_btn"
            android:visibility="gone"/>

        <TextView
            android:id="@+id/post_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_marginLeft="12dp"
            android:text="Text about Posting...."
            android:textAppearance="?android:attr/textAppearanceMedium"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_marginBottom="8dp">

            <ImageButton
                android:id="@+id/like_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:background="#00ffffff"
                android:src="@drawable/grey_like_bt"/>

            <TextView
                android:id="@+id/post_like_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4dp"
                android:layout_marginTop="8dp"
                android:text="0 Likes"
                android:textColor="#2196F3"/>

            <ImageButton
                android:id="@+id/comment_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="32dp"
                android:background="#00ffffff"
                android:src="@drawable/comment_btn_gray"/>

            <TextView
                android:id="@+id/post_comment_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4dp"
                android:layout_marginTop="8dp"
                android:text="0 Comments"
                android:textColor="#2196F3"/>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:drawable/ic_menu_edit"
                    android:visibility="invisible"
                    android:id="@+id/post_edit_btn"
                    android:layout_alignParentRight="true"/>

            </RelativeLayout>

        </LinearLayout>

    </LinearLayout>

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

Dont know why it is not showing any elevation and shadow

I have used elevation but it was not giving any results so I have removed it — Nikesh Patel, Apr 14 '17 at 07:19
http://stackoverflow.com/questions/35369691/how-to-add-colored-border-on-cardview — IntelliJ Amiya, Apr 14 '17 at 07:40
I had the same issue as the OP. I've posted my solution here - https://stackoverflow.com/a/61398321/1617737 - to a similar question. — ban-geoengineering, Apr 23 '20 at 22:57

Ara Hakobyan · Accepted Answer · 2017-10-10T08:13:18.580

106

Do not forget that to draw shadow you must use hardwareAccelerated drawing

<application android:hardwareAccelerated="true" ...>

see for details https://developer.android.com/guide/topics/graphics/hardware-accel.html?hl=ru

edited Oct 10 '17 at 08:13

answered Apr 14 '17 at 07:54

Ara Hakobyan

1,682
1
10
21

score 54 · Answer 2 · edited Sep 17 '19 at 11:31

54

<android.support.v7.widget.CardView android:id="@+id/item_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="2dp"
    app:cardUseCompatPadding="true"
    app:cardElevation="2dp"
    app:cardBackgroundColor="@color/md_white_1000"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true">

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

app:cardUseCompatPadding="true" is the main catch here

edited Sep 17 '19 at 11:31

Aryeetey Solomon Aryeetey

5,566
3
25
29

answered Apr 14 '17 at 07:35

ZeroOne

8,996
4
27
45

2

I know that `` may cause some troubles, so `app:cardUseCompatPadding="true"` is the best solution, I think. – danyapd Nov 18 '20 at 16:22
But when we use app:cardUseCompatPadding="true", we can not control the exact padding we want right ? That will give default padding – K Pradeep Kumar Reddy Dec 16 '21 at 16:04

score 10 · Answer 3 · answered Jan 30 '18 at 11:54

10

If your manifest file has a android:hardwareAccelerated="false" line, delete it.

answered Jan 30 '18 at 11:54

Null Pointer Exception

1,555
14
13

score 10 · Answer 4 · answered Jun 12 '20 at 06:57

10

Lot of good answers, but sometimes just one doesn't work for all. here's the one that worked for me after a lot of looking around,

Add this line to your CardView

app:cardUseCompatPadding="true"

So your cardview looks like this

  <androidx.cardview.widget.CardView
      android:id="@+id/cardView"
      android:layout_width="match_parent"
      app:cardUseCompatPadding="true"/>

Hope that works! Happy coding!

answered Jun 12 '20 at 06:57

sud007

5,824
4
56
63

it's work for me. – neo Oct 19 '21 at 08:39

score 8 · Answer 5 · answered Apr 14 '17 at 07:17

8

use this inside cardView to show shadow:

app:cardElevation="4dp"
app:cardMaxElevation="4dp"

answered Apr 14 '17 at 07:17

Divyesh Patel

2,576
2
15
30

I have used this Divyesh still not getting elevation in emulator and phone – Nikesh Patel Apr 14 '17 at 07:33
1

add app:cardUseCompatPadding="true" – Divyesh Patel Apr 14 '17 at 07:36
This as well Divyesh I have already pointed out this in the question itself – Nikesh Patel Apr 14 '17 at 07:41

Prince Dholakiya · Answer 6 · 2020-08-09T06:23:00.097

You forget two things.

First of all, check your project's AndroidManifest.xml file, in the Application tag you have to write

<application android:hardwareAccelerated="true" ...>

instead of

<application android:hardwareAccelerated="false" ...>

Then check the parent tag of your layout file is there written like below line.
if you wanna use app: xmlns. then write : xmlns:app="http://schemas.android.com/apk/res-auto"

OR xmlns:card_view="http://schemas.android.com/apk/res-auto"

NOTE: You don't need to write both simultaneous. Because it gives you duplicate attribute error.

The above line is most important when you use the attributes of res-auto.

<?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:orientation="vertical">

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

</RelativeLayout>

score 5 · Answer 7 · answered Apr 14 '17 at 07:17

You should have to try this:

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        app:cardElevation="3dp">

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

        <!--Put your other fields between this-->
</android.support.v7.widget.CardView>

Tried this as well still not getting – Nikesh Patel Apr 14 '17 at 07:27 — Nikesh Patel, Apr 14 '17 at 07:27

score 3 · Answer 8 · edited Aug 04 '20 at 15:48

3

There are two things that helped me solve this problem:

Setting this in the application tag of my manifest:
```
android:hardwareAccelerated="false"
```
File > Invalidate cache and restart

edited Aug 04 '20 at 15:48

Dharman

30,962
25
85
135

answered Aug 04 '20 at 15:42

Taslim Oseni

6,086
10
44
69

score 2 · Answer 9 · edited Aug 12 '18 at 23:03

Try this

    <android.support.v7.widget.CardView
            android:id="@+id/driverCurrentJobsCardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/dim_8"
            android:background="#ffffff"
            app:cardCornerRadius="4dp"
            card_view:cardElevation="4dp"/>

And make sure that you are using this dependency in gradle

compile 'com.android.support:cardview-v7:23.2.1'

score 2 · Answer 10 · answered Mar 25 '18 at 06:22

2

remove below line from AndroidManifest.xml

android:hardwareAccelerated="false"

answered Mar 25 '18 at 06:22

Narendra Sorathiya

3,770
2
34
37

score 1 · Answer 11 · answered Apr 14 '17 at 07:24

1

Add this line in CardView widget

app:cardElevation="5dp"

hope this will help!

answered Apr 14 '17 at 07:24

Akp

259
1
9

First remove background of cardview then try this – Akp Apr 14 '17 at 08:19

score 1 · Answer 12 · edited Nov 26 '19 at 15:24

<android.support.design.card.MaterialCardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    app:cardCornerRadius="@dimen/_5sdp"
    card_view:cardCornerRadius="3dp"
    android:layout_margin="@dimen/_3sdp"
    card_view:cardElevation="10dp"
    card_view:cardUseCompatPadding="true">
</android.support.design.card.MaterialCardView>

Use above code and don't forget to use android:hardwareAccelerated="true". It will work definitely.

Reejesh · Answer 13 · 2021-07-09T04:53:59.530

If there is a parent for the Card View, try setting a background color for the parent layout like a color #EDEDED , anything other than white. This will also make a clear difference between card and the background.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EDEDED"
    >
 <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardone"        
        android:elevation="10dp"   
        android:layout_margin="10dp"
       >

android:background="#EDEDED" on the parent layout makes the difference.

And don't use android:elevation="10dp" , use app:cardElevation="10dp"

instead of `android:elevation="10dp"` `app:cardElevation="10dp"` gives a better effect — Reejesh PK, May 28 '21 at 11:26

score 0 · Answer 14 · answered Apr 14 '17 at 07:18

0

Try putting this in your rootview:

xmlns:card_view="http://schemas.android.com/apk/res-auto"

and use this code for elevation:

card_view:cardElevation="10dp"

answered Apr 14 '17 at 07:18

Haris ali

773
1
13
19

Well i pasted your xml code and the cardview is showing shadows here. try using ``invalidate cache and restart`` option in android studio maybe that could help ! – Haris ali Apr 14 '17 at 07:50

score 0 · Answer 15 · answered Jun 21 '17 at 10:51

     <android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="10dp"
    app:cardCornerRadius="4dp"
    app:cardBackgroundColor="#ffff8800">
     ......
     </android.support.v7.widget.CardView>

Remove the background color first, add the elevation and later add the background again. Worked for me, though I had added the background through the layout designer.

score 0 · Answer 16 · answered Jan 01 '21 at 16:48

Apparently, I was using Theme.AppCompat instead of Theme.MaterialComponents in as my AppTheme.

 <style name="Theme.Main" parent="Theme.MaterialComponents.NoActionBar">
</style>

In your layout, use MaterialCardView instead of CardView

<com.google.android.material.card.MaterialCardView 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp">

score -1 · Answer 17 · answered Oct 28 '19 at 12:50

-1

Try adding android:outlineProvider="bounds" to the CardView layout.

answered Oct 28 '19 at 12:50

Pnemonic

1,685
17
17

score -2 · Answer 18 · answered Apr 14 '17 at 07:18

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    android:foreground="?android:attr/selectableItemBackground"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/padding_small"
    android:layout_marginBottom="@dimen/padding_small"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp" >

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

Tried this still not getting elevation – Nikesh Patel Apr 14 '17 at 07:34 — Nikesh Patel, Apr 14 '17 at 07:34

CardView not showing shadow elevation

18 Answers18

Linked