Cómo agregar imágenes a tu app para Android

1. Introducción

En este codelab, aprenderás a agregar imágenes a tu app usando una ImageView.

Requisitos previos

• Cómo crear y ejecutar una app nueva en Android Studio
• Cómo agregar y quitar elementos, así como configurar atributos en TextViews usando el editor de diseño

Qué aprenderás

• Cómo agregar una imagen o foto a tu app para Android
• Cómo mostrar una imagen en tu app usando una ImageView
• Cómo extraer texto a un recurso de strings para facilitar la traducción de tu app y reutilizar las strings
• Cómo hacer que tu app pueda ser usada por la mayor cantidad de personas

Qué compilarás

• Extender la app de Happy Birthday para agregar una imagen

Requisitos

• Una computadora que tenga Android Studio instalado
• La app del codelab Cómo crear una app de tarjeta de cumpleaños

2. Configura la app

1. Abre tu proyecto del codelab anterior de Android Studio. Puedes usar el código de la solución o el que creaste. Cuando ejecutes la app, debería verse así.

Agrega una imagen a tu proyecto

En esta tarea, descargarás una imagen de Internet y la agregarás a la app de Happy Birthday.

1. Haz clic aquí para acceder a la imagen de tu tarjeta de cumpleaños en GitHub.
2. Haz clic en el botón Download que aparece a la derecha. Se mostrará la imagen sola.

3. Haz clic con el botón derecho en la imagen y guarda el archivo en tu computadora como androidparty.png. Toma nota de dónde la guardaste (por ejemplo, en la carpeta Descargas).
4. En Android Studio, haz clic en View > Tool Windows > Resource Manager en los menús o en la pestaña Resource Manager, a la izquierda de la ventana Project.
5. Haz clic en + debajo de Resource Manager y selecciona Import Drawables. Se abrirá un navegador de archivos.

6. En el navegador de archivos, busca el archivo de imagen que descargaste y haz clic en Open.
7. Presiona Next. Android Studio te muestra una vista previa de la imagen.
8. Haz clic en Import.
9. Si la imagen se importó correctamente, Android Studio la agregará a tu lista Drawable. En esa lista se incluyen todos los íconos e imágenes de tu app. Ahora, puedes usar la imagen en tu app.

10. Para regresar a la vista de proyectos, haz clic en View > Tool Windows > Project en los menús o en la pestaña Project del extremo izquierdo.
11. Para confirmar que la imagen se encuentre en la carpeta drawable de tu app, expande app > res > drawable.

3. Agrega una ImageView

Para mostrar una imagen en tu app, es necesario mostrar un lugar. Así como usas una TextView para mostrar texto, puedes usar una ImageView para mostrar imágenes.

En esta tarea, agregarás una ImageView a tu app y harás que su imagen sea la imagen del pastelillo que descargaste anteriormente. Luego, deberás posicionarla y ajustar su tamaño para que ocupe toda la pantalla.

Cómo agregar una ImageView y configurar su imagen

1. En la ventana Project, abre activity_main.xml (app > res > layout > activity_main.xml).

2. En el editor de diseño, ve a Palette y arrastra una ImageView a tu app. Suéltala cerca del centro y sin que se superponga con el texto.

Se abrirá el cuadro de diálogo Pick a Resource. En ese diálogo, se muestran todos los recursos de imagen disponibles para tu app. Observa la imagen de cumpleaños que aparece en la pestaña Drawable. Un recurso de elementos de diseño es un concepto general de un gráfico que se puede dibujar en la pantalla. Incluye imágenes, mapas de bits, íconos y muchos otros tipos de recursos dibujados.

3. En el diálogo Pick a Resource, elige la imagen del pastelillo de la lista Drawable.
4. Haz clic en la imagen y, luego, en OK.

Se agregará la imagen a tu app, pero es probable que no esté en el lugar correcto y que no ocupe toda la pantalla. Deberás corregir eso en el siguiente paso.

Posición y tamaño de ImageView

1. Haz clic en la ImageView y arrástrala hasta el editor de diseño. Ten en cuenta que, a medida que la arrastras, aparece un rectángulo rosa alrededor de la pantalla de la app en la vista Design. El rectángulo rosado indica los límites de la pantalla para ubicar tu ImageView.
2. Arrastra la ImageView para que los bordes izquierdo y derecho se alineen con el rectángulo rosado. Android Studio "arrastrará" la imagen a los bordes cuando estés cerca. (Te encargarás de las partes inferior y superior en unos minutos).

Las Views de un ConstraintLayout debe tener restricciones horizontales y verticales para indicarle a ConstraintLayout cómo posicionarlas. Agregarás esos elementos a continuación.

3. Mantén el puntero sobre el círculo en la parte superior del contorno de ImageView, y se destacará con otro círculo.
4. Arrastra el círculo hacia la parte superior de la pantalla de la app, y una flecha conectará el círculo con el puntero mientras arrastras. Arrastra hasta que se ajuste a la parte superior de la pantalla. Agregaste una restricción desde la parte superior de la ImageView hasta la parte superior del ConstraintLayout.

5. Agrega una restricción desde la parte inferior de la ImageView hasta la parte inferior del ConstraintLayout. Es posible que esté demasiado cerca del borde para arrastrar como lo hiciste con la parte superior. En ese caso, puedes hacer clic en el signo +, en la parte inferior de Constraint Widget, en la ventana Attributes, para agregar una restricción. Asegúrate de que el margen sea 0.

6. En el panel Attributes, usa Constraint Widget para agregar un margen de 0 a la izquierda y la derecha. Se creará automáticamente una restricción en esa dirección.

La imagen ahora estará centrada, pero aún no ocupa toda la pantalla. Eso se corregirá en los siguientes pasos:

7. Debajo de Constraint Widget, en la sección Constraints, establece layout_width en 0dp (match constraint). 0dp sirve para indicarle a Android Studio que use match constraint para el ancho de ImageView. Debido a las restricciones que acabas de agregar, será más ancha que el ConstraintLayout, menos los márgenes.

8. Establece layout_height en 0dp (match constraint). Debido a las restricciones que agregaste, la ImageView será tan alta como el ConstraintLayout, menos cualquier margen.

9. La ImageView es tan ancha y alta como la pantalla de la app, pero la imagen se centra dentro de la ImageView, y hay un espacio en blanco encima y debajo de la imagen. Como eso no es muy atractivo, ajusta el valor de scaleType de la ImageView, que indica cómo ajustar el tamaño de la imagen y alinearla. Obtén más información sobre el ScaleType en la guía de referencia para desarrolladores. Ahora, tu app debería verse como se muestra a continuación.

10. Busca el atributo scaleType. Es posible que debas desplazarte hacia abajo o buscar ese atributo. Intenta configurar valores diferentes para scaleType a fin de ver qué hacen.

11. Cuando termines, establece scaleType como centerCrop, ya que hace que la imagen ocupe la pantalla sin distorsiones.

Ahora la imagen del pastelillo debe ocupar toda la pantalla, como se muestra a continuación.

Sin embargo, ahora no puedes ver tu saludo de cumpleaños ni la firma. Deberás corregir eso en el siguiente paso.

Cómo mover la ImageView detrás del texto

Después de que la ImageView ocupe toda la pantalla, ya no podrás ver el texto. Eso se debe a que la imagen ahora cubre el texto. Resulta que el orden de los elementos de la IU es importante. Agregaste las TextViews primero y, luego, la ImageView, lo que significa que apareció en la parte superior. Cuando agregas vistas a un diseño, estas se agregan al final de una lista de vistas y se dibujan en el orden en que aparecen en la lista. Se agregó la ImageView al final de la lista de Views en el ConstraintLayout, lo que significa que se dibujó en último lugar y encima de las TextViews. Para solucionar ese problema, cambiarás el orden de las vistas y moverás la ImageView al principio de la lista para que se dibuje primero.

En Component Tree, haz clic en la ImageView y arrástrala encima de las TextViews para que se encuentre debajo del ConstraintLayout. Aparecerá una línea azul con un triángulo que muestra el destino de la ImageView. Deja la ImageView justo debajo del ConstraintLayout.

La ImageView ahora debe estar primera en la lista debajo del ConstraintLayout, con las TextViews después de él. Ahora deberían poder verse los mensajes "Happy Birthday, Sam!" y "From Emma". (Por ahora, ignora la advertencia que indica que falta la descripción del contenido).

¡Felicitaciones! Agregaste una imagen a tu app para Android.

4. Implementa las prácticas recomendadas de codificación

Cuando agregaste las TextViews en el codelab anterior, Android Studio las marcó con triángulos de advertencia. En este paso, corregirás esas advertencias y también la correspondiente a la ImageView.

Traducciones

A la hora de escribir apps, es importante recordar que podrían traducirse a otro idioma. Como aprendiste en un codelab anterior, una string es una secuencia de caracteres como "Happy Birthday, Sam!".

Una string codificada es una que se escribe directamente en el código de tu app. Las strings codificadas hacen que sea más difícil traducir tu app a otros idiomas y dificultan la reutilización de una string en diferentes lugares de la app. Puedes resolver esos problemas "extrayendo strings en un archivo de recursos". Eso significa que, en lugar de codificar la string en tu código, debes colocarla en un archivo, asignarle un nombre y utilizar el nombre siempre que quieras usar esa string. El nombre seguirá siendo el mismo, incluso si cambias la string o la traduces a otro idioma.

1. Haz clic en el triángulo naranja junto a la primera TextView con "Happy Birthday, Sam!". Android Studio abrirá una ventana con más información y una solución sugerida. Es posible que debas desplazarte hacia abajo para ver Suggested Fix.

2. Haz clic en el botón Fix. Android Studio abrirá el diálogo Extract Resource. En él, podrás personalizar cómo se llamará tu recurso de strings y algunos detalles sobre cómo almacenarlo. Resource name es el nombre que tendrá la string. Resource value será la string real.
3. En el diálogo Extract Resource, cambia Resource name a happy_birthday_text. Los recursos de strings deben tener nombres en minúscula y, si hay más de una palabra, estas deben estar separadas por un guión bajo. Deja las otras opciones de configuración con sus valores predeterminados.

4. Haz clic en el botón OK.
5. En el panel Attributes, encuentra el atributo text y observa que Android Studio lo configuró automáticamente como @string/happy_birthday_text.

6. Abre strings.xml (app > res > values > strings.xml) y observa que Android Studio creó un recurso de strings llamado happy_birthday_text.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

El archivo strings.xml tiene una lista de strings que el usuario verá en la app. Ten en cuenta que el nombre de tu app también es un recurso de strings. Si colocas todas las strings en un solo lugar, podrás traducir de manera sencilla todo el texto de tu app y volver a usar más fácilmente una string en diferentes partes de tu app.

7. Sigue los mismos pasos para extraer el texto de la TextView de firma y asigna el nombre signature_text al recurso de strings.

El código final debería verse de la siguiente manera:

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

Cómo verificar la accesibilidad de tu app

Si sigues las prácticas recomendadas de codificación para accesibilidad, todos los usuarios, incluidos los que tienen discapacidades, podrán interactuar con tu app y navegar por ella con mayor facilidad.

Android Studio proporciona sugerencias y advertencias para ayudarte a que tu app sea más accesible.

1. En Component Tree, observa el triángulo naranja junto a la ImageView que agregaste anteriormente. Si colocas el cursor sobre él, verás información sobre la herramienta con una advertencia causada por un atributo "contentDescription" que falta en la imagen. Una descripción de contenido puede hacer que tu app sea más útil con TalkBack, ya que define el propósito del elemento de IU.

Sin embargo, la imagen de esta app solo se incluye con fines decorativos. En lugar de configurar la descripción del contenido que se anuncia al usuario, puedes indicarle a TalkBack que omita la ImageView estableciendo su atributo importantForAccessibility como no.

2. En Component Tree, selecciona la ImageView.
3. En la ventana Attributes, en la sección All Attributes, busca importantForAccessibility y establece ese campo como no.

Desaparecerá el triángulo naranja junto a la ImageView.

4. Vuelve a ejecutar la app para asegurarte de que siga funcionando correctamente.

¡Felicitaciones! Agregaste una imagen a tu app de Happy Birthday, seguiste las pautas de accesibilidad y facilitaste la traducción a otros idiomas.

5. Código de solución

El código de la solución de la app de Happy Birthday se subió a GitHub, en caso de que quieras ver el resultado final.

GitHub es un servicio que permite que los desarrolladores administren el código de sus proyectos de software. Utiliza Git, un sistema de control de versión que realiza un seguimiento de los cambios realizados para cada versión de código. Si alguna vez viste el historial de versiones de un documento de Google, puedes consultar cuándo y qué cambios se realizaron en el pasado. Del mismo modo, puedes realizar un seguimiento del historial de versiones del código de un proyecto. Es muy útil si trabajas en un proyecto tanto por tu cuenta como en equipo.

GitHub también tiene un sitio web en el que puedes ver y administrar tu proyecto. Este vínculo de GitHub te permite explorar en línea los archivos del proyecto de Happy Birthday o descargarlos en tu computadora.

A fin de obtener el código necesario para este codelab y abrirlo en Android Studio, haz lo siguiente:

Obtén el código

1. Haz clic en la URL proporcionada. Se abrirá la página de GitHub del proyecto en un navegador.
2. En esa página, haz clic en el botón Code, que abre un cuadro de diálogo.

3. En el cuadro de diálogo, haz clic en el botón Download ZIP para guardar el proyecto en tu computadora. Espera a que se complete la descarga.
4. Ubica el archivo en tu computadora (probablemente en la carpeta Descargas).
5. 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 an existing Android Studio project.

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

3. En el cuadro de diálogo Import Project, navega hasta donde se encuentra la carpeta de proyecto descomprimido (probablemente en Descargas).
4. En la carpeta del proyecto, selecciona la carpeta Happy Birthday.
5. Haz clic en Open.
6. Espera a que Android Studio abra el proyecto.
7. Haz clic en el botón Run para compilar y ejecutar la app. Asegúrate de que funcione como se espera.
8. Explora los archivos del proyecto en la ventana de herramientas Project para ver cómo se configuró la app.

6. Resumen

• Resource Manager de Android Studio te permite agregar y organizar tus imágenes y otros recursos.
• Una ImageView es un elemento de la IU para mostrar imágenes en tu app.
• Las ImageViews deben tener una descripción de contenido que ayude a mejorar la accesibilidad de tu app.
• El texto que se muestra al usuario, como el saludo de cumpleaños, debe extraerse en un recurso de strings para que sea más fácil traducir la app a otros idiomas.

7. Más información

• Vocabulario de conceptos básicos de Android en Kotlin
• Resource Manager en Android Studio
• Clase ImageView
• Accesibilidad
• Cómo admitir diferentes idiomas
• Cómo empezar a usar GitHub

8. Practica por tu cuenta

Haz lo siguiente:

1. Crea tu propia app de tarjetas de cumpleaños en función de tu diseño.
2. Para comenzar, piensa en qué Views necesitarás.
3. ¿En qué orden te sería más fácil agregarlas?
4. ¿Qué imágenes debes agregar a la carpeta de elementos de diseño?

Hay dos tipos de imágenes de mapas de bits que se usan comúnmente en apps para Android: archivos JPEG y PNG. Los archivos PNG pueden tener áreas transparentes (vacías). Obtén más información sobre los formatos de imagen en la referencia para desarrolladores.

5. Recuerda colocar primero las Views con restricciones y márgenes, y, luego, definir el estilo.
6. Para que el texto se destaque más en algunas imágenes, experimenta con shadowColor, shadowDx, shadowDy y shadowRadius.

Revisa tu trabajo

La app terminada debería ejecutarse sin errores y mostrar la tarjeta de cumpleaños que diseñaste.

¡Felicitaciones! Terminaste de crear tu propia app de tarjetas de cumpleaños. Comparte tu trabajo en las redes sociales y usa el hashtag #LearningKotlin para que podamos verlo.