Android Academy · Lesson

Placeholders and Error States

Graceful loading and failures.

Loading Isn't Instant

Network images take time. During that gap your UI shows... nothing, unless you handle it. And sometimes the image never arrives: the URL is broken, the server is down, or the user is offline.

A polished app shows a placeholder while loading and a fallback when things fail, instead of an empty hole or a crash. Coil makes both easy.

In this lesson you'll add placeholders, error images, and custom per-state UI.

A Simple Placeholder

The fastest way to add a placeholder is to pass a drawable to AsyncImage via the placeholder parameter using painterResource. Coil shows it until the real image finishes loading.

Use a neutral, lightweight drawable, such as a gray box or a logo silhouette.

import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import coil3.compose.AsyncImage

@Composable
fun ImageWithPlaceholder(url: String) {
    AsyncImage(
        model = url,
        contentDescription = null,
        placeholder = painterResource(R.drawable.placeholder_gray)
    )
}

All lessons in this course

← Back to Android Academy