Android Development Notes (180) Use Glide to load special images

Posted by sayoko on Thu, 20 Jan 2022 09:43:40 +0100

Android has added a new image decoder, ImageDecoder, since 9.0, which supports direct reading of graphical data from GIF files and the graphics tool Animatable to display GIF motions on image views. Although GIF animations can be played on the interface through ImageDecoder, the implementation code is bloated on one hand and Android9 on the other. 0 before support, obviously not very useful. Now that you have Glide, it's easy to load GIF maps. It's as simple as the following line of code:

Glide.with(this).load(R.drawable.happy).into(iv_cover);

The effect of using Glide to play GIF animations is shown in the following two images, one is the interface at the beginning of GIF animation and the other is the interface near the end of GIF animation.

 

In addition to GIF animation support, Glide can even automatically load video covers, which render the first frame of a video file to an image view. This feature is very real. Showing the video cover first and then playing it after the user clicks can effectively prevent the waste of resources. For example, to load a cover of a local video, first select a video from the system video library, get the Uri object of the video, then load it with Glide, and display the video cover on the image view. Examples of video selection and cover loading codes are as follows:

// Register a aftercare activity result launcher to get content of the specified type
ActivityResultLauncher launcher = registerForActivityResult(new ActivityResultContracts.GetContent(), uri -> {
    if (uri != null) { // Load video cover if video path is not empty
        Glide.with(this).load(uri).into(iv_cover);
    }
});
findViewById(R.id.btn_local_cover).setOnClickListener(v -> launcher.launch("video/*"));

The effect of loading a video cover with Glide is shown in the following two images, one for selecting the interface of the video and the other for loading the cover.

 

Glide can load not only cover pages for local videos, but also cover pages for web videos. Of course, Because downloading network videos consumes bandwidth, you need to specify the time at which the video frames are located so that Glide will only load the video at that location without downloading the entire video. The frameOf method of the RequestOptions class is used to specify the time point of the video frame, and the specific request parameter construction code is as follows:

// Get request parameters for a specified point in time
private RequestOptions getOptions(int position) {
    // Specify a frame at a time position, in microseconds
    RequestOptions options = RequestOptions.frameOf(position*1000*1000);
    // Get the most recent video frame
    options.set(VideoDecoder.FRAME_OPTION, MediaMetadataRetriever.OPTION_CLOSEST);
    // Perform conversion from video frame to bitmap object
    options.transform(new BitmapTransformation() {
        @Override
        protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
            return toTransform;
        }

        @Override
        public void updateDiskCacheKey(MessageDigest messageDigest) {
            try {
                messageDigest.update((getPackageName()).getBytes(StandardCharsets.UTF_8));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    });
    return options;
}

Next, Glide's apply method is called to set the request parameters and load the cover image of the network video. The detailed loading code example is as follows:

// Load video at 10 seconds
findViewById(R.id.btn_network_one).setOnClickListener(v -> {
    // Get request parameters for a specified point in time
    RequestOptions options = getOptions(10);
    // Load cover pictures of Web Videos
    Glide.with(this).load(URL_MP4).apply(options).into(iv_cover);
});
// Load video at 45 seconds
findViewById(R.id.btn_network_nine).setOnClickListener(v -> {
    // Get request parameters for a specified point in time
    RequestOptions options = getOptions(45);
    // Load cover pictures of Web Videos
    Glide.with(this).load(URL_MP4).apply(options).into(iv_cover);
});

Glide loads the web video cover as shown in the following two images: the picture at the 10th second of loading the video and the picture at the 45th second of loading the video.

 

 

 

 


Click here to see the full catalog of Android Development Notes

Topics: Android glide