picasso

Picasso for Jetpack Compose

This library brings easy-to-use composable which can fetch and display images from external sources, such as network, using the Picasso v2 image loading library.

PicassoImage()

The primary API is via the PicassoImage() functions. There are multiple function versions available.

The simplest usage is like so:

PicassoImage(
    data = "https://picsum.photos/300/300",
    contentDescription = "My content description",
)

This loads the data passed in with Picasso, and then displays the resulting image using the standard Image composable.

You can also customize the Picasso RequestCreator through the requestBuilder parameter. This allows usage of things like (but not limited to) transformations:

PicassoImage(
    data = "https://picsum.photos/300/300",
    contentDescription = "My content description",
    requestBuilder = {
        rotate(90f)
    }
)

It also provides optional content 'slots', allowing you to provide custom content to be displayed when the request is loading, and/or if the image request failed:

PicassoImage(
    data = "https://picsum.photos/300/300",
    contentDescription = "My content description",
    loading = {
        Box(Modifier.matchParentSize()) {
            CircularProgressIndicator(Modifier.align(Alignment.Center))
        }
    },
    error = {
        Image(asset = imageResource(R.drawable.ic_error))
    }
)

Fade-in animation

This library has built-in support for animating loaded images in, using a fade-in animation.

There are two ways to enable the animation:

fadeIn parameter

A fadeIn: Boolean parameter is available on PicassoImage (default: false). When enabled, a default fade-in animation will be used when the image is successfully loaded:

PicassoImage(
    data = "https://picsum.photos/300/300",
    contentDescription = "My content description",
    fadeIn = true
)

Custom content

If you need more control over the animation, or you want to provide custom layout for the loaded image, you can use the content composable version of PicassoImage:

PicassoImage(
    data = "https://picsum.photos/300/300",
) { imageState ->
    when (imageState) {
        is ImageLoadState.Success -> {
            MaterialLoadingImage(
                result = imageState,
                contentDescription = "My content description",
                fadeInEnabled = true,
                fadeInDurationMs = 600,
            )
        }
        is ImageLoadState.Error -> /* TODO */
        ImageLoadState.Loading -> /* TODO */
        ImageLoadState.Empty -> /* TODO */
    }
}

Custom Picasso

If you wish to provide a default Picasso to use across all of your PicassoImage calls, we provide the LocalPicasso composition local.

You can use it like so:

val picasso = Picasso.Builder(...)
    // Customize as required
    .build()

CompositionLocalProvider(LocalPicasso provides picasso) {
    // This will automatically use the value of LocalPicasso
    PicasoImage(
        data = ...
    )
}

For more information on composition locals, see here.

Download

repositories {
    mavenCentral()
}

dependencies {
    implementation "dev.chrisbanes.accompanist:accompanist-picasso:<version>"
}

Snapshots of the development version are available in Sonatype's snapshots repository. These are updated on every commit.