Android CardView cardElevation and shadow is not working

Question

I have this set of Cards using CardView inside an activity.

When running the app, I get this not expected cardview : no elevation, no shadow...

Result on Android 7 device :

Code

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="4dp"
    card_view:cardUseCompatPadding="true"
    android:layout_margin="8dp"
    android:gravity="center_horizontal"
    android:id="@+id/card_view"
    android:padding="10dp"
    android:layout_centerHorizontal="true"
    card_view:cardBackgroundColor="@color/main_color_grey_800">

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

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="350.0dp"
            android:scaleType="centerCrop"
             />

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:padding="15.0dp"
            android:textColor="@android:color/black"
            android:textSize="16.0sp"
            android:text="@string/LoremText" />

        <TextView
            android:id="@+id/desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:padding="15.0dp"
            android:textColor="@android:color/black"
            android:textSize="12.0sp"
            android:textAlignment="center"
            android:text="@string/LoremText" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="end"
            android:orientation="horizontal"
            android:paddingTop="10.0dip">

            <Button
                android:id="@+id/answer_1"
                android:layout_width="0px"
                android:layout_height="50.0dip"
                android:text="@string/Maybe"
                android:textColor="@color/white"
                android:background="@color/cpb_red"
                android:textSize="14sp"
                style="@style/DBTheme.Button.Orange"
                android:textStyle="bold"
                android:layout_weight="1"
                tools:ignore="ButtonStyle"
                android:visibility="gone" />

            <Button
                android:id="@+id/answer_2"
                style="@style/DBTheme.Button.Orange"
                android:layout_width="0px"
                android:layout_height="50.0dip"
                android:text="@string/yes_button"
                android:textColor="@android:color/white"
                android:textSize="14sp"
                android:textStyle="bold"
                android:background="@color/cpb_red"
                android:layout_weight="1"
                android:visibility="gone" />
            <Button
                android:id="@+id/answer_3"
                style="@style/DBTheme.Button.Orange"
                android:layout_width="0px"
                android:layout_height="50.0dip"
                android:layout_weight="1.0"
                android:textStyle="bold"
                android:text="@string/no_button"
                android:textColor="@color/white"
                android:background="@color/cpb_red"
                android:textSize="14sp"
                android:visibility="gone" />
        </LinearLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="4.0dp"
        android:background="@drawable/shadow" />
</android.support.v7.widget.CardView>

Any ideas on how to solve this ? Thanks :)

Solution 1

After digging,playing and modifying the layout I even created a new project and add the same code in the current project I've got different result xD , it turns out the issue is caused by this android:hardwareAccelerated="false" in the AndroidManifest.xml file.Just set the value of that attribute to true and you'll be good to go.

Solution 2

Use this in your XML file

 <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="@dimen/_5sdp"
            app:cardElevation="@dimen/_8sdp"
            app:contentPadding="@dimen/_15sdp"
            app:cardUseCompatPadding="true">

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

Solution 3

Use this code ma resolve your issue

<android.support.v7.widget.CardView
            android:id="@+id/cardview"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:elevation="5dp"
            card_view:cardBackgroundColor="@color/cardview_initial_background"
            card_view:cardCornerRadius="8dp"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large"
            >

Solution 4

Some margin is required for elevation shadow to be displayed. Just put layout_margin="<some_value>" and it works perfect.

View more solutions

Comments

[Mohamed ALOUANE]

android:elevation="100dp" .. Srcly ?

[Vijay Kumar M]

use android:elevation="3dp" or android:elevation="5dp" only.By mistake I have 100dp instead of 5dp

[Kevan Aghera]

what is the Reason behind this?