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

isumit
fuente
@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>
Ram Patra
fuente
@ 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.

AndreyICE
fuente
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>
ObturadorAlma
fuente
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.

JSONParser
fuente
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 (:

Shahriar Nasim Nafi
fuente
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>

isumit
fuente
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" />
Shohan Ahmed Sijan
fuente
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!

Ye Min Htut
fuente
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
Yubaraj poudel
fuente
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);
Simón
fuente
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>
yatin deokar
fuente
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

prat3ik-patel
fuente
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.

Torno
fuente
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>
Sudip Sadhukhan
fuente
0

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

amr ismail
fuente
0

Compruebe que no está utilizando android:layerType="software"en su RecyclerView .

Cambiarlo me android:layerType="hardware"resolvió el problema.

prohibición de la geoingeniería
fuente