Configuración de elevación en XML en AppCompat CardView en Android 5.0


95

Por lo que tengo entendido, al principio de la etapa de vista previa no parecía haber forma de establecer la elevación en XML solo en CardViews sin un hack en Java. Ahora que ha salido el lanzamiento oficial, ¿hay alguna forma de hacer esto en XML sin escribir código Java para establecer la elevación?

Lo he intentado card_view:cardElevationen vano. Pensé que cuando estaba usando los emuladores para 5.0 todo estaba bien. Pero ahora que estoy usando la versión oficial en mi dispositivo real, todos mis CardViews desaparecieron

Pre Lollipop, funciona muy bien.

Aquí está mi xml completo

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

He resuelto el problema pero todavía no tengo una respuesta. Cuando actualicé a lollipop, de alguna manera los márgenes o el relleno desaparecieron para que no vean las esquinas o los bordes de la tarjeta, por lo que es completamente plana.
TheLettuceMaster

Respuestas:


316

Parece un problema de margen / relleno, intente establecer el atributo cardUseCompatPadding en verdadero. P.ej:

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

Explicación del documento de Android:

CardView agrega relleno adicional para dibujar sombras en plataformas antes de L.

Esto puede hacer que las tarjetas tengan tamaños diferentes entre L y antes de L. Si necesita alinear CardView con otras vistas, es posible que necesite recursos de dimensión específicos de la versión de API para tener en cuenta los cambios. Como alternativa, puede establecer el indicador cardUseCompatPadding en verdadero y CardView agregará los mismos valores de relleno en las plataformas L y posteriores.

Dado que establecer el indicador cardUseCompatPadding en verdadero agrega espacios innecesarios en la interfaz de usuario, el valor predeterminado es falso.


1
card_view: cardUseCompatPadding = "true" hizo que la elevación funcionara, pero también agregó un montón de relleno ....
Taylor

1
¿Cuál es el valor predeterminado de cardElevation?
desarrollador de Android

13

Si tienes esta linea

android:hardwareAccelerated="false"

en la etiqueta de la aplicación de manifiesto no se mostraban sus sombras. intenta eliminar esta línea

o usar

android:hardwareAccelerated="true"

¡Esto funcionó para mí! Espero que funcione para ti tambien :)


¡Si! ese era el problema !! ¡Muchas gracias! pero no debido a la imagen de mapa de bits que he usado como fondo, la aplicación se ralentiza :(
Kaushal28

13

Tienes que usar el cardElevationatributo.
Bibliotecas de Androidx:

Puede utilizar el MaterialCardincluido en la biblioteca oficial de Componentes de materiales :

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

Y en tu diseño:

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

O CardViewen los paquetes de androidx:

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

Y en tu diseño:

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

Biblioteca de soporte ANTIGUA :

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

1
No, lo intenté de nuevo y no funcionó. Agregué mi xml completo arriba.
TheLettuceMaster

Funciona para mi. ¿Cuál es la elevación predeterminada?
SMBiggs

Elevación Elevación en reposo de la tarjeta: 2dp Elevación elevada de la tarjeta: 8dp Las tarjetas tienen una elevación predeterminada de 2dp. En el escritorio, las tarjetas pueden tener una elevación en reposo de 0dp y ganar una elevación de 8dp al pasar el mouse. De google.com/design/spec/components/…
ZimaXXX

está obsoleto
Maka y

1
@Makarand True. La biblioteca de diseño ya no se mantiene, pero respondí a esta pregunta hace 5 años. En cualquier caso, he actualizado la respuesta con detalles de andriodx.
Gabriele Mariotti

1

Me resolvió agregando

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

por ejemplo:

<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

Estoy agregando una aplicación: cardElevation = atributo "8dp" en la vista de tarjeta, por lo que será como:

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

Espero que ayude

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.