Glide/Coil para Kotlin: guia completo com exemplos

O que são Glide e Coil e para que servem?

\n\n

No desenvolvimento Android moderno, carregar e exibir imagens da rede, arquivos locais ou recursos é uma das tarefas mais comuns. No entanto, simplesmente baixar uma imagem e mostrá-la em um ImageView não é suficiente. É necessário considerar vários detalhes: cache (para não gastar tráfego), tratamento de erros (se a imagem não carregar), transformações (avatares redondos, desfoque), suporte a GIF e vídeo, além de animações suaves de aparecimento.

\n\n

Glide e Coil são as duas bibliotecas mais populares para carregamento de imagens em Kotlin/Android. Elas resolvem todos esses problemas "prontos para uso".

\n\n

\n
• Glide — uma biblioteca poderosa e madura do Google (parcialmente). Suporta GIF, vídeo, transformações, animações. Possui uma enorme comunidade.
\n
• Coil — mais moderna, leve e escrita totalmente em Kotlin usando corrotinas. Integra-se perfeitamente com Jetpack Compose.
\n

\n\n

Neste artigo, abordaremos ambas as bibliotecas, pois elas resolvem as mesmas tarefas, mas de maneiras diferentes. Você poderá escolher a que melhor se adequa ao seu projeto.

\n\n

Instalação

\n\n

Adicione as dependências no arquivo build.gradle.kts (nível do 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    // Se estiver usando Compose:\n    implementation("io.coil-kt:coil-compose:2.6.0")\n}

\n\n

Após adicionar, sincronize o projeto (Sync Now).

\n\n

Início rápido

\n\n

Vamos carregar uma imagem simples da internet em um ImageView.

\n\n

Exemplo com Glide:

\n

// Em Activity ou 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

Exemplo com Coil:

\n

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

\n\n

Como você pode ver, o Coil oferece uma sintaxe ainda mais concisa através da função de extensão load().

\n\n

Métodos e funções principais

\n\n

Abaixo estão os principais métodos para trabalhar com imagens. Para cada método, mostrarei exemplos para ambas as bibliotecas.

\n\n

1. load() — Carregamento de imagem

\n

O que faz: Método principal que aceita a fonte da imagem (URL, URI, File, Drawable, Bitmap).

\n

Parâmetros:

\n

\n
• url: String — link para a imagem.
\n
• uri: Uri — URI local.
\n
• file: File — arquivo.
\n
• resourceId: Int — ID do recurso (R.drawable...).
\n

\n

Exemplo (Glide):

\n

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

\n

Exemplo (Coil):

\n

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

\n\n

2. placeholder() — Imagem de placeholder

\n

O que faz: Mostra uma imagem temporária enquanto a imagem principal está carregando.

\n

Parâmetros:

\n

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

\n

Exemplo (Glide):

\n

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

\n

Exemplo (Coil):

\n

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

\n\n

3. error() — Imagem em caso de erro