CardView no muestra Shadow en Android L


123

Mi Cardview dentro de Listview no muestra sombras en Android L (Nexus 5). Además, los bordes redondos no se muestran correctamente. Aquí está el código para la vista del adaptador de Listview:

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

Y el xml ListView:

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

Funciona bien en dispositivos pre-L con sombra adecuada y esquinas redondeadas. Pero no funciona en un dispositivo Android L. ¿Puedes decir lo que me estoy perdiendo aquí?



@AIL Pero no estoy usando ningún fondo transparente para cardview o cualquiera de sus vistas principales
isumit

@isumit Sí, el mismo problema aquí.
greywolf82

@ greywolf82 en caso de que aún no haya encontrado una solución. Agregué margen a la vista de tarjeta y ahora muestra la sombra en Lollipop
isumit

Respuestas:


279

Después de revisar los documentos nuevamente, finalmente encontré la solución.

Simplemente agregue card_view:cardUseCompatPadding="true"a su CardViewy aparecerán sombras en los dispositivos Lollipop.

Lo que sucede es que el área de contenido CardViewtoma diferentes tamaños en dispositivos pre-piruletas y piruletas. Entonces, en los dispositivos de paleta, la sombra está cubierta por la tarjeta, por lo que no es visible. Al agregar este atributo, el área de contenido permanece igual en todos los dispositivos y la sombra se vuelve visible.

Mi código xml es como:

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

@ alex-lockwood ¿Puede explicar su cambio, es decir, card_view:cardElevation="2sp"a card_view:cardElevation="2dp"?
Ram Patra

1
@Ramswaroop spsolo debe usarse para tamaños de texto. dpdebe utilizarse para todas las demás dimensiones.
Alex Lockwood

En mi caso, se necesitaba card_view: cardUseCompatPadding. Además, necesito cambiar targetSdkVersion a 21. El cambio de margen no tiene ningún efecto.
Remi

@ KishanSolanki124 Creo que el OP (@isumit) ha perdido la pista de este hilo.
Ram Patra

55

No olvides que para dibujar sombras debes usar hardwareAccelerateddibujo

hardwareAccelerated = true

ingrese la descripción de la imagen aquí

hardwareAccelerated = false

hardwareAccelerated CardView

Consulte Aceleración de hardware de Android para obtener más detalles.


10
La aceleración de hardware está habilitada de forma predeterminada si su nivel de API de destino es> = 14.
Aksel Fatih

2
Esta funcionando,. Pero no entiendo la razón detrás de esto
Deepak Kumar

54

utilizar app:cardUseCompatPadding="true"dentro de su vista de tarjeta. Por ejemplo

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

28

check hardware Acelerado en el manifiesto lo hace verdadero, lo que lo hace falso elimina las sombras, cuando aparece una sombra falsa en la vista previa de xml pero no en el teléfono.


24

Agregue esta línea a CardView ....

card_view:cardUseCompatPadding="true" //for enable shadow
card_view:cardElevation="9dp" // this for how much shadow you want to show

Consejos

Puede evitar layout_marginTop y layout_marginBottom ya que la sombra en sí ocupa algo de espacio hacia arriba y hacia abajo. La cantidad de espacio se define por cuánto usará en card_view: cardElevation = "ndp".

Codificación feliz (:


22

Finalmente pude obtener sombras en el dispositivo Lollipop agregando margen a la vista de tarjeta. Aquí está el diseño de vista de tarjeta final:

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


2
Ya tenía los valores card_view: cardUseCompatPadding configurados, todavía no pude obtener las sombras. Lo que me faltaba es esto, los márgenes. Y realmente funcionó. Gracias.
Ajith Memana

¿Cuál es su valor de margen? es 8dpsuficiente?
behelit

13

Simplemente agregue estas etiquetas:

app:cardElevation="2dp"
app:cardUseCompatPadding="true"

Entonces se convierte en:

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

12

Puede agregar esta línea de código para la sombra en la vista de tarjeta

card_view:cardElevation="3dp"

A continuación tienes un ejemplo

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

¡Espero que esto ayude!


gracias, la clave era card_view: cardElevation y no android: cardElevation
Badr

8

Puedes probar agregando esta línea

 card_view:cardUseCompatPadding="true"

El código completo se verá así

  <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

7

En mi caso, la sombra no se mostraba en los dispositivos Android L porque no agregué un margen. El problema es que CardView crea este margen automáticamente en <5 dispositivos, así que ahora lo hago así:

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

agregar márgenes a cardview desde el archivo de diseño funciona. No lo intenté desde el código
isumit

6

Agregue android: hardwareAccelerated = "true" en su archivo de manifiestos como a continuación, funciona para mí

 <activity
        android:name=".activity.MyCardViewActivity"
        android:hardwareAccelerated="true"></activity>

4

En primer lugar, asegúrese de que las siguientes dependencias se hayan agregado y compilado correctamente en el archivo build.gradle

    dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'

    }

y después de esto prueba el siguiente código:

     <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

el problema aumenta en Android L porque el atributo layout_margin no se agrega


0

Mi vista de reciclaje tardó en cargarse, así que al leer stackoverflow.com cambié hardwareAccelerated a "falso", entonces la elevación no se muestra en el dispositivo. El volví a cambiar a la verdad. Esto funciona para mi.


0

La vista de la carta no puede mostrar la sombra porque RelativeLayoutestá en la sombra de la vista de la carta. Para mostrar la sombra, agregue márgenes en la vista Tarjeta. Por ejemplo:

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

0

Creo que si revisa su manifiesto primero, si escribió android:hardwareAccelerated="false" , debería truetener sombra para la tarjeta. Como esta respuesta aquí.



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.