Usando Cards de Material Design en Jetpack Compose
Antonio Leiva

Tenemos ya una App de lo más resultona después de todos los artículos que hemos visto hasta ahora. Puedes encontrarlos todos bien ordenaditos de forma gratuita en el área privada de Compose Expert.

¡Atención! Si quieres acceder más rápido a todo el contenido en vídeo, organizado, con contenido extra, soporte y muchas más sorpresas, puedes apuntarte gratis a mi formación Compose Expert y ver gratis el primer módulo de más de 3 horas con todo lo necesario para empezar.

Pero antes de finalizar nuestro camino, quería mostrarte un elemento muy típico en el Material Design y que seguramente vas a usar a menudo: las Cards o tarjetas.

Qué son las Cards

Las Cards contienen un contenido y unas acciones relacionadas con un único tema.

Son una unidad estructurada de información que nos permite tanto consultar contenido como realizar acciones, si procede.

Esto nos podría encajar muy bien con cada uno de los elementos que tenemos en el listado de nuestra App. De forma un tanto sencilla los hemos delimitado con unos paddings, pero podríamos hacer más, podríamos usar este componente.

Cómo usar las Cards de Jetpack Compose

Lo único que necesitas es rodear el componente que quieras, con un Card:

Card(
    modifier = modifier.clickable { onClick() }
) {
    Column {
        Thumb(mediaItem)
        Title(mediaItem)
    }
}

El modifier anteriormente estaba en la Column, pero ahora hay que moverlo al Composable más externo que es la Card.

El aspecto inicial es muy sutil:

Un leve efecto redondeado (de 4dp) y una sombra casi imperceptible (de 1dp), pero todo esto es modificable.

Existen un par de Cards diferentes, y te voy a enseñar cómo definir cada una

Card Elevada

Es la que tenemos por defecto. La elevación es 1dp pero la podemos ampliar para que sea más evidente:

Card(
    elevation = 8.dp
) {...}

También le podemos modificar el radio de los bordes si queremos:

Card(
    elevation = 8.dp,
    shape = RoundedCornerShape(8.dp)
) {...}

Card Contorneada

En vez de por una elevación, los límites se definen por un pequeño borde. Esta forma parece que es la que se está poniendo más de moda últimamente.

Necesitamos quitar la elevación y ponerle un borde. Para que se note un poco mejor, le voy a quitar también el fondo verde al Title, y a dejar el de la Card, que por defecto es el surface color definido en el tema.

Card(
    elevation = 0.dp,
    border = BorderStroke(1.dp, Color.LightGray)
) {...}

Otros elementos configurables de las Cards

Aparte de lo visto, podemos modificar otros elementos:

  • backgroundColor: se puede modificar el fondo de la tarjeta, a uno distinto del genérico surface.
  • contentColor: el color por defecto que tendrá el contenido. Por ejemplo, cambia el color del título en nuestro caso.

Por poner un ejemplo:

Card(
    modifier = modifier.clickable { onClick() },
    backgroundColor = MaterialTheme.colors.primary,
    contentColor = MaterialTheme.colors.secondary
) {...}

Puedes ver el ejemplo de uso de Cards en el repositorio de GitHub.

Añade todo lo que necesites a las Cards

Por supuesto, las Cards pueden tener texto, iconos, botones, y todo lo que necesiten.

Un ejemplo que definen en las guías de estilo:

Imagen extraída de material.io

En el siguiente veremos los temas, y cómo estos pueden afectar a las Cards y al resto de componentes de la UI.

Si quieres aprender más sobre Jetpack Compose, puedes acceder ya mismo al área privada de Compose Expert de forma gratuita, donde tendrás todo este contenido, más contenido exclusivo, soporte y muchas sorpresas.

Apúntate ahora a Compose Expert y accede a más de 3h de contenido gratuito, soporte, extras y mucho más totalmente gratis.

Quizá también te interese…

Temas, colores, tipografías y formas en Jetpack Compose

Temas, colores, tipografías y formas en Jetpack Compose

Si vienes del sistema clásico de vistas, recordarás que toda la definición de temas se hacía de una forma bastante tediosa a través de styles en XML. Si odias tu vida (o estás en una App donde mezclas XMLs y Jetpack Compose), aún puedes seguir usando esos temas...

Navegación en Jetpack Compose con Navigation Compose

Navegación en Jetpack Compose con Navigation Compose

Jetpack Compose es un cambio de paradigma enorme en muchos aspectos. Cambia la forma de pensar en casi todos los puntos involucrados en el desarrollo de una App Android. Y la navegación no iba a ser menos. ¿Cómo se navega en Jetpack Compose? ¿Qué opciones tenemos?...

5 consejos para estructurar el código en Jetpack Compose

5 consejos para estructurar el código en Jetpack Compose

Escribir la interfaz con código es genial, pero puede ser que pronto se nos vaya de las manos. Aunque la forma de escribir el código de Jetpack Compose es muy natural y relativamente directa, sí que es verdad que en pro de la flexibilidad, también hay algunos...

0 comentarios

Enviar un comentario

Los datos personales que proporciones a través de este formulario quedarán registrados en un fichero de Antonio Leiva Gordillo, con el fin de gestionar los comentarios que realizas en este blog. La legitimación se realiza a través del consentimiento de la parte interesada. Si no se acepta, no podrás comentar en este blog. Los datos que proporciona solo se utilizan para evitar el correo no deseado y no se usarán para nada más. Puede ejercer los derechos de acceso, rectificación, cancelación y oposición en contacto@devexperto.com.

Tu dirección de correo electrónico no será publicada.

Acepto la política de privacidad *