Définition de l'élévation dans XML sur AppCompat CardView sur Android 5.0


95

D'après ce que je comprends, au début de la phase de prévisualisation, il ne semblait y avoir aucun moyen de définir l'élévation en XML uniquement sur les CardViews sans hack en Java. Maintenant que la version officielle est sortie, existe-t-il un moyen de le faire en XML sans écrire de code Java pour définir l'élévation?

J'ai essayé card_view:cardElevationen vain. J'avais pensé que lorsque j'utilisais les émulateurs pour 5.0, tout allait bien. Mais maintenant que j'utilise la version officielle sur mon appareil réel, tous mes CardViews ont disparu

Pre Lollipop, ça marche très bien.

Voici mon xml complet

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

J'ai pris du retard sur le problème mais je n'ai pas encore de réponse. Lorsque je suis passé à la sucette, les marges ou le rembourrage ont disparu pour qu'ils ne voient pas les coins ou les bords de la carte, donc elle est complètement plate.
TheLettuceMaster

Réponses:


316

Cela ressemble à un problème de marge / remplissage, essayez de définir l' attribut cardUseCompatPadding sur true. Par exemple:

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

Explication de la documentation Android:

CardView ajoute un rembourrage supplémentaire pour dessiner des ombres sur les plates-formes avant L.

Cela peut entraîner des cartes de tailles différentes entre L et avant L. Si vous devez aligner CardView avec d'autres vues, vous aurez peut-être besoin de ressources de dimension spécifiques à la version d'API pour prendre en compte les modifications. Comme alternative, vous pouvez définir l'indicateur cardUseCompatPadding sur true et CardView ajoutera les mêmes valeurs de remplissage sur les plates-formes L et ultérieures.

Étant donné que la définition de l'indicateur cardUseCompatPadding sur true ajoute des espaces inutiles dans l'interface utilisateur, la valeur par défaut est false.


1
card_view: cardUseCompatPadding = "true" a obtenu l'élévation au travail mais a également ajouté un tas de rembourrage ...
Taylor

1
quelle est la valeur par défaut de cardElevation?
développeur android

13

Si vous avez cette ligne

android:hardwareAccelerated="false"

dans la balise d'application manifeste, vos ombres n'étaient pas affichées. essayez de supprimer cette ligne

Ou utiliser

android:hardwareAccelerated="true"

Cela a fonctionné pour moi! J'espère que cela fonctionne pour vous aussi :)


Ouais! c'était ça le problème !! Merci beaucoup! mais pas à cause de l'image bitmap que j'ai utilisée pour l'arrière-plan, l'application est ralentie :(
Kaushal28

13

Vous devez utiliser l' cardElevationattribut.
Bibliothèques Androidx:

Vous pouvez utiliser le MaterialCardinclus dans la bibliothèque officielle des composants matériels :

implementation 'com.google.android.material:material:1.x.x'

Et dans votre mise en page:

    <com.google.android.material.card.MaterialCardView
        app:cardElevation="xxdp"
        app:cardUseCompatPadding="true"
        ..>

Ou CardViewdans les packages androidx:

implementation 'androidx.cardview:cardview:1.x.x'

Et dans votre mise en page:

     <androidx.cardview.widget.CardView
        app:cardElevation="xxdp"
        app:cardUseCompatPadding="true"
        ..>

ANCIENNE bibliothèque de support :

<android.support.v7.widget.CardView
    app:cardElevation="xxdp" 
    app:cardUseCompatPadding="true"
    ..>

1
Non, j'ai réessayé et cela n'a pas fonctionné. J'ai ajouté mon xml complet en haut.
TheLettuceMaster

Travaille pour moi. Quelle est l'élévation par défaut?
SMBiggs

Altitude de repos de la carte d'élévation: 2dp Altitude de la carte élevée: 8dp Les cartes ont une élévation par défaut de 2dp. Sur le bureau, les cartes peuvent avoir une élévation au repos de 0dp et gagner une élévation de 8dp en survol. De google.com/design/spec/components/…
ZimaXXX

c'est obsolète
Makarand

1
@Makarand True La bibliothèque de design n'est plus maintenue mais j'ai répondu à cette question il y a 5 ans. Dans tous les cas, j'ai mis à jour la réponse avec les détails andriodx.
Gabriele Mariotti

1

Cela m'a résolu en ajoutant

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

par exemple:

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

0

J'ajoute un attribut app: cardElevation = "8dp" sur la vue de la carte, donc ce sera comme:

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

J'espère que cela aidera

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.