CardView no muestra Shadow en Android L
Mi vista Cardview dentro de Listview no muestra sombra en Android L (Nexus 5). También los bordes redondos no se muestran correctamente. Aquí está el código de la Vista del adaptador 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 ListView xml:
- Cómo cambiar los iconos de los iconos del menú de navegación y desbordamiento de la barra de herramientas (appcompat v7)?
- Android Tab Layout inside Fragmento no carga el contenido de la pestaña
- Cambiar la altura de AppBarLayout por programa en Android
- Estilizar / colorear el botón SwitchCompat en Android Lollipop para el diseño del material
- ¿Cómo hacer que el menú emergente de desbordamiento evite obstruir la barra de acción?
<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 sombras adecuadas y esquinas redondeadas. Pero no funciona en el dispositivo Android L. ¿Puedes decir lo que me falta aquí?
- Dos botones flotantes en el único diseño
- Cómo deslizar las pestañas de la barra de herramientas mediante el diseño del material
- Cheesesquare: enterAlways produce un diseño incorrecto
- Cómo mostrar los elementos colapsados en CoordinatorLayout mediante programación?
- Circular revela transición para una nueva actividad
- El uso del ejemplo de RecyclerView no compila
- Canot resolver android.support.v7.internal.widget.TintImageView
- Cuando se utiliza el CoordinatorLayout mi ScrollView tiene un tamaño incorrecto
Después de revisar los documentos de nuevo, finalmente encontré la solución.
Simplemente agregue card_view:cardUseCompatPadding="true"
a su CardView
y las sombras aparecerán en los dispositivos Lollipop.
Lo que ocurre es que el área de contenido de un CardView
toma diferentes tamaños en los dispositivos pre-pirulí y piruleta. Así que en los dispositivos lollipop la sombra es en realidad 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>
app:cardUseCompatPadding="true"
dentro de su cardview. 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>
No te olvides que para dibujar sombra debes usar el hardwareAccelerated
hardwareAccelerated = true
hardwareAccelerated = false
Consulta Aceleración de hardware de Android para obtener detalles
Finalmente pude conseguir sombras en el dispositivo Lollipop añadiendo margen al cardview. Aquí está la disposición final del cardview:
<?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>
Puede probar agregando esta línea
card_view:cardUseCompatPadding="true"
El código completo parecerá 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
Comprobar hardwareAccelerated en el manifiesto lo hacen verdadero, haciéndolo false elimina las sombras, cuando la sombra falsa aparece en la vista previa de xml, pero no en el teléfono.
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!
En primer lugar, asegúrese de que las siguientes dependencias se agregan correctamente y se compilan en el archivo build.gradle
dependencies { ... compile 'com.android.support:cardview-v7:21.0.+' }
Y después de esto pruebe el código siguiente:
<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
Problema sube en Android L porque el atributo layout_margin no se agrega
En mi caso, la sombra no estaba mostrando en los dispositivos Android L porque no añadí 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);
Simplemente agregue estas etiquetas:
app:cardElevation="2dp" app:cardUseCompatPadding="true"
Así que 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" />
Mueva su atributo "uses-sdk" en la parte superior del manifiesto como la respuesta a continuación https://stackoverflow.com/a/27658827/1394139
Mi recyclerview fue lento en la carga por lo que la lectura de stackoverflow.com He cambiado hardwareAccelerated a "false", entonces la elevación no se muestra en el dispositivo. El cambié de nuevo a la verdad. Esto funciona para mi.