Android CardView

card_travel
CardView es un FrameLayout con un borde redondeado y una sombra.Para provocar la sombra usa la la propiedad elevation en Lollipop.

Debido a que generar bordes redondeados es muy costoso en versiones anteriores puesto que tenía que recortar todos los elementos hijos, CardView aplica un padding extra para que no se produzca tal intersección (Para más detalles setPreventCornerOverlap(boolean)).

Antes de Lollipop, CardView añade padding a su contenido y dibuja sombras en esa área. La cantidad que añade es:

  • En los lados: maxCardElevation + (1 – cos45) * cornerRadius.
  • En la parte inferior y superior: maxCardElevation * 1.5 + (1 -cos45) * cornerRadius.

El padding se utiliza para compensar el contenido de las sombras, no se puede setear un padding a la CardView. En su lugar, se puede utilizar los atributos de padding en XML o setContentPadding(int, int, int, int) por código para establecer un padding entre los bordes de la vista y los hijos del CardView.

Hay que tener en cuenta que, si se especifican dimensiones exactas para un CardView, debido a las sombras, el área de su contenido puede diferir entre versiones anteriores a Lollipop y posteriores. Usando recursos especiales para cada versión, podemos evitar estas transformaciones.

Para cambiar la elevación de forma compatible para versiones anteriores, utilice setCardElevation(float). CardView utilizará la API de elevación en Lollipop y antes de Lollipop cambiará el tamaño de la sombra. Para evitar mover la vista mientras se cambia el tamaño de la sombra, dicho tamaño se fija por getMaxCardElevation(). Si tenemos que cambiar la elevación de forma dinámica, hay que llamar a setMaxCardElevation(float) cuando se inicializa el CardView.

Ejemplo de uso:

Añadimos en XML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Un CardView que contiene un TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="4dp">
 
        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>

Implementación:

 La implementación es sencilla puesto que se trata de una vista más.

Dependencies:

1
2
3
4
5
6
7
8
9
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:support-v4:21.0.3'
    compile 'com.android.support:appcompat-v7:21.0.3'
    compile 'com.android.support:palette-v7:21.0.3'
    compile 'com.android.support:recyclerview-v7:21.0.3'
    compile 'com.squareup.picasso:picasso:2.4.0'
    compile 'com.android.support:cardview-v7:21.0.+'
}

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>