Setting Elevation in XML on AppCompat CardView on Android 5.0
AndroidAndroid AppcompatAndroid CardviewAndroid ElevationAndroid Problem Overview
From what I understand, early in the preview stage there seemed to be no way to set elevation in XML only on CardView
s 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 CardView
s 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">
Android Solutions
Solution 1 - Android
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.
Solution 2 - Android
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"
..>
Solution 3 - Android
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 :)
Solution 4 - Android
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">
Solution 5 - Android
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
Solution 6 - Android
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">