Gif Dynamic Resizing (Blurry Gifs)

[gabrielle-cozart]

Glide Version: 4.12.0

Integration libraries: okhttp3-4.8.1

Device/Android Version: Affects all devices/OSs

Issue details / Repro steps / Use case background: Gifs come down from content management system and are loaded into a custom defined component. The gif's width should be set to fill the width of the screen while the height should dynamically adjust to fit the aspect ratio of the image.

Issue is: Glide.asGif() call is forcing me to use override(width, height) method or else the gif method doesn't work and nothing is displayed. I don't want to force this width and height and need it to be dynamic because all the data can vary in aspect ratio. When I added the override width and height (only way for me to get the feature to work) the gifs ended up coming out blurry because I set them statically to 300 x 300 in the override. How do I have glide just return them based on the size they are already defined?

Glide load line / GlideModule (if any) / list Adapter code (if any):

fun ImageView.loadGif(
    context: Context,
    imageUrl: String,
    onResourceReady: () -> Unit,
    onLoadFailed: (e: GlideException?) -> Unit
) {
    Glide.with(context)
        .asGif()
        .load(imageUrl)
        .override(GIF_WIDTH, GIF_HEIGHT) // 300 x 300
        .listener(object : RequestListener<GifDrawable> {
            override fun onResourceReady(
                resource: GifDrawable?,
                model: Any?,
                target: Target<GifDrawable>?,
                dataSource: DataSource?,
                isFirstResource: Boolean
            ): Boolean {
                onResourceReady()
                return false
            }

            override fun onLoadFailed(
                e: GlideException?,
                model: Any?,
                target: Target<GifDrawable>?,
                isFirstResource: Boolean
            ): Boolean {
                onLoadFailed(e)
                return false
            }
        })
        .into(this)

Layout XML:

<androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/module"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:adjustViewBounds="true"
                    app:layout_constraintTop_toTopOf="parent" />

            ......

        </androidx.constraintlayout.widget.ConstraintLayout>

App: https://user-images.githubusercontent.com/82335757/138475358-b16affd9-d81a-4e21-99fd-89b7455a05ef.mp4

Original Asset:

[gabrielle-cozart]

Note, removing .override(GIF_WIDTH, GIF_HEIGHT) will causes issues, but if you also change the imageView's height to wrap_content instead of match_parent (which makes sense anyways). It is possible to remove the override, but it does not fix the blurriness issue.

[gabrielle-cozart]

Note: Original image size is 1024x512. Sizing it down seems to help in making it less blurry, but what is the size causing it to blur?

[KishorJena]

Wow. Finally found the snippet for gif resizing. Actually I want to save the resized gif to flle. Can you confirm that this code resizes the gif and then return resource?