bumptech / glide

An image loading and caching library for Android focused on smooth scrolling
https://bumptech.github.io/glide/
Other
34.67k stars 6.12k forks source link

[4.13.2] Transparent layer is not working with Avif #4807

Open mezentsev opened 2 years ago

mezentsev commented 2 years ago

I use glide 4.13.2 with avif support

implementation("com.github.bumptech.glide:glide:4.13.2")
implementation("com.github.bumptech.glide:avif-integration:4.13.2")
implementation("com.github.bumptech.glide:annotations:4.13.2")
annotationProcessor("com.github.bumptech.glide:compiler:4.13.2")

but I am stuck with transparent layer. All images got problems with background: green, black or problems with displaying.

Example avifs with device output All avifs and device output screens

How Glide renders it on my Pixel 5

  1. Black background instead of transparancy

    car1-device
  2. Black background instead of transparancy

    shade-device
  3. No image, bu transparancy :)

    mask-device
  4. Green background instead of transparancy

    car2-device
  5. Black background instead of transparancy

    burger-device

You can find all avifs by link above.

Device: Pixel 5 Android 12

Is it a known problem? I saw the similar problem in #4751

vigneshvg commented 2 years ago

Hi,

Thanks for the detailed bug report. The AVIF integration supports images with alpha channel.

Do you have an AppGlideModule to activate the AVIF integration? Without the AppGlideModule, Glide will try to decode the AVIF images using the platform's AVIF decoder (it will be available on android versions >= 12). The platform decoder does NOT support alpha channel and would result in images being rendered as you have shared.

A sample empty app glide module:

@GlideModule
public final class YourAppGlideModule extends AppGlideModule {}

I am able to reproduce this on my pixel 3. Without the app glide module, i see images rendered similar to yours. With the app glide module, i see the images rendered correctly with transparency based on whether or not dark mode is enabled in the system settings.

Here is how it renders on my Pixel 3 with the correct app glide module.

Light Mode:

burger car1 car2 mask shade

Dark Mode:

burger car1 car2 mask shade

Hope that helps. Please let me know if you have any further questions.

yvonnelyf commented 2 years ago

same problem with this file,on system version below android 12 051b5f213ab01a4c.png.avif.zip

mezentsev commented 2 years ago

@vigneshvg Thanks for answer. It helps for main purposes but not for Targets. I found a problem with loading via CustomViewTarget. I'd share an example:

      // ...
      val target = glideTarget(tariffImage) ?: object : CustomViewTarget<ImageView, Drawable>(myImageView) {
        override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
          getView().setImageDrawable(resource)
        }

        override fun onLoadFailed(errorDrawable: Drawable?) {
          // no-op
        }

        override fun onResourceCleared(placeholder: Drawable?) {
          // no-op
        }
      }
      saveTarget(tariffImage, target)

      Glide.with(myImageView)
        .load(iconUrl)
        .into(target)
    }
    // ...

  private fun saveTarget(view: View, glideTarget: Target<Drawable>) {
    view.setTag(R.id.image_view_tag_glide_target, glideTarget)
  }

  private fun glideTarget(view: View): Target<Drawable>? {
    return view.getTag(R.id.image_view_tag_glide_target) as? Target<Drawable>
  }

That example shows white background for AVIF.

But I watched througth the source code and found interesting moment with ImageView: glideContext.buildImageViewTarget(view, transcodeClass) that helps