Android Glide: Implement GIF playback once and then automatically convert to static image display

This tutorial explains in detail how to use the Glide library in Android applications to automatically switch and display GIF animations as static images after playing once. By utilizing Glide's animation callback mechanism, developers can precisely control the life cycle of a GIF and seamlessly load and display its corresponding static image when the animation ends, thereby improving user experience and optimizing resource management.

In Android application development, GIF animation is widely used because of its lively characteristics. However, in some scenarios, we may need the GIF animation to play only once, and then automatically switch and display as a static picture after the animation ends, instead of looping infinitely or disappearing directly. For example, a loading animation, a one-time special effects display, etc. This article will guide you how to use the powerful image loading library Glide to elegantly implement this function.

1. Environment preparation

First, make sure the Glide library is configured correctly in your Android project. Add the following dependencies in your build.gradle (module level) file:

 dependencies {
    implementation 'com.github.bumptech.glide:glide:4.12.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
}

Next, define an ImageView in your layout file to display the animated GIF and subsequent static image:

 <imageview android:id="@ id/fuse" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginstart="4dp" android:layout_marginleft="4dp" android:padding="8dp" android:src="@drawable/fuseev4"></imageview>

Here, @drawable/fuseev4 is your GIF resource file (for example, a file named fuseev4.gif).

2. Preliminary implementation of GIF single playback

To achieve single playback of GIF, we can use Glide's listener callback and GifDrawable's setLoopCount() method.

 import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.ImageView;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.vectordrawable.graphics.drawable.Animatable2Compat;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.DataSource;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.bumptech.glide.load.engine.GlideException;
import com.bumptech.glide.load.resource.gif.GifDrawable;
import com.bumptech.glide.request.RequestListener;
import com.bumptech.glide.request.RequestOptions;
import com.bumptech.glide.request.target.Target;

public class GifDisplayActivity extends AppCompatActivity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Suppose you have a layout file activity_gif_display.xml that contains an ImageView with the id fuse
        setContentView(R.layout.activity_gif_display);
        imageView = findViewById(R.id.fuse);

        // Example trigger point, such as playing a GIF on button click
        findViewById(R.id.play_gif_button).setOnClickListener(view -> playGifOnceAndTransition());
    }

    private void playGifOnceAndTransition() {
        Glide.with(this)
                .asGif()
                .load(R.drawable.fuseev4) // Your GIF resource.apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.NONE)) // It is generally recommended to disable disk caching of GIFs to ensure that each load is complete.listener(new RequestListener<gifdrawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<gifdrawable> target, boolean isFirstResource) {
                        // Handling when GIF loading fails if (e != null) {
                            e.printStackTrace();
                        }
                        return false; // Return false to let Glide continue processing errors}

                    @Override
                    public boolean onResourceReady(GifDrawable resource, Object model, Target<gifdrawable> target, DataSource dataSource, boolean isFirstResource) {
                        // Callback resource.setLoopCount(1) when the GIF resource is ready; // Set the GIF to play only once // Directly loading static images here is invalid because the GIF animation has not yet ended // Glide.with(GifDisplayActivity.this).asBitmap().load(R.drawable.fuseev4).into(imageView);
                        return false; // Return false to let Glide set the resource to Target
                    }
                })
                .into(imageView);
    }
}</gifdrawable></gifdrawable></gifdrawable>

In the above code, we call resource.setLoopCount(1) in the onResourceReady callback, which indeed allows the GIF to play only once. However, if you try to load the static image immediately in onResourceReady, or perform static image loading immediately after the GIF loading code block (such as the afterListeners() method in the original question), you will find that the static image will be displayed immediately instead of waiting for the GIF animation to finish playing. This is because onResourceReady is triggered when the GIF animation starts playing, and the subsequent static image loading code will be executed almost at the same time, unable to wait for the animation to complete.

3. Core solution: Use animation end callback

To solve the above problem, we need a mechanism to listen to the end event of GIF animation. Glide's GifDrawable provides a registerAnimationCallback() method, which, combined with Animatable2Compat.AnimationCallback, can accurately execute the logic we need after the animation is played.

Modify the onResourceReady method and add animation callback:

 @Override
public boolean onResourceReady(GifDrawable resource, Object model, Target<gifdrawable> target, DataSource dataSource, boolean isFirstResource) {
    resource.setLoopCount(1); // Set the GIF to play only once // Register the animation end callback resource.registerAnimationCallback(new Animatable2Compat.AnimationCallback() {
        @Override
        public void onAnimationEnd(Drawable drawable) {
            super.onAnimationEnd(drawable);
            // After the GIF animation is played, load the static image Glide.with(GifDisplayActivity.this)
                    .asBitmap() // Load as bitmap (static image)
                    .load(R.drawable.fuseev4) // Your static image resource, usually uses the same resource ID as GIF
                    .into(imageView);
        }
    });
    return false; // Return false to let Glide set the resource to Target
}</gifdrawable>

Complete sample code:

Integrate the above modifications into GifDisplayActivity. A complete implementation is as follows:

 import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageView;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.vectordrawable.graphics.drawable.Animatable2Compat;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.DataSource;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.bumptech.glide.load.engine.GlideException;
import com.bumptech.glide.load.resource.gif.GifDrawable;
import com.bumptech.glide.request.RequestListener;
import com.bumptech.glide.request.RequestOptions;
import com.bumptech.glide.request.target.Target;

public class GifDisplayActivity extends AppCompatActivity {

    private ImageView imageView;
    private Button playGifButton; // Assume there is a button to trigger GIF play @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gif_display); // Your layout file imageView = findViewById(R.id.fuse);
        playGifButton = findViewById(R.id.play_gif_button); // Assume there is a button with the id play_gif_button in the layout playGifButton.setOnClickListener(view -> playGifOnceAndTransition());
    }

    private void playGifOnceAndTransition() {
        // Clear the previous image first to ensure that the GIF can be fully displayed imageView.setImageDrawable(null); 

        Glide.with(this)
                .asGif()
                .load(R.drawable.fuseev4) // Your GIF resource.apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.NONE)) // Disable the GIF's disk cache and ensure it is reloaded every time.listener(new RequestListener<gifdrawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<gifdrawable> target, boolean isFirstResource) {
                        if (e != null) {
                            e.printStackTrace();
                        }
                        // When loading fails, you can also choose to load a default static image Glide.with(GifDisplayActivity.this)
                             .asBitmap()
                             .load(R.drawable.default_static_image) // Assume there is a default static image.into(imageView);
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(GifDrawable resource, Object model, Target<gifdrawable> target, DataSource dataSource, boolean isFirstResource) {
                        resource.setLoopCount(1); // Set the GIF to play only once // Register the animation end callback resource.registerAnimationCallback(new Animatable2Compat.AnimationCallback() {
                            @Override
                            public void onAnimationEnd(Drawable drawable) {
                                super.onAnimationEnd(drawable);
                                // After the GIF animation is played, load the static image Glide.with(GifDisplayActivity.this)
                                        .asBitmap() // Load as bitmap (static image)
                                        .load(R.drawable.fuseev4) // Your static image resource.into(imageView);
                            }
                        });
                        return false;
                    }
                })
                .into(imageView);
    }
}</gifdrawable></gifdrawable></gifdrawable>

In activity_gif_display.xml you may want to add a button to trigger:

 <?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" tools:context=".GifDisplayActivity">

    <imageview android:id="@ id/fuse" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:layout_marginstart="4dp" android:layout_marginleft="4dp" android:padding="8dp" android:src="@drawable/fuseev4"></imageview> <!-- The first frame or placeholder image of the GIF can be displayed initially -->

    <button android:id="@ id/play_gif_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Play GIF" android:layout_margintop="16dp"></button>

</linearlayout>

4. Precautions and Best Practices

• Resource consistency: Usually, you will want to display the static image corresponding to the last frame of the GIF after the GIF animation ends. The easiest way is to load the static image using the same resource ID as the GIF. When Glide loads a GIF, if the GIF contains static frames, it can also extract the first frame as a placeholder, or load a static representation of the GIF during asBitmap().
• Cache Strategy: When loading a GIF, RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.NONE) is a common choice to ensure that each time the GIF is loaded, it starts from scratch, rather than reading from cache that may have already been played. But for subsequently loaded static images, you can consider using the default caching strategy to improve efficiency.
• Memory management: Animated GIFs generally take up more memory than static images. Make sure your GIF file size is appropriate and manage the ImageView lifecycle properly to avoid memory leaks.
• Error handling: In the onLoadFailed callback, you can handle the situation when GIF loading fails, such as displaying a default static image or error message.
• UI thread: The onAnimationEnd callback is executed on the UI thread, so you can update the UI directly there (such as loading a new image).
• Cancel callback: If your Activity or Fragment is destroyed before the GIF animation ends, it is best to cancel Glide's request in onDestroy() to avoid potential crashes or memory leaks.

Summarize

By utilizing Glide's RequestListener and GifDrawable's registerAnimationCallback() method, we can precisely control the number of times the GIF animation plays and seamlessly replace it with a static image after the animation ends. This method provides a high degree of flexibility, making it simple and efficient to implement complex GIF animation interactions in Android applications, greatly improving the user experience.

The above is the detailed content of Android Glide: Implement GIF playback once and then automatically convert to static image display. For more information, please follow other related articles on the PHP Chinese website!