Android Academy · Lección

Carga de imágenes con Coil

Cargue y almacene en caché imágenes de red de forma eficiente con Coil. Aplique transformaciones (CircleCrop, RoundedCorners) y gestione marcadores de posición y errores.

Carga de imágenes con Coil es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 2 de 6. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 6 lecciones en total.

¿Por qué usar una biblioteca de imágenes?

Cargar imágenes desde Internet es sorprendentemente complejo:

Descargarlas en un hilo en segundo plano
Guardarlas en la caché de disco y memoria
Decodificarlas de forma eficiente (para evitar errores de falta de memoria)
Mostrar un marcador de posición mientras se cargan
Gestionar errores (enlace roto o falta de red)

Coil se encarga de todo esto con una sola línea de código.

¿Qué es Coil?

Coil (Coroutine Image Loader) es una biblioteca moderna de carga de imágenes para Android, desarrollada para Kotlin y las corrutinas.

Ligera — ocupa menos que Glide o Picasso
Enfocada en Kotlin y compatible con corrutinas
Consciente del ciclo de vida — cancela las cargas automáticamente
Compatible con GIF, SVG y fotogramas de vídeo

Añadir Coil

Añada la dependencia en app/build.gradle:

// app/build.gradle
dependencies {
    implementation 'io.coil-kt:coil:2.6.0'
}

// Also make sure internet permission is in AndroidManifest.xml:
// <uses-permission android:name="android.permission.INTERNET" />

Carga básica de imágenes

Cargue una imagen en un ImageView con una sola línea:

import coil.load

// In your Activity or Adapter:
binding.ivAvatar.load("https://picsum.photos/200")

// With a placeholder and error image:
binding.ivAvatar.load("https://picsum.photos/200") {
    placeholder(R.drawable.ic_placeholder)
    error(R.drawable.ic_error)
    crossfade(true)  // smooth fade-in animation
}

Cargar imágenes en un RecyclerView

Coil cancela automáticamente las cargas pendientes cuando se recicla un ViewHolder, lo que evita que aparezcan imágenes incorrectas en las filas equivocadas:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val post = getItem(position)

    holder.tvTitle.text = post.title

    holder.ivCover.load(post.imageUrl) {
        placeholder(R.drawable.ic_image_placeholder)
        error(R.drawable.ic_broken_image)
        crossfade(300)  // 300ms fade-in
        size(200, 200)  // resize to 200×200 pixels
    }
}

Transformaciones

Aplique transformaciones a las imágenes cargadas:

CircleCropTransformation() — imagen circular (perfecta para avatares)
RoundedCornersTransformation(radius) — esquinas redondeadas
BlurTransformation(context, radius) — efecto de desenfoque

Ejemplo de transformación

Muestre un avatar de usuario circular:

import coil.load
import coil.transform.CircleCropTransformation
import coil.transform.RoundedCornersTransformation

// Circular avatar
binding.ivAvatar.load(user.profileImageUrl) {
    transformations(CircleCropTransformation())
    placeholder(R.drawable.ic_default_avatar)
    error(R.drawable.ic_default_avatar)
}

// Rounded corners on a card image
binding.ivCover.load(post.coverUrl) {
    transformations(RoundedCornersTransformation(16f))
    crossfade(true)
}

Comportamiento de la caché

Coil almacena las imágenes automáticamente en dos niveles:

Caché de memoria — es la más rápida y se borra cuando se cierra la aplicación
Caché de disco — persiste entre ejecuciones de la aplicación; tiene un tamaño predeterminado de 250 MB

Si se carga la misma URL dos veces, la segunda carga proviene de la caché, sin realizar ninguna solicitud de red.

Carga desde distintas fuentes

Coil puede cargar imágenes desde varias fuentes, no solo desde URL:

// From a URL (most common)
imageView.load("https://example.com/image.jpg")

// From a URI (e.g., gallery image)
imageView.load(uri)

// From a drawable resource
imageView.load(R.drawable.my_image)

// From a File
imageView.load(File("/sdcard/photo.jpg"))

// From a bitmap
imageView.load(bitmap)

Comprobación rápida

¿Qué transformación de Coil usaría para mostrar la foto de perfil de un usuario como un círculo?

Repaso: carga de imágenes con Coil

Ahora puede mostrar imágenes de red de forma eficiente:

Añadir Coil con una sola dependencia de Gradle
imageView.load(url) { } — cargar con una sola línea
Imágenes de marcador de posición y de respaldo para errores
Transformaciones: CircleCrop, RoundedCorners, Blur
Almacenamiento automático en caché a nivel de memoria y de disco
Funciona con URL, URI, archivos, drawables y bitmaps

A continuación: gestionar los errores correctamente y ofrecer a los usuarios información útil.

Preguntas frecuentes

¿La lección «Carga de imágenes con Coil» es gratis?

Sí — el texto completo de «Carga de imágenes con Coil» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 6 lecciones en total.

¿Qué aprenderé en «Carga de imágenes con Coil»?

Cargue y almacene en caché imágenes de red de forma eficiente con Coil. Aplique transformaciones (CircleCrop, RoundedCorners) y gestione marcadores de posición y errores. Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 6.

¿Cuánto tiempo toma la lección «Carga de imágenes con Coil»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Android Academy