¿Por qué no hay espacio entre CardViews en Lollipop?


79

Intento usar el CardViewy funciona bien por debajo de 5.0, pero se ve extraño en Lollipop.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">

<android.support.v7.widget.CardView android:layout_width="match_parent"
    android:layout_height="200dp">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="card1"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView android:layout_width="match_parent"
    android:layout_height="200dp">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="card2"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</android.support.v7.widget.CardView>
</LinearLayout>

Encuentro la misma pregunta cuando uso el RecyclerView, ¿debo agregar algo si se ejecuta en Lollipop?


1
agregar LinearLayoutentre las cartas
Andrés Cárdenas

Respuestas:


205

Establecer esto en un CardView:

app:cardUseCompatPadding="true"

De la documentación:

Agregue relleno en API v21 + también para tener las mismas medidas con versiones anteriores.


1
En su lugar, usé el espacio de nombres "aplicación". ¿Se sigue utilizando "card_view"?
wsgeorge

1
@wsgeorge que era de la documentación de Android, pero lo he editado en un espacio de nombres de aplicaciones más amigable.
tomrozb

se ve mejor, pero ¿cómo eliminar la línea divisoria?
no hay noticias

@nonews Puedes intentarlo android:divider="@null".
SREE

29

Use estas dos etiquetas a continuación dentro de su vista de tarjeta:

app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true"

13

La primera imagen es el comportamiento esperado de la vista de tarjeta. cuando la carta tiene elevación, la sombra cae sobre las capas inferiores. En los dispositivos de pre-piruleta la elevación se realiza agregando relleno. por lo que los dispositivos de pre-piruleta tendrán un relleno alrededor de la vista de la tarjeta.

Antes de L, CardView agrega relleno a su contenido y dibuja sombras en esa área. Esta cantidad de relleno es igual a maxCardElevation + (1 - cos45) * cornerRadius en los lados y maxCardElevation * 1.5 + (1 - cos45) * cornerRadius en la parte superior e inferior.


por lo que el tamaño de la vista de tarjeta que vemos en el editor no es el tamaño real que podemos usar cuando está debajo de la paleta, hay una parte que se usa para agregar el relleno, y en la paleta el tamaño en el diseño es el mismo que el real, es parece que dar un acolchado se ve mejor, pero ¿cómo debo hacer para separarlos?
Cajsaiko

lo que ves en el editor es lo que obtienes en realidad. Para tener el mismo margen entre las tarjetas en todas las pantallas, establezca el margen si la palanca de API es 21 o superior
puntero nulo

5
Esta respuesta es correcta. Además de eso, si desea que la interfaz de usuario sea consistente sin agregar márgenes separados para los valores-21, puede establecer el relleno de compatibilidad en verdadero para que también agregue el mismo relleno en L. developer.android.com/reference/android/support/v7/widget/…
yigit

@billgates después de agregar un margen, la vista de tarjeta se ve bien tanto en lollpop como en pre-lollpop, ¡gracias por tu respuesta!
cajsaiko

1
¿Es posible quitar el relleno en los dispositivos de pre-piruleta?
user2456977

5

Tienes que agregar app:cardUseCompatPadding="true"a tu Cardview. Pero solo agregar eso puede generar un error. Para evitar ese error, también debe agregar xmlns:app="http://schemas.android.com/apk/res-auto"a su CardView.

Por ejemplo,

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:cardUseCompatPadding="true">

    // Other views here

</android.support.v7.widget.CardView>

Algunos agregarían card_view:cardUseCompatPadding="true"y en xmlns:card_view="http://schemas.android.com/apk/res-auto"lugar de los mencionados anteriormente. Ambas formas son correctas.

Si desea saber más sobre la aplicación en XML (Android), lea esta respuesta :

Aunque las respuestas anteriores resolverán el problema, no explicaron qué hace cada atributo. Para ser más útil para responder a los buscadores,

cardPreventCornerOverlap El atributo agrega relleno a CardView en v20 y antes para evitar intersecciones entre el contenido de la tarjeta y las esquinas redondeadas.

cardUseCompatPadding El atributo agrega relleno en API v21 +, así como para tener las mismas medidas con versiones anteriores.

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.