Cómo cargar y mostrar imágenes

Para mostrar imágenes en tu app para el contenido y las respuestas a las acciones del usuario, carga las imágenes desde el disco o desde una fuente externa en Internet. Puedes cargar imágenes de las siguientes maneras:

• Desde el disco
• Desde una red con Coil
• Desde una red con Glide

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Carga una imagen desde el disco

Puedes cargar imágenes almacenadas de forma local desde el disco para mostrarlas en tu app para el contenido y responder a las acciones del usuario.

Dependencias

Carga la imagen

Usa el siguiente código para cargar una imagen almacenada de forma local desde el disco para mostrarla en tu app:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
LoadingImagesSnippets.kt

Puntos clave sobre el código

• Un objeto Image de Compose definido con un atributo painter establecido en un painterResource() que carga una imagen de los recursos de la app.
• Un contentDescription que TalkBack puede leer para que tu app sea más accesible.
• Un stringResource() para cargar la descripción del contenido traducido desde el archivo strings.xml.

Carga una imagen a través de la red

Puedes cargar imágenes almacenadas de forma externa en Internet con Coil o Glide. Para elegir qué biblioteca usar en tu proyecto, considera factores como los requisitos del proyecto y las limitaciones de rendimiento.

Carga una imagen con Coil

Puedes cargar imágenes desde Internet con Coil, una biblioteca de terceros. Coil está respaldado por corrutinas de Kotlin y se responsabiliza de cargar la imagen fuera del subproceso principal y mostrarla una vez cargada. Sigue esta guía para cargar imágenes de Internet con Coil.

Dependencias

Carga la imagen

Usa el siguiente código para cargar imágenes con Coil:

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)
LoadingImagesSnippets.kt

Carga una imagen con Glide

Puedes cargar imágenes almacenadas de forma externa en Internet con Glide para mostrarlas en el feed de tu app. Glide es una biblioteca de carga de imágenes rápida y eficiente para Android enfocada en un desplazamiento fluido, y se responsabiliza de cargar la imagen fuera del subproceso principal y mostrarla una vez cargada.

Dependencias

Carga la imagen

Usa el siguiente código para cargar imágenes con Glide:

GlideImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)
LoadingImagesSnippets.kt

Resultados

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Mostrar imágenes

Descubre técnicas para usar imágenes atractivas y brillantes que le den a tu app para Android un aspecto atractivo.

Colección de guías rápidas

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.

Ir a las Preguntas frecuentes Enviar comentarios