How to use image placeholders for preview with Jetpack Compose

With XML, we had the option to use tools: for designing by using placeholders when real data is not available. Do we have something similar in Jetpack Compose?

I know I can pass sample data to my composable in a dedicated preview function. But for instance, when an image source is a URL (that loads by Coil, Glide.. ), even if I pass a sample URL, it can’t be loaded in preview. A practical solution for that could save development time.

Answer

If you’re using Coil, you can use the previewPlaceholder parameter, e.g.:

Image(
    painter = rememberCoilPainter(
        request = "https://picsum.photos/300/300",
        previewPlaceholder = R.drawable.placeholder,
    ),
    contentDescription = stringResource(R.string.image_content_desc),
)

Source: https://google.github.io/accompanist/coil/#previews