Compose Previews

[ryanrampage1]

First of all, I Love this library, this has been a game changer and just all around awesome product.

One thing that has came up, I am looking to see now what is the preferred way to render previews with fake images in compose previews. I have looked around a bit but have not found a great or consistent answer.

I saw the snippet below on #977 and seems to work well, but LocalImageLoader is now deprecated in favor of the factory override.

In general would love to see in the docs an explanation of how to properly render image previews in composable, especially now that the following snippet is deprecated.

Thank you all for your help!

CompositionLocalProvider(LocalImageLoader provides previewImageLoader) {
  // Preview here
}

[colinrtwhite]

Your best bet is to use a test image as the placeholder. Network images can't be fetched and decoded inside Compose's preview environment.

[rpayne1776]

@colinrtwhite I'm using a BrushPainter as a placeholder.

AsyncImage(
    model = "https://example.com/image.jpg,
    contentDescription = "Example content desc",
    contentScale = ContentScale.Crop,
    placeholder = BrushPainter(
        Brush.linearGradient(
            listOf(
                Color(color = 0xFFFFFFFF),
                Color(color = 0xFFDDDDDD),
            )
        )
    ),
)

Previews are working fine in Android Studio, but when I run the preview on an emulator, the preview app crashes with this error:

FATAL EXCEPTION: OkHttp Dispatcher
Process: com.example.app.feature.test, PID: 32468
java.lang.SecurityException: Permission denied (missing INTERNET permission?)

Seems like it is trying to make the request for the image. I'd like to be able to preview in an emulator. What can I do to resolve this?

[mislavmatijevic]

Hello, @ryanbrookepayne. I know this is a bit old and you most probably solved this, but in case anyone else comes here wondering, you need to add the following line as a child to the <manifest> element of the app/manifests/AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET" />

This is a required setting if you wish your Android app to use the socket and access the Internet. Without it, no networking for your app whatsoever.

[rpayne1776]

Thanks @mislavmatijevic. I'm working in a multi-module project so while the INTERNET line was added to the app manifest, it wasn't in the module I was working in. Adding it there fixed the issue.

[srseibs]

The placeholder parameter doesn't seem to work anymore for the Compose Preview. The error parameter will show in the Preview, but that consumes the error functionality.

[ryanrampage1]

Just curious what Coil version are you on?

I actually took a different path that may not be great but seems to work. Steps were to build the following theme wrapper composable for previews. The wrapper overrides the local composable coil instance and sets all drawables to a red square. It is not a real image but makes it easy enough to do most preview manipulation.

I then wrap all of my previews in MyThemePreview.

@Composable
fun MyThemePreview(
    content: @Composable () -> Unit
) {
    MyTheme {
        Surface {
            val ctx = LocalContext.current

            val drawable = ColorDrawable(ctx.getColor(android.R.color.holo_red_dark))

            val previewImageLoader = remember {
                ImageLoader.Builder(ctx)
                    .placeholder(drawable)
                    .error(drawable)
                    .fallback(drawable)
                    .build()
            }

            Coil.setImageLoader(previewImageLoader)

            CompositionLocalProvider(LocalImageLoader provides previewImageLoader) {
                content()
            }
        }
    }
}

[srseibs]

coil = "3.0.3"
coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil" }
coil-network-okhttp = { module = "io.coil-kt.coil3:coil-network-okhttp", version.ref = "coil" }

[colinrtwhite]

@srseibs The preview behaviour was changed in 3.0.0 to run the request instead of always defaulting to the preview. This will work in some cases like loading Android resources, but will not work for URLs (network access isn't allowed in the preview environment for security). You can either provide a custom ImageLoader for previews or set a custom preview handler.