0Pricing
Android Academy · Lektion

Bilder mit Coil laden

Asynchrones Laden von Bildern in Compose

Bilder mit Coil laden ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. 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 4 Lektionen.

Warum Sie einen Image Loader benötigen

Die meisten modernen Apps zeigen Bilder aus dem Internet: Profilfotos, Produktbilder und Artikelvorschaubilder. Diese Bilder korrekt herunterzuladen und zu decodieren ist schwieriger, als es zunächst wirkt.

Sie müssen Bytes im Hintergrund über das Netzwerk abrufen, sie in eine Bitmap decodieren, sie zwischenspeichern, damit sie nicht erneut geladen werden, und die Anfrage abbrechen, wenn der Benutzer weiterscrollt. Dies von Hand umzusetzen ist fehleranfällig.

Coil (Coroutine Image Loader) übernimmt all das mit einer kleinen, Compose-freundlichen API für Sie. In dieser Lektion laden Sie Ihr erstes Bild aus dem Internet.

Coil zum Projekt hinzufügen

Coil wird als Gradle-Abhängigkeit bereitgestellt. Für Jetpack Compose benötigen Sie das Artefakt coil-compose, das Ihnen das Composable AsyncImage zur Verfügung stellt.

Fügen Sie es der build.gradle.kts Ihres Moduls hinzu. Coil 3 ist die aktuelle Hauptversion und funktioniert plattformübergreifend; hier verwenden wir die Compose-Integration.

// build.gradle.kts (module level)
dependencies {
    implementation("io.coil-kt.coil3:coil-compose:3.0.4")
    implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.4")
}

Internet-Berechtigung

Damit Ihre App Bilder von einer URL herunterladen kann, benötigt sie die Berechtigung INTERNET. Dies ist eine normale Berechtigung zur Installationszeit, daher müssen Sie sie nur im Manifest deklarieren. Es wird keine Laufzeitabfrage angezeigt.

Ohne diese Berechtigung schlägt jede Netzwerkanfrage mit einer Sicherheitsausnahme fehl.

<!-- AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <application ...>
        ...
    </application>
</manifest>

Ihr erstes AsyncImage

Die einfachste Möglichkeit, ein Bild aus dem Internet in Compose anzuzeigen, ist AsyncImage. Übergeben Sie ein model (meist eine URL-Zeichenkette) und eine contentDescription, und Coil erledigt den Rest: Abruf im Hintergrund, Decodierung und Anzeige.

Das Composable verwendet automatisch Coroutines, die an die Composition gebunden sind. Dadurch wird die Anfrage abgebrochen, wenn das Composable den Bildschirm verlässt.

import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun Avatar() {
    AsyncImage(
        model = "https://example.com/avatar.png",
        contentDescription = "User avatar",
        modifier = Modifier.size(96.dp)
    )
}

contentScale: So passt sich das Bild an

Bilder entsprechen nur selten exakt der Größe des vorgesehenen Layoutbereichs. ContentScale legt fest, wie die Bitmap innerhalb ihrer Grenzen skaliert wird.

  • ContentScale.Crop füllt den Bereich aus und schneidet überstehende Teile ab – ideal für Avatare und Vorschaubilder.
  • ContentScale.Fit zeigt das gesamte Bild an, lässt möglicherweise aber freien Platz.
  • ContentScale.FillBounds streckt das Bild, bis es den Bereich ausfüllt, und kann es dabei verzerren.

Für Bereiche mit fester Größe ist Crop die häufigste Wahl.

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun CircleAvatar(url: String) {
    AsyncImage(
        model = url,
        contentDescription = "Avatar",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(80.dp)
            .clip(CircleShape)
    )
}

Eine Anfrage mit ImageRequest erstellen

Eine URL-Zeichenkette zu übergeben ist der schnellste Weg. Für mehr Kontrolle erstellen Sie eine ImageRequest. Damit können Sie Optionen wie Crossfade, Header, Transformationen und Cache-Schlüssel festlegen.

Sie benötigen einen Context, den Compose über LocalContext.current bereitstellt.

import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ProductImage(url: String) {
    val context = LocalContext.current
    val request = ImageRequest.Builder(context)
        .data(url)
        .crossfade(true)
        .build()

    AsyncImage(
        model = request,
        contentDescription = "Product photo"
    )
}

Sanftes Laden mit Crossfade

Standardmäßig erscheint ein Bild beim Abschluss des Ladevorgangs sofort, was abrupt wirken kann. crossfade(true) blendet das Bild über eine kurze Animation ein.

Sie können auch eine Dauer in Millisekunden angeben, um das Einblenden zu verlangsamen oder zu beschleunigen. Diese kleine Ergänzung lässt Listen deutlich hochwertiger wirken.

import coil3.request.ImageRequest
import coil3.request.crossfade
import android.content.Context

fun smoothRequest(context: Context, url: String) =
    ImageRequest.Builder(context)
        .data(url)
        .crossfade(durationMillis = 300)
        .build()

Aus verschiedenen Quellen laden

Das model in AsyncImage ist flexibel. Coil kann aus vielen Quelltypen laden, nicht nur aus entfernten URLs:

  • Ein String oder Uri für Netzwerk- oder lokale Dateien.
  • Eine ID einer Drawable-Ressource (R.drawable.logo).
  • Eine File auf dem Gerät.
  • Ein Content-Uri aus der Fotoauswahl.

Dadurch kann dasselbe Composable entfernte und lokale Bilder nahtlos verarbeiten.

import android.net.Uri
import androidx.compose.runtime.Composable
import coil3.compose.AsyncImage

@Composable
fun FlexibleImage(source: Any) {
    // source can be a URL String, a Uri, a File, or a resource id
    AsyncImage(
        model = source,
        contentDescription = null
    )
}

// Examples:
// FlexibleImage("https://example.com/pic.jpg")
// FlexibleImage(Uri.parse("content://media/external/images/1"))

Auf den Ladestatus reagieren

Manchmal möchten Sie wissen, ob ein Bild gerade geladen wird, erfolgreich geladen wurde oder fehlgeschlagen ist, um unterschiedliche UI anzuzeigen. AsyncImagePainter stellt diesen Status bereit; der einfachste Ansatz ist jedoch SubcomposeAsyncImage, bei dem Sie für jeden Status eigenen Inhalt angeben können.

Im nächsten Kapitel gehen wir näher auf Platzhalter ein. Hier sehen Sie zunächst den grundlegenden Aufbau einer statusabhängigen Anzeige.

import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import coil3.compose.SubcomposeAsyncImage

@Composable
fun StatefulImage(url: String) {
    SubcomposeAsyncImage(
        model = url,
        contentDescription = "Photo",
        loading = { CircularProgressIndicator() }
    )
}

Abbruch automatisch inklusive

Eine der größten Stärken von Coil ist der automatische Abbruch. Da AsyncImage seine Anfrage innerhalb der Composition startet, wird eine laufende Anfrage abgebrochen, sobald das Composable den Bildschirm verlässt, etwa wenn eine Zeile aus einer LazyColumn herausgescrollt wird.

Das spart Bandbreite und CPU und verhindert unnötige Arbeit. Sie müssen keinen eigenen Abbruchcode schreiben – deshalb skaliert Coil in langen Listen so gut.

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun PhotoFeed(urls: List<String>) {
    LazyColumn {
        items(urls) { url ->
            AsyncImage(
                model = url,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
            )
        }
    }
}

Eine vollständige Image-Karte

Kombinieren wir nun das Gelernte: eine Karte mit einem entfernten Bild, das den oberen Bereich ausfüllt, per Crossfade eingeblendet und auf eine feste Höhe zugeschnitten wird. Dieses grundlegende Muster werden Sie immer wieder verwenden.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ImageCard(title: String, imageUrl: String) {
    val context = LocalContext.current
    Card(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        Column {
            AsyncImage(
                model = ImageRequest.Builder(context)
                    .data(imageUrl)
                    .crossfade(true)
                    .build(),
                contentDescription = title,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxWidth().height(180.dp)
            )
            Text(text = title, modifier = Modifier.padding(16.dp))
        }
    }
}

Kurzer Test

Welches Composable aus coil-compose ist die einfachste Möglichkeit, ein entferntes Bild anhand einer URL in Jetpack Compose anzuzeigen?

Zusammenfassung

Sie haben Ihre ersten Bilder aus dem Internet mit Coil geladen. Die wichtigsten Punkte:

  • Fügen Sie coil-compose, eine OkHttp-Netzwerkabhängigkeit und die Berechtigung INTERNET hinzu.
  • AsyncImage(model = url, contentDescription = ...) ist der schnellste Weg.
  • Verwenden Sie ContentScale.Crop mit einer festen Größe für Avatare und Vorschaubilder.
  • Erstellen Sie eine ImageRequest für Crossfade und zusätzliche Kontrolle.
  • Coil bricht laufende Anfragen automatisch ab, wenn Composables den Bildschirm verlassen.

Als Nächstes: angenehmes Laden mit Platzhaltern und Fehlerzuständen.

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 4 Lektionen.

Was lerne ich in „Bilder mit Coil laden“?

Asynchrones Laden von Bildern in Compose 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 1 von 4.

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

  1. Bilder mit Coil laden
  2. Platzhalter und Fehlerzustände
  3. Caching und Performance
  4. Audio und Video abspielen
← Zurück zu Android Academy