Android Academy · Lektion

Bilder mit Coil laden

Laden und cachen Sie Netzwerkbilder effizient mit Coil. Wenden Sie Transformationen (CircleCrop, RoundedCorners) an und behandeln Sie Platzhalter und Fehler.

Bilder mit Coil laden ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 6. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 6 Lektionen.

Warum eine Bildbibliothek?

Bilder aus dem Internet zu laden ist überraschend komplex:

Download in einem Hintergrund-Thread
Im Cache auf der Festplatte und im Arbeitsspeicher speichern
Effizient decodieren (OOM-Abstürze vermeiden)
Während des Ladens einen Platzhalter anzeigen
Fehler behandeln (defekter Link, kein Netzwerk)

Coil erledigt all das mit einer einzigen Codezeile.

Was ist Coil?

Coil (Coroutine Image Loader) ist eine moderne Android-Bibliothek zum Laden von Bildern, die für Kotlin und Coroutines entwickelt wurde.

Leichtgewichtig — kleiner als Glide oder Picasso
Kotlin-orientiert mit Coroutine-Unterstützung
Lifecycle-aware — bricht Ladevorgänge automatisch ab
Unterstützt GIF, SVG und Videoframes

Coil hinzufügen

Fügen Sie die Abhängigkeit in app/build.gradle hinzu:

// 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" />

Grundlegendes Laden von Bildern

Laden Sie ein Bild mit einer einzigen Zeile in eine ImageView:

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
}

Laden in einer RecyclerView

Coil bricht ausstehende Ladevorgänge automatisch ab, wenn ein ViewHolder wiederverwendet wird. So wird verhindert, dass falsche Bilder in den falschen Zeilen angezeigt werden:

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
    }
}

Transformationen

Wenden Sie Transformationen auf geladene Bilder an:

CircleCropTransformation() — rundes Bild (perfekt für Avatare)
RoundedCornersTransformation(radius) — abgerundete Ecken
BlurTransformation(context, radius) — Unschärfeeffekt

Beispiel für eine Transformation

Zeigen Sie einen kreisförmigen Benutzeravatar an:

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)
}

Cache-Verhalten

Coil speichert Bilder automatisch auf zwei Ebenen im Cache:

Arbeitsspeicher-Cache — am schnellsten, wird beim Beenden der App geleert
Festplatten-Cache — bleibt zwischen App-Starts erhalten, standardmäßig 250 MB

Wird dieselbe URL zweimal geladen, stammt der zweite Ladevorgang aus dem Cache — es ist keine Netzwerkanfrage erforderlich.

Laden aus verschiedenen Quellen

Coil kann Bilder aus verschiedenen Quellen laden, nicht nur aus URLs:

// 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)

Kurzer Check

Welche Coil-Transformation würden Sie verwenden, um ein Benutzerprofilfoto als Kreis anzuzeigen?

Zusammenfassung: Bilder mit Coil laden

Sie können jetzt Netzwerkbilder effizient anzeigen:

Fügen Sie Coil mit einer einzigen Gradle-Abhängigkeit hinzu
imageView.load(url) { } — Laden mit einer Zeile
Platzhalter- und Fehlerbilder als Fallback
Transformationen: CircleCrop, RoundedCorners, Blur
Automatisches Caching im Arbeitsspeicher und auf der Festplatte
Funktioniert mit URLs, URIs, Dateien, Drawables und Bitmaps

Als Nächstes: Behandeln Sie Fehler elegant und geben Sie Benutzern hilfreiches Feedback.

Häufig gestellte Fragen

Ist die Lektion „Bilder mit Coil laden“ kostenlos?

Ja — der vollständige Text von „Bilder mit Coil laden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 6 Lektionen.

Was lerne ich in „Bilder mit Coil laden“?

Laden und cachen Sie Netzwerkbilder effizient mit Coil. Wenden Sie Transformationen (CircleCrop, RoundedCorners) an und behandeln Sie Platzhalter und Fehler. Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 6.

Wie lange dauert die Lektion „Bilder mit Coil laden“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy