CardView not showing Shadow in Android L
AndroidAndroid ListviewAndroid 5.0-LollipopMaterial DesignAndroid CardviewAndroid Problem Overview
My Cardview inside Listview is not showing shadow in Android L(Nexus 5). Also the round edges are not properly shown. Here is the code for Listview's Adapter View :
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<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"
app:cardCornerRadius="4dp"
app:cardElevation="4dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="@dimen/padding_small"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="@+id/ivPicture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvName"
android:layout_centerHorizontal="true"
android:scaleType="fitCenter" />
<TextView
android:id="@+id/tvDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ivPicture"
android:layout_centerHorizontal="true"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin" />
</RelativeLayout>
</android.support.v7.widget.CardView>
And the ListView xml :
<RelativeLayout 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/com.example.myapp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/app_bg" >
<ListView
android:id="@android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:cacheColorHint="#00000000"
android:divider="@android:color/transparent"
android:drawSelectorOnTop="true"
android:smoothScrollbar="true" />
<ProgressBar
android:id="@+id/progressBarMain"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="gone" /></RelativeLayout>
It works fine on pre-L devices with proper shadow and rounded corners. But not working aon Android L device. Can you tell what i am missing here?
Android Solutions
Solution 1 - Android
After going through the docs again, I finally found the solution.
Just add card_view:cardUseCompatPadding="true"
to your CardView
and shadows will appear on Lollipop devices.
What happens is, the content area in a CardView
take different sizes on pre-lollipop and lollipop devices. So in lollipop devices the shadow is actually covered by the card so its not visible. By adding this attribute the content area remains the same across all devices and the shadow becomes visible.
My xml code is like :
<android.support.v7.widget.CardView
android:id="@+id/media_card_view"
android:layout_width="match_parent"
android:layout_height="130dp"
card_view:cardBackgroundColor="@android:color/white"
card_view:cardElevation="2dp"
card_view:cardUseCompatPadding="true"
>
...
</android.support.v7.widget.CardView>
Solution 2 - Android
Do not forget that to draw shadow you must use hardwareAccelerated
drawing
hardwareAccelerated = true
hardwareAccelerated = false
See Android Hardware Acceleration for details
Solution 3 - Android
use app:cardUseCompatPadding="true"
inside your cardview.
For Example
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="@dimen/cardviewMarginRight"
app:cardBackgroundColor="@color/menudetailsbgcolor"
app:cardCornerRadius="@dimen/cardCornerRadius"
app:cardUseCompatPadding="true"
app:elevation="0dp">
</android.support.v7.widget.CardView>
Solution 4 - Android
check hardwareAccelerated in manifest make it true , making it false removes shadows , when false shadow appears in xml preview but not in phone .
Solution 5 - Android
Add this line to CardView....
card_view:cardUseCompatPadding="true" //for enable shadow
card_view:cardElevation="9dp" // this for how much shadow you want to show
Tips
You can avoid layout_marginTop and layout_marginBottom as shadow itself takes some space to the up and down of it.The amount space defined by how much you will use in card_view:cardElevation="ndp" .
Happy Coding (:
Solution 6 - Android
Finally i was able to get shadows on Lollipop device by adding margin to the cardview. Here is the final cardview layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="@dimen/padding_small"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="@+id/ivPicture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvName"
android:layout_centerHorizontal="true"
android:scaleType="fitCenter" />
<TextView
android:id="@+id/tvDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ivPicture"
android:layout_centerHorizontal="true"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin" />
</RelativeLayout>
Solution 7 - Android
You can add this line of code for shadow in card view
card_view:cardElevation="3dp"
Below you have an example
<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"
card_view:cardElevation="3dp"
card_view:cardCornerRadius="4dp">
Hope this helps!
Solution 8 - Android
Simply add this tags:
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
So its become:
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="?colorPrimary"
app:cardCornerRadius="3dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:contentPadding="1dp" />
Solution 9 - Android
You can try by adding this line
card_view:cardUseCompatPadding="true"
The Whole code will seems like this
<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="200dp"
android:layout_margin="5dp"
android:orientation="horizontal"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="5dp">
</android.support.v7.widget.CardView
Solution 10 - Android
In my case the shadow was not showing on Android L devices because I did not add a margin. The problem is that the CardView creates this margin automatically on <5 devices so now I do it like this:
CardView card = new CardView(context);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
if (Build.VERSION_CODES.LOLLIPOP == Build.VERSION.SDK_INT) {
params.setMargins(shadowSize, shadowSize, shadowSize,
shadowSize);
} else {
card.setMaxCardElevation(shadowSize);
}
card.setCardElevation(shadowSize);
card.setLayoutParams(params);
Solution 11 - Android
Add android:hardwareAccelerated="true" in your manifests file like below it works for me
<activity
android:name=".activity.MyCardViewActivity"
android:hardwareAccelerated="true"></activity>
Solution 12 - Android
In case if you're looking for MaterialCardView shadow (elevation), then add this line of code in the XML and it will show the proper elevation-
app:cardElevation="24dp"
app:cardMaxElevation="36dp"
Solution 13 - Android
First of all make sure that following dependencies are proper added and compiled in build.gradle file
dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
}
and after this try the following code :
<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="200dp"
android:layout_margin="5dp"
android:orientation="horizontal"
card_view:cardCornerRadius="5dp">
</android.support.v7.widget.CardView
problem rises in Android L beacuse layout_margin attribute is not added
Solution 14 - Android
My recyclerview was slow in loading so by reading the stackoverflow.com I changed hardwareAccelerated to "false" then the elevation is not showing in the device. The I changed back to true. It works for me.
Solution 15 - Android
Card view can't show shadow because of your RelativeLayout
is on the card view's shadow. To show the shadow add margins on your Card view. For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="8dp">
</android.support.v7.widget.CardView>
</RelativeLayout>
Solution 16 - Android
I think if you check your manifest first if you wrote android:hardwareAccelerated="false"
you should make it true
to having shadow for the card
Like this answer here
Solution 17 - Android
Check you're not using android:layerType="software"
in your RecyclerView.
Changing it to android:layerType="hardware"
solved the issue for me.
Solution 18 - Android
You can also test by assigning:
android:hardwareAccelerated="false"
in manifest file under application tag.
As sometimes some custom views are not supported assigning value to above statement "true" or "false" can be a solution. For more Information refer to android studio docs
Solution 19 - Android
If you use MaterialCardView the option to go is 'app:cardElevation="8dp' the "8dp" is a referential size
Solution 20 - Android
move your "uses-sdk" attribute in top of the manifest like the below answer https://stackoverflow.com/a/27658827/1394139