Un CardView es parte de los estilos de Material Design y nos permite mostrar información dentro de tarjetas (Card), esta información puede mostrarse más de una vez en una actividad usando un Cardview y un RecyclerView, aunque esto no es obligatorio, es lo más usual.
A continuación conoceremos un poco más sobre este CardView y su uso desde Android Studio.
Partiremos de un proyecto básico que llamaremos «Tarjetas»
Lo primero que debemos hacer para trabajar con Material Design, es agregar las dependencias necesarias para que estos widgets funcionen.
Abre el archivo build.Gradle y agrega:
compile ‘com.android.support:cardview-v7:25.3.+’
en la sección de dependencias, es decir:
Importante: deben coincidir las versiones de compileSdkVersion y de las dependencias de CardView, en este ejemplo es el SDK «25». Si tu utilizas otra versión del SDK debes o actualizar tu SDK o utilizar la versión que corresponda, es decir, para un compileSdkVersion: 23 podría usarse un compile ‘com.android.support:cardview-v7:23.1.+’
Usando Tarjetas (CardView)
Abre el archivo activity_main.xml y reemplaza el contenido por:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" android:background="#b3e8ff" android:orientation="vertical" tools:context="org.example.tarjetas.MainActivity"> <!-- Tarjeta --> <android.support.v7.widget.CardView android:layout_margin="5dp" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hola Mundo Cruel"/> </android.support.v7.widget.CardView> <!-- Tarjeta:end --> </LinearLayout>
el contenido entre <!– Tarjeta –>…<!– Tarjeta:end –> es lo mínimo necesario para trabajar con cardview, es decir, declaramos el contenedor (cardview) y su contenido (en este caso un TextView)
ejecuta y podrás ver en pantalla algo como esto:
CardView cuenta con algunas propiedades que nos permiten personalizar las tarjetas:
Reemplaza el contenido entre <!– Tarjeta –>…<!– Tarjeta:end –> por:
<!-- Tarjeta --> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" card_view:cardCornerRadius="8dp" card_view:cardElevation="5dp" card_view:cardBackgroundColor="#ff7c58" android:layout_margin="10dp" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hola Mundo Cruel\n¿Como estas hoy?\nYo bien :)"/> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" card_view:cardCornerRadius="50dp" card_view:cardElevation="8dp" card_view:cardBackgroundColor="#ff110d" android:layout_gravity="center|center" android:layout_width="wrap_content" android:layout_height="wrap_content"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:src="@mipmap/ic_launcher" android:layout_gravity="center|center" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FFF" android:gravity="center|center" android:text="Android Bolivia"/> </LinearLayout> </android.support.v7.widget.CardView> <!-- Tarjeta:end -->
Ejecuta la aplicación
Tenemos dos tarjetas personalizadas, podemos observar en el segundo ejemplo que CardView al ser un contenedor, podemos colocar más de un objeto para realizar nuestro diseño.
Finalmente presentamos un ejemplo más elaborado de lo que se puede hacer con un CardView, se usaron LinearLayout, TextView, ImageView y algunas imágenes sacadas de Google Tiempo, inténtalo haber como te queda:
Eso es todo por el momento, en post futuros veremos como trabajar con Tarjetas (Cardview) y listas (RecyclerView).
IMPORTANTE: Si tienes algún problema al ejecutar los ejemplos de este de este post y el error que tienes, tiene que ver con VectorDrawableCompat, debes actualizar tu GRADLE
enjoy!!!
Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.
Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye
Enjoy! :)
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...
En esta ocasión vemos un ejemplo sencillo de como usar Tile Map en nuestros juegos android con la librería LibGDX utiliz...
En este post, crearemos una tabla swing que implemente un control jcombobox en una columna de una tabla, llenaremos con...
En este segundo post sobre Android y SQLite, veremos el uso de los métodos de gestión de base de datos más utilizados, e...
La tecnología de HTML5 y javascript nos permite crear gráficos interactivos livianos sin tener que recurrir a flash, el...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...