Glide/Coil für Kotlin: Komplettguide mit Beispielen

Was sind Glide und Coil und warum braucht man sie?

In der modernen Android-Entwicklung gehört das Laden und Anzeigen von Bildern aus dem Netz, lokalen Dateien oder Ressourcen zu den häufigsten Aufgaben. Es reicht jedoch nicht aus, einfach ein Bild herunterzuladen und in einem ImageView anzuzeigen. Viele Nuancen müssen berücksichtigt werden: Caching (um Datenvolumen zu sparen), Fehlerbehandlung (falls ein Bild nicht geladen wird), Transformationen (runde Avatare, Weichzeichner), Unterstützung für GIFs und Videos sowie sanfte Einblendanimationen.

Glide und Coil sind die beiden beliebtesten Bibliotheken zum Laden von Bildern in Kotlin/Android. Sie lösen all diese Probleme „out of the box".

• Glide – eine leistungsstarke, ausgereifte Bibliothek (teilweise von Google). Unterstützt GIFs, Videos, Transformationen und Animationen. Hat eine riesige Community.
• Coil – moderner, leichtgewichtig und komplett in Kotlin mit Coroutinen geschrieben. Lässt sich hervorragend in Jetpack Compose integrieren.

In diesem Artikel betrachten wir beide Bibliotheken, da sie die gleichen Aufgaben auf unterschiedliche Weise lösen. So können Sie diejenige auswählen, die am besten zu Ihrem Projekt passt.

Installation

Fügen Sie die Abhängigkeiten in Ihre build.gradle.kts-Datei (Modulebene app) ein:

Für Glide:

dependencies {
    implementation("com.github.bumptech.glide:glide:4.16.0")
    kapt("com.github.bumptech.glide:compiler:4.16.0") // für GlideApp
}

Für Coil:

dependencies {
    implementation("io.coil-kt:coil:2.6.0")
    // Falls Sie Compose verwenden:
    implementation("io.coil-kt:coil-compose:2.6.0")
}

Nach dem Hinzufügen synchronisieren Sie das Projekt (Sync Now).

Schnellstart

Laden wir ein einfaches Bild aus dem Internet in ein ImageView.

Beispiel mit Glide:

// In Activity oder Fragment
val imageView: ImageView = findViewById(R.id.my_image_view)
val url = "https://example.com/image.jpg"

Glide.with(this)
    .load(url)
    .into(imageView)

Beispiel mit Coil:

// In Activity oder Fragment
val imageView: ImageView = findViewById(R.id.my_image_view)
val url = "https://example.com/image.jpg"

imageView.load(url)

Wie Sie sehen, bietet Coil eine noch prägnantere Syntax durch die Extension-Funktion load().

Wichtige Methoden und Funktionen

Nachfolgend finden Sie die wichtigsten Methoden für die Bildbearbeitung. Für jede Methode zeige ich Beispiele für beide Bibliotheken.

1. load() – Bild laden

Funktion: Die Hauptmethode, die eine Bildquelle entgegennimmt (URL, URI, File, Drawable, Bitmap).

Parameter:

• url: String – Link zum Bild.
• uri: Uri – Lokaler URI.
• file: File – Datei.
• resourceId: Int – Ressourcen-ID (R.drawable...).

Beispiel (Glide):

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

Beispiel (Coil):

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

2. placeholder() – Platzhalterbild

Funktion: Zeigt ein temporäres Bild an, während das Hauptbild geladen wird.

Parameter:

• placeholder: Int – Ressourcen-ID eines Drawables.

Beispiel (Glide):

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

Beispiel (Coil):

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

3. error() – Fehlerbild

Funktion: Zeigt ein Bild an, wenn das Hauptbild nicht geladen werden kann.