Cardview not showing shadow along bottom

Question

I have the following xml for a cardview:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent" android:padding="2dp">
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="0dp">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp">
        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

Which results in these shadows which have no shading on the bottom at all

But I am trying to get something like this shadow, that more nicely surrounds the whole card.

enter image description here

I've tried changing the elevation to no avail, and searching on this issue seems to bring up nothing but people with no shadows at all issues which is not my case.

How can I get the shadows right?

Thanks.

possible duplicate of [Setting Elevation in XML on AppCompat CardView on Android 5.0](http://stackoverflow.com/questions/26997109/setting-elevation-in-xml-on-appcompat-cardview-on-android-5-0) — MLProgrammer-CiM, Apr 02 '15 at 15:46
Thank you, this solved my issue. Strange that you have to add this tag for API v21 and *forward* though. Am I understanding that right? — Zerp, Apr 02 '15 at 15:51
It's just Android fragmentation, just stackoverflow it and move along to the next feature. — MLProgrammer-CiM, Apr 02 '15 at 16:11
Can i show the shadow on the bottom only (one side of card view)? — Ibrahim Disouki, Mar 15 '16 at 12:38

score 123 · Answer 1 · answered Aug 15 '16 at 17:23

123

You need to add this xml property in your card view

app:cardUseCompatPadding="true"

answered Aug 15 '16 at 17:23

ch3tanz

3,070
3
16
24

at the top, something like: ` – Junior Mayhé Jul 07 '17 at 00:53

score 5 · Answer 2 · answered May 03 '18 at 09:26

5

Adding clipChildren="false" to the parent LinearLayout should also work.

answered May 03 '18 at 09:26

Kavi

3,880
2
26
23

score 2 · Answer 3 · answered Apr 02 '15 at 15:55

2

set elevation using card_view:cardElevation property

answered Apr 02 '15 at 15:55

Varun Kumar

1,241
1
9
18

30

As explained in my question, I had tried this, but it was not the problem. After reading MLProgrammer-CiM's comment, it turned out to be that I needed to use `card_view:cardUseCompatPadding="true"` – Zerp Apr 02 '15 at 15:59

score 1 · Answer 4 · answered Jan 17 '21 at 15:37

I was having the same problem until I remembered that if the parent is wrapping its content, then it will not wrap the shadow, so I gave the parent a bigger size than the child that way it will include the child and the shadow of the child

 <androidx.constraintlayout.widget.ConstraintLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="110dp"
android:layout_height="110dp">

<androidx.cardview.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_width="98dp"
    android:layout_height="98dp"
    app:cardCornerRadius="10dp"
    app:cardElevation="5dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        app:srcCompat="@drawable/manhattan" />

  
</androidx.cardview.widget.CardView>

  </androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Answer 5 · answered Nov 10 '20 at 11:17

0

add these lines in your cardView

    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"

answered Nov 10 '20 at 11:17

Binod Kumar

36
3

Please consider adding some explanation to your answer. – Corné Nov 10 '20 at 12:03

Cardview not showing shadow along bottom

5 Answers5