Glide/Coil para Kotlin: guía completa con ejemplos

¿Qué son Glide y Coil y para qué sirven?

\n\n

En el desarrollo moderno de Android, cargar y mostrar imágenes desde la red, archivos locales o recursos es una de las tareas más comunes. Sin embargo, simplemente descargar una imagen y mostrarla en un ImageView no es suficiente. Hay que tener en cuenta muchos detalles: almacenamiento en caché (para no gastar datos), manejo de errores (si la imagen no se carga), transformaciones (avatares redondos, desenfoque), soporte para GIF y video, así como una animación suave de aparición.

\n\n

Glide y Coil son las dos bibliotecas más populares para cargar imágenes en Kotlin/Android. Resuelven todos estos problemas "de fábrica".

\n\n

\n
• Glide — una biblioteca potente y madura de Google (parcialmente). Soporta GIF, video, transformaciones, animaciones. Tiene una gran comunidad.
\n
• Coil — más moderna, ligera y escrita completamente en Kotlin usando corrutinas. Se integra perfectamente con Jetpack Compose.
\n

\n\n

En este artículo analizaremos ambas bibliotecas, ya que resuelven las mismas tareas pero de diferentes maneras. Podrás elegir la que mejor se adapte a tu proyecto.

\n\n

Instalación

\n\n

Agrega las dependencias en el archivo build.gradle.kts (nivel de módulo app):

\n\n

Para Glide:

\n

dependencies {\n    implementation("com.github.bumptech.glide:glide:4.16.0")\n    kapt("com.github.bumptech.glide:compiler:4.16.0") // para GlideApp\n}

\n\n

Para Coil:

\n

dependencies {\n    implementation("io.coil-kt:coil:2.6.0")\n    // Si usas Compose:\n    implementation("io.coil-kt:coil-compose:2.6.0")\n}

\n\n

Después de agregarlas, sincroniza el proyecto (Sync Now).

\n\n

Inicio rápido

\n\n

Carguemos una imagen simple desde internet en un ImageView.

\n\n

Ejemplo con Glide:

\n

// En Activity o Fragment\nval imageView: ImageView = findViewById(R.id.my_image_view)\nval url = "https://example.com/image.jpg"\n\nGlide.with(this)\n    .load(url)\n    .into(imageView)

\n\n

Ejemplo con Coil:

\n

// En Activity o Fragment\nval imageView: ImageView = findViewById(R.id.my_image_view)\nval url = "https://example.com/image.jpg"\n\nimageView.load(url)

\n\n

Como puedes ver, Coil ofrece una sintaxis aún más concisa mediante la función de extensión load().

\n\n

Métodos y funciones principales

\n\n

A continuación se presentan los métodos clave para trabajar con imágenes. Para cada método mostraré ejemplos de ambas bibliotecas.

\n\n

1. load() — Carga de imagen

\n

Qué hace: Método principal que acepta la fuente de la imagen (URL, URI, File, Drawable, Bitmap).

\n

Parámetros:

\n

\n
• url: String — enlace a la imagen.
\n
• uri: Uri — URI local.
\n
• file: File — archivo.
\n
• resourceId: Int — ID del recurso (R.drawable...).
\n

\n

Ejemplo (Glide):

\n

Glide.with(this)\n    .load("https://example.com/photo.png")\n    .into(imageView)

\n

Ejemplo (Coil):

\n

imageView.load("https://example.com/photo.png")

\n\n

2. placeholder() — Imagen de marcador

\n

Qué hace: Muestra una imagen temporal mientras se carga la imagen principal.

\n

Parámetros:

\n

\n
• placeholder: Int — ID del recurso drawable.
\n

\n

Ejemplo (Glide):

\n

Glide.with(this)\n    .load(url)\n    .placeholder(R.drawable.ic_loading)\n    .into(imageView)

\n

Ejemplo (Coil):

\n

imageView.load(url) {\n    placeholder(R.drawable.ic_loading)\n}

\n\n

3. error() — Imagen en caso de error