Cómo crear una app de tarjeta de cumpleaños

1. Introducción

En este codelab, compilarás una app para Android simple que muestra texto. Podrás posicionar el texto en la pantalla para comprender más sobre los componentes de la interfaz de usuario (IU) de Android.

Requisitos previos

• Comprender cómo crear una app nueva en Android Studio
• Comprender cómo ejecutar una app en el emulador o en tu dispositivo Android

Qué aprenderás

• ¿Qué son los elementos de la interfaz de usuario, como Views y ViewGroups?
• Cómo mostrar texto en un TextView en una app
• Cómo establecer atributos, como texto, fuente y margen en un TextView

Qué compilarás

• Una app para Android que muestra un saludo de cumpleaños en formato de texto

Así se verá tu app cuando hayas terminado.

Requisitos

• Una computadora que tenga Android Studio instalado

2. Cómo configurar la app de Happy Birthday

Cómo crear un proyecto de actividad vacía

1. Para comenzar, crea un nuevo proyecto de Kotlin en Android Studio con la plantilla Empty Activity.
2. Asígnale a la app el nombre "Happy Birthday" con un nivel de API 19 (KitKat) como mínimo.

Importante: Si no sabes cómo crear un proyecto nuevo en Android Studio, consulta Cómo crear y ejecutar tu primera app para Android para obtener más detalles.

3. Ejecuta la app, que debería tener el siguiente aspecto.

Cuando creaste esta app de feliz cumpleaños con la plantilla "Empty Activity", Android Studio configuró recursos para una aplicación básica, incluido un mensaje "Hello World" en el medio de la pantalla. En este codelab, aprenderás cómo puede llegar ese mensaje, cómo cambiar el texto para que sea más que un saludo de cumpleaños y cómo agregar mensajes adicionales y aplicarles formato.

Acerca de las interfaces de usuario

La interfaz de usuario (IU) de una app es lo que ves en la pantalla: texto, imágenes, botones y muchos otros tipos de elementos. Así es como la app muestra elementos al usuario y cómo este interactúa con ella.

Cada uno de estos elementos se denomina View. Casi todo lo que ves en la pantalla de tu app es una View. Las Views pueden ser interactivas, como un botón en el que se puede hacer clic o un campo de entrada editable.

En este codelab, trabajarás con un tipo de View que se usa para mostrar texto: TextView.

Las Views de una app para Android no solo flotan en la pantalla por su cuenta. Hay una relación entre las Views. Por ejemplo, una imagen puede estar junto a un texto, y los botones pueden formar una fila. Para organizar las Views, colócalas en un contenedor. Un ViewGroup es un contenedor en el que pueden encontrarse objetos View y es responsable de organizar las Views que contiene. La disposición, o el diseño, puede cambiar según el tamaño y la relación de aspecto de la pantalla del dispositivo Android donde se ejecuta la app. El diseño puede adaptarse según si el dispositivo está en modo horizontal o vertical.

Un tipo de ViewGroup es un ConstraintLayout, que te ayuda a organizar las Views de manera flexible.

Acerca del editor de diseño

Crear la interfaz de usuario mediante la organización de Views y ViewGroups es una parte importante de la creación de una app para Android. Android Studio proporciona una herramienta que te permite hacerlo: el editor de diseño. Utilizarás el editor de diseño para cambiar el mensaje "Hello World!" por "Happy Birthday!" y, más adelante, modificarás su estilo.

El editor de diseño muestra muchos elementos cuando se abre. En este codelab, aprenderás a usar la mayoría de ellos. Usa la siguiente captura de pantalla con anotaciones para obtener ayuda para reconocer las ventanas del editor de diseño. Obtendrás más información acerca de cada parte a medida que modifiques la app.

• A la izquierda (1), aparece la ventana Project, que ya viste antes. Muestra todos los archivos que contiene tu proyecto.
• En el centro, puedes ver dos dibujos, (4) y (5), que representan el diseño de la pantalla de tu app. La representación de la izquierda (4) es una aproximación de cómo se verá tu pantalla cuando se ejecute la app. Se llama vista Design.
• La representación de la derecha (5) es la vista Blueprint, que puede ser útil para operaciones específicas.
• Palette (2) contiene listas de diferentes tipos de Views que puedes agregar a tu app.
• Component Tree (3) es una representación diferente de las vistas de la pantalla. Muestra todas las vistas que haya.
• En el extremo derecho (6) está Attributes, que muestra los atributos de una View y te permite cambiarlos.

Obtén más información sobre el editor de diseño y cómo configurarlo en la guía de referencia para desarrolladores.

Captura de pantalla con anotaciones de todo el editor de diseño:

Realicemos algunos cambios en el Editor de diseño para que tu app sea más similar a una tarjeta de cumpleaños.

Cómo cambiar el mensaje Hello World

1. En Android Studio, busca la ventana Project.
2. Toma nota de estas carpetas y archivos: la carpeta app contiene la mayoría de los archivos de la app que cambiarás. En res se encuentran los recursos como imágenes o diseños de pantalla. La carpeta layout es para diseños de pantalla. El archivo activity_main.xml contiene una descripción del diseño de la pantalla.
3. Expande la carpeta app, luego res y, por último, layout.
4. Haz doble clic en activity_main.xml. Este abre activity_main.xml en el editor de diseño y se mostrará el diseño que describe en la vista Design.

5. Consulta la lista de vistas en Component Tree. Observa que hay un ConstraintLayout y una TextView debajo, que representan la IU de tu app. TextView tiene sangría porque se encuentra dentro de ConstraintLayout. A medida que agregues más Views a ConstraintLayout, se agregarán a esta lista.
6. Observa que TextView tiene la frase "Hello World!" a su lado y este es el texto que ves cuando ejecutas la app.

7. En Component Tree, haz clic en TextView.
8. Busca Attributes a la derecha.
9. Busca la sección Declared Attributes.
10. Observa que el atributo text de la sección Declared Attributes contiene Hello World!.

El atributo text enseña el texto que se muestra dentro de una TextView.

11. Haz clic en el atributo text donde está el texto Hello World!.
12. Cámbialo para que diga Happy Birthday! y, luego, presiona la tecla Intro. Si ves una advertencia sobre una cadena codificada, no te preocupes por ahora. En el siguiente codelab, aprenderás a deshacerte de esa advertencia.
13. Observa que cambió el texto en Design View. Esto es genial, ya que puedes ver los cambios de inmediato.
14. Ejecuta tu app. Ahora dice Happy Birthday!

¡Buen trabajo! Realizaste los primeros cambios en una app para Android.

3. Cómo agregar TextViews al diseño

La tarjeta de cumpleaños que estás compilando no se parece a lo que tienes en tu app ahora. En lugar del texto pequeño en el centro, necesitas dos mensajes más grandes: uno en la esquina superior izquierda y otro en la esquina inferior derecha. En esta tarea, borrarás la TextView existente y agregarás dos TextViews nuevas, además de aprender a ubicarlas en ConstraintLayout.

Cómo borrar la TextView actual

1. En el editor de diseño, haz clic para seleccionar TextView en el centro del diseño.

2. Presiona la tecla Borrar. Android Studio borrará la TextView, y tu app mostrará solo una ConstraintLayout en el editor de diseño y en el Component Tree.

Cómo agregar una TextView

En este paso, agregarás una TextView en la parte superior izquierda de la app a modo de saludo de cumpleaños.

La opción Palette, en la parte superior izquierda del editor de diseño, contiene listas de diferentes tipos de Views, organizados por categoría, que puedes agregar a tu app.

1. Busca TextView. Aparece tanto en la categoría Common como en Text.

2. Arrastra una TextView desde Palette hasta la parte superior izquierda de la superficie de diseño en el editor de diseño y suéltala. No es necesario que la arrastres hasta el lugar exacto. Solo déjala cerca de la esquina superior izquierda.

3. Observa que se agregó una TextView y presta atención al signo de exclamación rojo que aparece en Component Tree.
4. Coloca el cursor sobre el signo de exclamación y verás un mensaje de advertencia que indica que la vista no está restringida y que pasará a una posición diferente cuando ejecutes la app. Debes corregir esto en el siguiente paso.

Cómo posicionar la TextView

Para la tarjeta de cumpleaños, la TextView debe estar cerca de la esquina superior izquierda con un poco de espacio. Para corregir la advertencia, agregarás algunas restricciones a la TextView, que le indicarán a tu app cómo posicionarla. Las restricciones son instrucciones y limitaciones para las situaciones en las que una View puede estar en un diseño.

Las restricciones que agregues a la parte superior y a la izquierda tendrán márgenes. Un margen especifica qué tan lejos está una View de un borde de su contenedor.

1. A la derecha, en Attributes, busca Constraint Widget en la sección Layout. El cuadrado representa tu vista.

2. Haz clic en el signo + que aparece en la parte superior del cuadrado. Esto se aplica a las restricciones ubicadas entre la parte superior de tu vista de texto y el borde superior del diseño de restricción.
3. Aparecerá un campo con un número para establecer el margen superior. El margen es la distancia entre la TextView y el borde del contenedor, ConstraintLayout. El número que verás será diferente según el momento en el que hayas soltado la TextView. Cuando configuras el margen superior, Android Studio también agrega automáticamente una restricción desde la parte superior de la vista de texto hasta la parte superior de ConstraintLayout.

4. Cambia el margen superior a 16.

5. Haz lo mismo con el margen izquierdo.

6. Configura text para desearle a tu amigo un feliz cumpleaños (por ejemplo, "¡Happy Birthday, Sam!") y, luego, presiona Intro.

7. Observa que la vista Design se actualiza para mostrar cómo se verá tu app.

Cómo agregar y posicionar otra TextView

Tu tarjeta de cumpleaños necesita una segunda línea de texto cerca de la esquina inferior derecha, que agregarás en este paso del mismo modo que en la tarea anterior. ¿Cuáles crees que deberían ser los márgenes de esta TextView?

1. Arrastra una nueva TextView desde Palette y suéltala cerca de la parte inferior derecha de la vista de la app en el editor de diseño.

2. Establece un margen derecho de 16.
3. Establece un margen inferior de 16.

4. En Attributes, establece el text para firmar tu tarjeta; por ejemplo, "From Emma".
5. Ejecuta la app. Deberías ver tu deseo de feliz cumpleaños en la esquina superior izquierda y tu firma en la esquina inferior derecha.

¡Felicitaciones! Agregaste y posicionaste algunos elementos de la IU de tu app.

4. Cómo agregar estilo al texto

Agregaste texto a tu interfaz de usuario, pero aún no parece la app final. En esta tarea, aprenderás a cambiar el tamaño, el color del texto y otros atributos que afectan el aspecto de TextView. También puedes experimentar con diferentes fuentes.

1. Haz clic en la primera TextView de Component Tree y busca la sección Common Attributes de la ventana Attributes. Es posible que debas desplazarte hacia abajo para encontrarlo.
2. Observa los distintos atributos, como fontFamily, textSize y textColor.

3. Busca textAppearance.
4. Si textAppearance no está expandido, haz clic en el triángulo hacia abajo.
5. En textSize, establece el valor de textSize en 36sp.

6. Observa el cambio en el editor de diseño.

7. Cambia fontFamily a casual.
8. Prueba con otras fuentes para ver cómo lucen. Encontrarás más opciones para fuentes en la parte inferior de la lista, en More Fonts…
9. Cuando termines de probar diferentes fuentes, establece fontFamily en sans-serif-light.
10. Haz clic en el cuadro de edición del atributo textColor y comienza a escribir black. Observa que, a medida que escribes, Android Studio muestra una lista de colores que contienen el texto que escribiste hasta el momento.

11. Selecciona @android:color/black en la lista de colores y presiona Intro.
12. En la TextView que tiene tu firma, cambia textSize, textColor y fontFamily para que coincidan.
13. Ejecuta tu app y observa el resultado.

¡Felicitaciones! Realizaste los primeros pasos para crear una app de tarjeta de cumpleaños.

5. Solución

1. Navega a la página de repositorio de GitHub del proyecto.
2. Verifica que el nombre de la rama coincida con el especificado en el codelab. Por ejemplo, en la siguiente captura de pantalla, el nombre de la rama es main.

3. En la página de GitHub de este proyecto, haz clic en el botón Code, el cual abre una ventana emergente.

4. En la ventana emergente, haz clic en el botón Download ZIP para guardar el proyecto en tu computadora. Espera a que se complete la descarga.
5. Ubica el archivo en tu computadora (probablemente en la carpeta Descargas).
6. Haz doble clic en el archivo ZIP para descomprimirlo. Se creará una carpeta nueva con los archivos del proyecto.

Abre el proyecto en Android Studio

1. Inicia Android Studio.
2. En la ventana Welcome to Android Studio, haz clic en Open.

Nota: Si Android Studio ya está abierto, selecciona la opción de menú File > Open.

3. En el navegador de archivos, ve hasta donde se encuentra la carpeta del proyecto descomprimida (probablemente en Descargas).
4. Haz doble clic en la carpeta del proyecto.
5. Espera a que Android Studio abra el proyecto.
6. Haz clic en el botón Run para compilar y ejecutar la app. Asegúrate de que funcione como se espera.

6. Resumen

• El editor de diseño te ayuda a crear la IU para tu app.
• Casi todo lo que ves en la pantalla de tu app es una View.
• Una TextView es un elemento de la IU para mostrar texto en tu app.
• Un ConstraintLayout es un contenedor de otros elementos de la IU.
• Las Views deben restringirse de forma horizontal y vertical dentro de un ConstraintLayout.
• Una forma de posicionar una View es con un margen.
• Un margen indica hasta qué distancia se encuentra una View de un borde del contenedor en el que se encuentra.
• Puedes establecer atributos en una TextView, como la fuente, el tamaño del texto y el color.

7. Más información

• Vocabulario de conceptos básicos de Android en Kotlin
• View
• TextView
• ConstraintLayout
• dp frente a sp
• Editor de diseño en Android Studio