Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Material Design: CardView (Tarjetas)

Material Design: CardView (Tarjetas)

Autor jc mouse lunes, mayo 29, 2017

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

tarjeta android

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:

gradle dependencies

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:

material

CardView cuenta con algunas propiedades que nos permiten personalizar las tarjetas:

  • cardCornerRadius: Radio de las esquinas
  • cardElevation: Sombra
  • cardBackgroundColor: Color de fondo de la tarjeta

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

cardCornerRadius

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:

time bolivian

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!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

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! :)

También Te Podría Interesar

Blog MVC – Iniciando el proyecto [p2]

Blog MVC – Iniciando el proyecto [p2]

Segunda parte del tutorial [Crea tu blog con el patrón MVC y php]. En esta 2da parte toca ver lo que es la creación del...

Autenticación en php con MySql y POO

Autenticación en php con MySql y POO

Autenticación en una pagina web es el proceso de confirmar que un usuario es quien dice ser, asi de simple. En el siguie...

WhatsApp: Aprende a usar la nueva función ‘Estado’

WhatsApp: Aprende a usar la nueva función ‘Estado’

A continuación te mostramos una guía sobre la nueva nueva función ‘estado‘ de WhatsApp.  Primero que nada, a...

JSON Web Tokens: Teoría y práctica

JSON Web Tokens: Teoría y práctica

En este post aprenderemos lo que es un JSON Web Token, como crear nuestro propio token de acceso y como usarlo en un Ser...

“Hola Bolivia” mi primera aplicación android

“Hola Bolivia” mi primera aplicación android

Cuando se inicia el aprendizaje de un lenguaje de programación, nunca debe faltar el clásico “Hola Mundo” 🙂...

Activar/Desactivar Bluetooth

Activar/Desactivar Bluetooth

En este tutorial crearemos una aplicación sencilla para activar y desactivar el bluetooth de nuestros teléfonos intelige...

Deja un comentario

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

*

Comparte lo que sabes

Categorias

Últimas entradas

Secret (https://getsecret.now.sh/) es una aplicación web gratuita que te permite enviar mensajes temporales cifrados que...

PHPUnit es un framework que se utiliza para escribir tests en PHP, Netbeans nos permite configurarlo y usarlo fácilmente...

Una Prueba Unitaria, es una forma de comprobar que nuestro código, hace lo que se supone debe hacer; es decir, se asegur...

La prueba del camino básico, es una prueba de “caja blanca” que consiste en verificar el código de nuestros...

Android Bolivia

Bandera en Alto