Placeholder¶

The landscapist-placeholder package offers a rich selection of image plugins for implementing placeholders, including loading and failure placeholder support, as well as shimmering animations.

To utilize these placeholder supports, simply add the following dependency:

GroovyKTS

dependencies {
    implementation "com.github.skydoves:landscapist-placeholder:$version"
}

dependencies {
    implementation("com.github.skydoves:landscapist-placeholder:$version")
}

PlaceholderPlugin¶

You have the ability to display your custom placeholders while loading an image or in case of a loading failure by using the PlaceholderPlugin.Loading and PlaceholderPlugin.Failure respectively.

GlideCoilFresco

GlideImage(
  component = rememberImageComponent {
      +PlaceholderPlugin.Loading(painterResource(id = R.drawable.placeholder_loading))
      +PlaceholderPlugin.Failure(painterResource(id = R.drawable.placeholder_failure))
  },
  ..
)

CoilImage(
  component = rememberImageComponent {
      +PlaceholderPlugin.Loading(painterResource(id = R.drawable.placeholder_loading))
      +PlaceholderPlugin.Failure(painterResource(id = R.drawable.placeholder_failure))
  },
  ..
)

FrescoImage(
  component = rememberImageComponent {
      +PlaceholderPlugin.Loading(painterResource(id = R.drawable.placeholder_loading))
      +PlaceholderPlugin.Failure(painterResource(id = R.drawable.placeholder_failure))
  },
  ..
)

Note

The source should be one of ImageBitmap, ImageVector, or Painter.

ShimmerPlugin¶

You can implement a shimmering effect while loading an image by using the ShimmerPlugin, as shown in the example below:

GlideCoilFresco

GlideImage(
    component = rememberImageComponent {
      // displays a shimmering effect when loading an image.
      +ShimmerPlugin(
        Shimmer.Flash(
          baseColor = Color.White,
          highlightColor = Color.LightGray,
        )
      )
    },
    ..
)

CoilImage(
    component = rememberImageComponent {
      // displays a shimmering effect when loading an image.
      +ShimmerPlugin(
        Shimmer.Flash(
          baseColor = Color.White,
          highlightColor = Color.LightGray,
        )
      )
    },
    ..
)

FrescoImage(
    component = rememberImageComponent {
      // displays a shimmering effect when loading an image.
      +ShimmerPlugin(
        Shimmer.Flash(
          baseColor = Color.White,
          highlightColor = Color.LightGray,
        )
      )
    },
    ..
)

After building the above sample, you'll see the shimmering effect in the result below:

Shimmer

Shimmer sealed class provides following the three different types: Resonate, Fade, and Flash.

Resonate	Fade	Flash

ThumbnailPlugin¶

Landscapist supports the thumbnail feature, enabling pre-loading and displaying small-sized images while loading the original image. This approach creates the illusion of faster image loading and delivers a natural loading effect to users. To showcase the thumbnail, simply add the image plugin to your image component, as illustrated in the example below:

GlideCoilFresco

GlideImage(
    component = rememberImageComponent {
        +ThumbnailPlugin() 
    },
    ..
)

CoilImage(
    component = rememberImageComponent {
        +ThumbnailPlugin() 
    },
    ..
)

FrescoImage(
    component = rememberImageComponent {
        +ThumbnailPlugin() 
    },
    ..
)

You can also adjust the request sizes by giving the requestSize parameter:

GlideCoilFresco

GlideImage(
    component = rememberImageComponent {
        +ThumbnailPlugin(IntSize(30 ,30))
    },
    ..
)

CoilImage(
    component = rememberImageComponent {
        +ThumbnailPlugin(IntSize(30 ,30))
    },
    ..
)

FrescoImage(
    component = rememberImageComponent {
        +ThumbnailPlugin(IntSize(30 ,30))
    },
    ..
)

Note

Using a small request size on the thumbnail plugin is highly recommended to expedite the pre-loading images process. By specifying a smaller request size, you ensure that the pre-loaded images load faster, optimizing the user experience during image loading and achieving smoother transitions to display the original images.

After building the above sample, you'll see the thumbnail while loading an image in the result below:

Thumbnail