Shimmer effect is not working for GlideImage

[atonamy]

• Library Version
  1.3.2

• Affected Device(s) [e.g. Samsung Galaxy s10 with Android 9.0]
  Android Emulator version API 30

Describe the Bug:
Shimmer Effect is not working for GlideImage

GlideImage(
        modifier = modifier,
        contentScale = contentScale,
        imageModel = someImageUrl,
        shimmerParams = ShimmerParams(
                    baseColor = Color.White,
                    highlightColor = Color.Black,
                    durationMillis = 350,
                    dropOff = 0.65f,
                    tilt = 20f
          )
    )

This example doesn't show any shimmer effect :( Looks like is not working.

Expected Behavior:
It should show shimmer effect while loading the image.

[skydoves]

Hi @atonamy
Could you build using the demo project?
There are two possibilities.

• Image loading is too fast. Then please make slow your network environment, (WIFI)
• baseColor or highlightColor is same as the background color. Then you can't see the shimmer because it was overlapped.

[atonamy]

Hi @atonamy
Could you build using the demo project?
There are two possibilities.

• Image loading is too fast. Then please make slow your network environment, (WIFI)
• baseColor or highlightColor is same as the background color. Then you can't see the shimmer because it was overlapped.

When I set the same same baseColor with ComposeView background color is not working properly when I changed baseColor of shimmerParams or background color of ComposeView to different one it started working.

[atonamy]

Also circularRevealedEnabled property not reviling properly some images for example image like this

The outcome the circle is not completing animation and keep corners rounded:

And withCrossFade also not working

GlideImage(
            modifier = modifier,
            requestBuilder = Glide
            .with(LocalView.current)
            .asBitmap()
            .transition(withCrossFade(5000)),
            contentScale = contentScale,
            imageModel = imageUrl.toString(),
            shimmerParams = ShimmerParams(
                baseColor = Color.LightGray,
                highlightColor = Color.White,
                durationMillis = 500
            )
    )

As you can see no cross fade at all

Shall I create separate issues for this?

[skydoves]

Hi @atonamy
Could you build using the demo project?
There are two possibilities.

• Image loading is too fast. Then please make slow your network environment, (WIFI)
• baseColor or highlightColor is same as the background color. Then you can't see the shimmer because it was overlapped.

When I set the same same baseColor with ComposeView background color is not working properly when I changed baseColor of shimmerParams or background color of ComposeView to different one it started working.

That seems to work correctly. The shimmer works but you can't see because the color is the same. Use different colors with the background color.

[skydoves]

Also circularRevealedEnabled property not reviling properly some images for example image like this

The outcome the circle is not completing animation and keep corners rounded:

And withCrossFade also not working

GlideImage(
            modifier = modifier,
            requestBuilder = Glide
            .with(LocalView.current)
            .asBitmap()
            .transition(withCrossFade(5000)),
            contentScale = contentScale,
            imageModel = imageUrl.toString(),
            shimmerParams = ShimmerParams(
                baseColor = Color.LightGray,
                highlightColor = Color.White,
                durationMillis = 500
            )
    )

As you can see no cross fade at all

Shall I create separate issues for this?

Could you build again with this option on your modifier? .aspectRatio(3.0f).
withCrossFade will not work correctly and that is the expected result. Because the internal Glide image processor on this library doesn't use the ImageView concept for rendering fetched images. You can use the CrossFade Composable function instead!

[atonamy]

.aspectRatio(3.0f)

Unfortunately this option didn't help.

Then if withCrossFade is not working why this examples shows in README.md file ?

[skydoves]

Whoops, the README should be modified. Glide's Transition.ViewAdapter interfaces are based on the Android's View, so we should build the corssfade effect using the CrossFade in Jetpack Compose like the below. (Just a simple example without shimmer and circular reveal animation)

Crossfade(
    targetState = poster,
    animationSpec = tween(3000)
  ) {

    GlideImage(
      imageModel = it?.poster!!,
      modifier = Modifier.aspectRatio(0.8f),
      bitmapPalette = BitmapPalette {
        palette = it
      }
    )
  }

Also, the circular reveal animation seems like a bug! I will try to fix it in the next version.
Thanks!

[skydoves]

Fixed on a new SNAPSHOT release: 1.3.7-SNAPSHOT.
This will be included in the next stable release.
Thanks for your report!