Las aplicaciones a menudo necesitan mostrar datos en contenedores de estilo similar. Estos contenedores se utilizan a menudo en las listas para mantener la información de cada elemento. El sistema proporciona laCardView API como una forma fácil de mostrar información dentro de tarjetas que tienen un aspecto consistente en toda la plataforma. Estas tarjetas tienen una elevación por defecto por encima de su grupo de vistas que las contiene, por lo que el sistema dibuja sombras por debajo de ellas. Las tarjetas proporcionan una manera fácil de contener un grupo de vistas al tiempo que proporcionan un estilo consistente para el contenedor.
Figura 1. Ejemplos de tarjetas
Añadir las dependencias
El widget CardViewes parte de AndroidX. Para utilizarlo en su proyecto, añada la siguiente dependencia al archivo build.gradle de su módulo de aplicación:
dependencies { implementation "androidx.cardview:cardview:1.0.0"}
Crear tarjetas
Para utilizar el CardView debe añadirlo a su archivo de diseño. Utilícelo como un grupo de vistas para contener otras vistas. En este ejemplo, el CardView contiene una sola TextViewpara mostrar alguna información al usuario.
Las tarjetas se dibujan en la pantalla con una elevación por defecto, que hace que el sistema dibuje una sombra debajo de ellas. Puede proporcionar una elevación personalizada para una tarjeta con el atributocard_view:cardElevation. Esto dibujará una sombra más pronunciada con una elevación más grande, y una elevación más baja dará lugar a una sombra más ligera.CardView utiliza la elevación real y las sombras dinámicas en Android 5.0 (nivel de API 21) y superior y vuelve a una implementación de sombra programática en versiones anteriores.
Usa estas propiedades para personalizar la apariencia del widgetCardView:
- Para establecer el radio de las esquinas en tus diseños, usa el atributo
card_view:cardCornerRadius. - Para establecer el radio de las esquinas en tu código, usa el método
CardView.setRadius. - Para establecer el color de fondo de una tarjeta, usa el atributo
card_view:cardBackgroundColor.