CODEWITHSUNDEEP
androidandroid-appcompatandroid-cardviewandroid-elevation
TheLettuceMaster
TheLettuceMaster

Reputation: 15744

Setting Elevation in XML on AppCompat CardView on Android 5.0

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">

Upvotes: 101

Views: 105643

Answers (6)

sepnil
sepnil

Reputation: 19

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">

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364978

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"
    ..>

Upvotes: 18

Cevin Ways
Cevin Ways

Reputation: 984

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

Upvotes: 0

Felhi Abdelhafidh
Felhi Abdelhafidh

Reputation: 478

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">

Upvotes: 1

Matin Ashtiani
Matin Ashtiani

Reputation: 798

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 :)

Upvotes: 14

Ga&#235;tan Maisse
Ga&#235;tan Maisse

Reputation: 12347

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.

Upvotes: 328

Related Questions