Android elevation of View in CardView is not shown

Question

I have a RelativeLayout inside a CardView that i want to elevate in Android Lollipop but the elevation is not shown (the shadow is not shown):

enter image description here

My layout file:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android.support.v7.cardview="http://schemas.android.com/apk/res-auto"
    style="@style/CardViewStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="5dp"
    android:orientation="horizontal"
    android.support.v7.cardview:cardElevation="5dp">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_selector"
    android:paddingBottom="5dp">

    <ImageView
        android:id="@+id/article_thumb"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:contentDescription="@string/app_name"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/article_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/article_thumb"
        android:layout_marginEnd="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginStart="10dp"
        android:ellipsize="middle"
        android:linksClickable="false"
        android:longClickable="false"
        android:text="@string/title"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:textColor="@color/black" />

    <TextView
        android:id="@+id/article_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/article_title"
        android:layout_alignStart="@+id/article_title"
        android:layout_below="@+id/article_title"
        android:layout_marginTop="10dp"
        android:text="@string/date"
        android:textAppearance="@style/TextAppearance.AppCompat.Light.Widget.PopupMenu.Small"
        android:textColor="@color/gray" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/article_title"
        android:layout_alignRight="@+id/article_title"
        android:layout_below="@+id/article_title"
        android:layout_marginTop="10dp"
        android:elevation="30dp"
        android:translationZ="30dp">

        <ImageView
            android:id="@+id/redbubble"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_gravity="center"
            android:contentDescription="@string/app_name"
            android:scaleType="centerCrop"
            android:src="@drawable/redbubble" />

        <TextView
            android:id="@+id/article_comment_bubble"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:textAppearance="@style/TextAppearance.AppCompat.Small"
            android:textColor="@color/white" />
    </RelativeLayout>

</RelativeLayout>

So inside this layout I added this two lines to the RelativeLayout to make the elevation:

android:elevation="30dp"
android:translationZ="30dp"

Anyone an idea why it is not shown? At the moment I test it with a Emulator using Android API 21 (Lollipop).

Are you trying to cast a shadow from that dialog bubble shape? If so, it won't work because shadows are only supported for convex shapes. You could try setting an outline provider for a rounded-rect shape, though. — alanv, Dec 17 '14 at 18:37
Try the solution on this link http://stackoverflow.com/a/27900541/1972566 — Ravi, Jan 29 '15 at 07:43
in my case it was a transparent background of view with elevation — Ivan Vazhnov, Jun 29 '15 at 15:04

score 10 · Answer 1 · answered May 22 '15 at 09:44

10

In the root layout in the xml you need

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

below is the code for a cardview

card_view:cardElevation="5dp"

answered May 22 '15 at 09:44

Rahul Ahuja

812
10
24

score 5 · Answer 2 · answered Dec 17 '14 at 16:39

5

The shadow is not shown because they are drawn outside of the bounds of he RelativeLayout and the view is cliped to its bound.

Add android:clipChildren="false" to the parent of your RelativeLayout or add a small amount of padding to your View and set android:clipToPadding="false"

answered Dec 17 '14 at 16:39

pdegand59

12,776
8
51
58

Thanks for the fast response. If I use `android:clipChildren="false"` then my whole layout is out of bounds so I tried the second approach and added `android:padding="5dp"` and `android:clipToPadding="false"` to my RelativeLayout. But the shadow is still not shown. Am I doing something wrong? – Mokkapps Dec 17 '14 at 16:52

score 1 · Answer 3 · answered Dec 18 '14 at 07:32

1

You should add android:elevation property to the redbubble imageview. To view Shadow of an element you have to add android:elevation to that view.

I would suggest you to change your redbubble imageview to the following :

    <ImageView
        android:id="@+id/redbubble"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_gravity="center"
        android:contentDescription="@string/app_name"
        android:scaleType="centerCrop"
        android:elevation="2dp"
        android:src="@drawable/redbubble" />

answered Dec 18 '14 at 07:32

ch3tanz

3,070
3
16
24

Unfortunately this doesn't work. I thinks the answer from alanv in the main post describes the problem – Mokkapps Dec 18 '14 at 07:39
You can add your custom shadow for the redbubble and set it as background. android:background="@drawable/myCustomShadowShape" /> – ch3tanz Dec 18 '14 at 07:44

score 1 · Answer 4 · answered Apr 15 '15 at 13:38

1

I noticed same problem and elevation is not shown because line:

android:layout_below="@+id/...."

Generally, it is because shadow is drawn outside of visible bounds.

answered Apr 15 '15 at 13:38

Taras Okunev

410
6
9

Amelia Laila · Answer 5 · 2017-05-25T06:54:13.077

0

remove

android:hardwareAccelerated="false" from manifest

edited May 25 '17 at 06:54

answered May 25 '17 at 06:09

Amelia Laila

1
2

2

While this code may answer the question, providing additional [context](https://meta.stackexchange.com/q/114762) regarding _how_ and/or _why_ it solves the problem would improve the answer's long-term value. Remember that you are answering the question for readers in the future, not just the person asking now! Please [edit](http://stackoverflow.com/posts/44173464/edit) your answer to add an explanation, and give an indication of what limitations and assumptions apply. It also doesn't hurt to mention why this answer is more appropriate than others. – Dev-iL May 25 '17 at 09:02

Android elevation of View in CardView is not shown

5 Answers5