Setting Elevation in XML on AppCompat CardView on Android 5.0

Question

From what I understand, early in the preview stage there seemed to be no way to set elevation in XML only on CardViews without a hack in Java. Now that the official release is out, is there any way of doing this in XML without writing Java code to set elevation?

I have tried card_view:cardElevation to no effect. I had thought when I was using the emulators for 5.0 everything was fine. But now that I'm using the official version on my actual device all of my CardViews disappeared

Pre Lollipop, it works great.

Here is my full xml

<?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:orientation="horizontal"
    android:layout_width="match_parent"
    android:id="@+id/cv1"
    card_view:cardElevation="4dp"
    android:layout_margin="6dp"
    card_view:cardCornerRadius="3dp"
    android:layout_height="match_parent">

I have gotten behind the problem but don't have an answer yet. When I upgraded to lollipop, somehow the margins or padding disappeared so they don't see the corners or the edges of the card so it is completely flat. — TheLettuceMaster, Nov 22 '14 at 15:29

Gaëtan Maisse · Accepted Answer · 2015-12-01T16:16:50.127

It looks like a margin/padding problem, try to set the cardUseCompatPadding attribute to true. E.g.:

<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="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="6dp"
    card_view:cardUseCompatPadding="true"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="3dp">

Explanation from Android doc :

CardView adds additional padding to draw shadows on platforms before L.

This may cause Cards to have different sizes between L and before L. If you need to align CardView with other Views, you may need api version specific dimension resources to account for the changes. As an alternative, you can set cardUseCompatPadding flag to true and CardView will add the same padding values on platforms L and after.

Since setting cardUseCompatPadding flag to true adds unnecessary gaps in the UI, default value is false.

card_view:cardUseCompatPadding="true" got the elevation to work but added a bunch of padding also.... — Taylor, May 13 '19 at 16:02

Gabriele Mariotti · Answer 2 · 2019-12-14T13:38:12.880

17

You have to use the cardElevation attribute.
Androidx libraries:

You can use the MaterialCard included in the official Material Components library:

implementation 'com.google.android.material:material:1.x.x'

And in your layout:

    <com.google.android.material.card.MaterialCardView
        app:cardElevation="xxdp"
        app:cardUseCompatPadding="true"
        ..>

Or the CardView in the androidx packages:

implementation 'androidx.cardview:cardview:1.x.x'

And in your layout:

     <androidx.cardview.widget.CardView
        app:cardElevation="xxdp"
        app:cardUseCompatPadding="true"
        ..>

OLD support library:

<android.support.v7.widget.CardView
    app:cardElevation="xxdp" 
    app:cardUseCompatPadding="true"
    ..>

edited Dec 14 '19 at 13:38

answered Nov 19 '14 at 13:54

Gabriele Mariotti

320,139
94
887
841

1

No I tried again, and that did not work. I added my full xml up top. – TheLettuceMaster Nov 19 '14 at 20:48
Works for me. What's the default elevation? – SMBiggs Jan 21 '16 at 15:56
Elevation Card resting elevation: 2dp Card raised elevation: 8dp Cards have a default elevation of 2dp. On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover. From https://www.google.com/design/spec/components/cards.html#cards-content-blocks – ZimaXXX Feb 16 '16 at 16:23
it's deprecated – Makarand Dec 14 '19 at 05:51
1

@Makarand True.The design library is no longer maintained but I answered this question 5 years ago. In any case I've updated the answer with andriodx details. – Gabriele Mariotti Dec 14 '19 at 13:40
`app:cardUseCompatPadding` made the trick. Thanks! – Roc Boronat May 02 '22 at 11:36

score 14 · Answer 3 · edited Nov 21 '17 at 07:47

14

If you have this line

android:hardwareAccelerated="false"

in manifest application tag your shadows were not displayed. try to remove this line

or use

android:hardwareAccelerated="true"

This worked for me! I hope it works for you too :)

edited Nov 21 '17 at 07:47

Milad Faridnia

9,113
13
65
78

answered Apr 09 '17 at 11:26

Matin Ashtiani

758
9
11

yeah! that was the problem!! thank you so much! but not due to bitmap image which I've used for background, app gets slowed down :( – Kaushal28 May 29 '17 at 05:13

score 1 · Answer 4 · answered Jan 13 '18 at 21:00

It solved me by adding

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

for example:

<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="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    card_view:cardCornerRadius="5dp">

score 0 · Answer 5 · answered Apr 21 '19 at 07:10

i am adding an app:cardElevation="8dp" attribute on card view, so it will be like :

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:cardElevation="8dp"
        app:cardCornerRadius="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/kmp_warna1" />

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

Hope it will help

score 0 · Answer 6 · answered Mar 21 '21 at 11:15

set in cardView

    <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="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
card_view:cardUseCompatPadding="true"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="3dp">

Setting Elevation in XML on AppCompat CardView on Android 5.0

6 Answers6

Linked