Advertisement
  1. Code
  2. Android SDK

Crea una aplicación Android simple: una tarjeta de presentación digital

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Con el incremento en la cantidad de interacciones físicas que se han vuelto virtuales, es esencial que te adaptes a nuevas maneras de presentarte. Dar tarjetas de presentación era una excelente manera de establecer contactos en eventos en el pasado. Sin embargo, dado que la mayoría de los eventos se han vuelto virtuales, ¿por qué no convertir tu tarjeta de presentación también?

En este tutorial aprenderás los conceptos fundamentales del uso de las vistas básicas de Android Studio, como TextViewImageView y grupos de vistas como ConstraintLayout. Al final de este tutorial, crearás una versión digital de tu propia tarjeta de presentación en forma de una aplicación ¡que puede compartirse con cualquier persona que conozcas!

Requisitos previos

Para seguir los pasos de este tutorial, necesitarás:

Puedes aprender cómo instalar Android Studio aquí en Envato Tuts+.

1. El diseño

Antes de pasar a Android Studio, veamos el diseño de ejemplo de la tarjeta de presentación que vamos a convertir en una aplicación Android. Una excelente manera de visualizar lo que quieres crear es dibujarlo en una hoja de papel o hacer un boceto en un software de ilustración. El diseño a continuación es un bosquejo creado en Figma.

Business card app design made in Figma

2. Configura un proyecto nuevo en Android Studio

Para crear un proyecto nuevo para tu tarjeta de presentación, comienza ejecutando Android Studio.

Verás la ventana Welcome to Android Studio (Bienvenido a Android Studio). Selecciona Start a new Android project (Iniciar un nuevo proyecto de Android). Verás algunas opciones de plantillas de inicio; elige Empty Activity (Actividad vacía) de entre los tipos de actividades listadas.

A continuación dale a tu proyecto un nombre descriptivo. En nuestro caso, simplemente lo llamaremos "Business Card App" ("Aplicación de tarjeta de presentación"). Mantén el resto de las configuraciones con sus valores predeterminados.

Project Setup DetailsProject Setup DetailsProject Setup Details

Una vez que hayas terminado, Android Studio generará tu proyecto.

3. El diseño de la distribución

Ahora que tenemos un nuevo proyecto, ¡necesitamos diseñar la tarjeta! El diseño que se mostrará a lo largo de la aplicación tiene su origen en los archivos de diseño de Android Studio. Veamos cómo personalizarlos.

Primero cambia a la vista de archivos de Android haciendo clic en el menú desplegable del panel Project (Proyecto). Expande la carpeta app > res > layout. Abre activitymain.xml desde el interior de esa carpeta haciendo doble clic en el nombre del archivo. activitymain.xml es en donde se define el diseño de tu actividad principal.

activitymain.xml Hierarchyactivitymain.xml Hierarchyactivitymain.xml Hierarchy

Tienes tres formas de trabajar en el diseño de la actividad en cualquier archivo de diseño:

  1. Code (Código): aquí es en donde puedes escribir el código de tu diseño en XML.
  2. Design (Diseño): aquí es en donde puedes agregar vistas simplemente arrastrando y soltando en el área visible.
  3. Split (Dividido): aquí es en donde trabajas en el diseño con la función de arrastrar y soltar y con el código XML lado a lado.

En este tutorial vamos a usar las vistas de código y de diseño. Existen otros dos paneles que necesitas conocer para la vista de diseño:

  • Palette (Paleta): aquí es en donde puedes ver algunas de las vistas y widgets más comúnmente utilizados.
  • Component Tree (Árbol de componentes): a medida que agregas diferentes vistas y grupos de vistas a tu pantalla, la jerarquía de los elementos se muestra aquí.
Palette and treePalette and treePalette and tree

Introducción a Constraint Layout

ConstraintLayout es el diseño recomendado para las vistas en Android Studio porque aplana la jerarquía del diseño, creando un código de diseño más simple. Esto significa que cada elemento puede ser directamente un hijo de ConstraintLayout sin crear relaciones anidadas de diseños dentro de diseños.

ConstraintLayout requiere que cada vista tenga al menos una restricción horizontal y una vertical. Si el tamaño de la pantalla cambia, las vistas se ajustan automáticamente a la nueva configuración o ancho de la pantalla.

De forma predeterminada, notarás un ConstraintLayout y un TextView para el texto "Hello World" ("Hola mundo"). Elimina el TextView seleccionándolo en el árbol de componentes y presionando eliminar.

Agrega un Image View

La mayoría de las tarjetas de presentación contienen una imagen profesional de ti o de tu empresa. Para añadir esto, vamos a usar el componente ImageView de Android.

ImageView es responsable de mostrar recursos de imagen conocidos como drawables, o elementos de diseño. Los elementos de diseño son cualquier recurso gráfico que se pueda dibujar o mostrar en la pantalla, como PNGs o formas.

Para mostrar una imagen en el ImageView, necesitarás agregar la imagen al directorio drawable. Puedes hacer esto fácilmente desde el interior de Android Studio. Para añadir una imagen al directorio drawable, primero selecciona el panel Resource Manager (Administrador de recursos). Luego presiona el botón Add Resources to module (Agregar recursos a módulo) y elige Import drawables (Importar elementos de diseño). Ahora selecciona cualquier archivo que sea un elemento de diseño y que quieras que sea el logotipo de tu tarjeta de presentación, y presiona Import (Importar).

Import drawable Import drawable Import drawable

¡Excelente! Ahora que nuestra imagen ha sido añadida al directorio drawable, usémosla en un ImageView.

Primero selecciona ImageView de la sección Palette (Paleta) y arrástralo a la vista de diseño del editor de diseño. Se te pedirá que elijas un elemento de diseño: elige la imagen que importaste en el paso anterior. Agrega un identificador único al image view seleccionando el panel de atributos.

Finalmente, para colocar tu imagen en el diseño selecciona las burbujas en las esquinas del logotipo y arrástralas a los bordes de la pantalla. Esto agregará restricciones verticales y horizontales a la imagen que la mantendrán a escala para llenar toda la actividad.

Alternativamente puedes usar el código XML mostrado a continuación y agregar el ImageView. Asegúrate de cambiar el valor srcCompat por el nombre de tu imagen.

Agrega un Text View

TextView te permite mostrar texto al usuario de la aplicación. Puedes personalizar muchos de sus atributos, como textSizetextColor y textStyle.

Necesitamos mostrar los detalles de la persona, como su nombre, puesto y número telefónico. Puedes agregar un text view de manera similar a como agregamos un image view en la sección anterior. Primero selecciona TextView de la sección Palette (Paleta) y arrástralo a la vista de diseño del editor de diseño.

Ahora, para cambiar el tamaño y la posición del text view, arrastra las burbujas de cada lado a la izquierda y derecha del contenedor padre. Después arrastra la burbuja de la parte superior del TextView a la burbuja de la parte inferior del ImageView.

Alternativamente, esto se puede lograr escribiendo un código XML como el que se muestra a continuación. También puedes modificar atributos como textSizeid y el propio text en el código XML.

De manera similar, necesitamos añadir los TextView restantes a la pantalla y restringirlos en base al TextView anterior. Para hacer esto, sigue el código de ejemplo mostrado a continuación:

Para agregar un separador entre el TextView anterior y aquellos que planeamos crear a continuación, agreguemos una línea horizontal. Aquí ves cómo puedes hacerlo:

¡El propósito de una tarjeta de presentación es crear conexiones! Por lo tanto, no podemos olvidar agregar nuestra información personal. Agreguemos el TextView para nuestro número telefónico, correo electrónico, ubicación y sitio web.

4. La paleta de color

A lo largo de la aplicación, vamos a usar una paleta de color material que creamos usando la herramienta de color en Material.io.

Para añadir los colores adicionales, ve a Res > Values > colors.xml y modifica los valores para que sean los siguientes:

Al ejecutar la aplicación, verás el resultado a continuación:

Final screenshot of appFinal screenshot of appFinal screenshot of app

5. Refactorización

Si usaste la vista de diseño del editor de diseño para arrastrar y soltar vistas, podrás observar que el id se genera aleatoriamente. Tener un id como textView9 no es muy útil, ya que no nos indica qué es lo que muestra el TextView.

Refactorizar y añadir ids descriptivos a las vistas que estás usando en tu proyecto es una buena práctica. De manera similar, otra buena práctica es declarar las cadenas usadas a lo largo de la aplicación en strings.xml. Esto permite que su traducción sea sencilla, en caso de que decidas tener la aplicación en diferentes lenguajes.

Para modificar la declaración de una cadena para cualquiera de los TextView que creamos, primero haz clic en el triángulo de advertencia en el Component Tree (Árbol de componentes). Esto abrirá el mensaje con más detalles y una opción de corrección sugerida. Luego haz clic en Suggested Fix (Corrección sugerida) para permitir que Android Studio resuelva el problema por ti.

Conclusión

En este tutorial te mostré cómo crear tu propia aplicación de tarjeta de presentación usando algunos componentes básicos de Android. Si bien esto es tan solo el comienzo, ¡las posibilidades de expansión son infinitas! Puedes añadir un código QR, múltiples páginas o una función para compartir que dirija a los usuarios a información adicional.

Plantillas prémium para aplicaciones Android de CodeCanyon

Toma en cuenta que puedes usar estas mismas técnicas para comenzar una aplicación usando una de las plantillas para aplicaciones prémium disponibles en CodeCanyon, un mercado en línea que tiene cientos de plantillas para aplicaciones Android muy ricas en funciones y adaptadas a todos los dominios. Puedes ahorrar días, o incluso meses de esfuerzo usando una de ellas.

CodeCanyon mobile Android app template bestsellersCodeCanyon mobile Android app template bestsellersCodeCanyon mobile Android app template bestsellers

Si tienes problemas para decidir qué plantilla de CodeCanyon es la adecuada para ti, estos artículos deberían poder ayudarte:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.