How to create Image and Video Thumbnail in Android

There are many method and Library are available using which you can load the thumbnail of the video and Image file, but as per my experience Glide is the best solution for loading thumbnail, whether you are loading from Internet or loading from local SD card. Many of the application are using the Glide library for loading the Image and Video thumbnail.
You May Like:-
https://www.nplix.com/2017/02/11/create-animated-video-thumbnail-android/

You can download the Glide Library from here and alternatively, you can include the library directly in your app using Gradle.
One option to download the jar file also from Glide release page.  If you are downloading the library then you have to place the library inside your project bin folder.

Also Read:-
How to Create Video Gallery App Using Recyclerview
Step by Step Guide to create option Menu in Android

Here we are going to work with Gradle as its simple to implement w.r.t other methods. In this example, we will create an activity and place one image view and load the video thumbnail into this image view.

Create Project for Video and Image Thumbnail Example

First of all, create a project and give a suitable name for your project. For example, here we are taking the name as VideoThmbanail.
To create the new project in the android studio by clicking on File->New>New Project and select the empty activity. It will take some time and project will get created with default activity. xml and other required files.

Create Layout File

After this go the activity_main.xml file and modify it and add the image view in this xml file.

 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:id="@+id/activity_main"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:paddingBottom="@dimen/activity_vertical_margin"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   tools:context="com.debugandroid.videothubnail.MainActivity">  
 <LinearLayout  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical">  
   <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Video Thumbnail Example with Glide" />  
   <ImageView  
     android:layout_width="100dp"  
     android:layout_height="80dp"  
     android:id="@+id/video1"/>   
 </LinearLayout>  
 </RelativeLayout>  

I hope you have added the ImageView in your XML file and if not added then you can download the complete source code from my GitHub Example page. GitHub Source code address was given at the end of this blog.

dependency addition to Project

Now we have to add our Glide library in our app level build.gradle file as given below.

 dependencies {  
   compile fileTree(dir: 'libs', include: ['*.jar'])  
   androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {  
     exclude group: 'com.android.support', module: 'support-annotations'  
   })  
   compile 'com.android.support:appcompat-v7:24.2.1'  
   compile 'com.github.bumptech.glide:glide:3.7.0'  
   testCompile 'junit:junit:4.12'  
 }  

Create and Modify the MainActivity Class

After adding the above dependency in your build.gradle file open the MainActivity.java file and add the below code inside the onCreate method of MainActivity.

 package com.debugandroid.videothubnail;  
 import android.graphics.Color;  
 import android.net.Uri;  
 import android.support.v7.app.AppCompatActivity;  
 import android.os.Bundle;  
 import android.widget.ImageView;  
 import com.bumptech.glide.Glide;  
 public class MainActivity extends AppCompatActivity {  
   Glide glide;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     ImageView thumbnail1= (ImageView) findViewById(R.id.video1);   
     glide.with(this)  
         .load("file:///storage/emulated/0/shareThis/VID-20160825-WA0002.mp4")  
         .centerCrop()  
         .placeholder(Color.BLUE)  
         .crossFade()  
         .into(thumbnail1);  
   }  
 }  

Permission Required for the Video Thumbnail Example

Before Testing our example we need to add two permission in our AndroidManifest.xml file Internet permission in case you need to load the thumbnail online and READ_EXTERNAL_STORAGE to load the file from your SD card.

 <uses-permission android:name="android.permission.INTERNET" />  
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />  

You can now test the app that you have created in this example. When you will run it will look like as given below. Don't forget to change the name of the file which you are going to load thumbnail.

Using Glide Version 4.x.x to Create the video thumbnail

For using the Glide version 4.x.x we have to create the Module. But before creating the module we have to add/update the dependency to our project-level build.gradle file.

compile 'com.github.bumptech.glide:glide:4.0.0'
 compile 'com.github.bumptech.glide:compiler:4.0.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.0.0'

Now, We have to create a class like given below by extending the AppGlideModule and give some good name to the class, like MyAppGlideModule.

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {
    @Override
    public boolean isManifestParsingEnabled() {
        return false;
    }
}

After creating the module we also need to add this module to our AndroidManifest.XML as well, like below using meta-data tag.

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
.
.
.

 <meta-data
            android:name="com.nplix.photo.MyAppGlideModule"
            android:value="GlideModule" />
.
.
.
 <activity
            android:name=".MainActivity"

After adding the module you may need to build the project to get the reference of the GlideModule, so build the project by clicking the Build menu from Android Studio and then click on Make Project.

Now, we can use the created GlideModule like given below from activity, fragment or adapter.

GlideApp.with(context)
                    .load(imageURL)
                    .thumbnail(0.2f)
                    .apply(fitCenterTransform())
                    .fitCenter()
                    .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
                    .skipMemoryCache(false)
                    .into(imageView);

Adding Listener to Glide Module for Image Load Status

It is important for us if our app knows whether the image is loaded or not. For this, we can add the listener to the GlideModule which can perform some action depending on success or failure of the image load.

GlideApp.with(context)
                    .load(ImageUrl)
                    .thumbnail(0.2f)
                    .apply(fitCenterTransform())
                    .fitCenter()
                    .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
                    .skipMemoryCache(false)
                     .listener(new RequestListener<Drawable>() {
                         @Override
                         public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {

                             Log.e(TAG, "Load failed", e);

                             // Logs the individual causes:
                             for (Throwable t : e.getRootCauses()) {
                                 Log.e(TAG, "Caused by", t);
                             }
                             // Logs the root causes
                             e.logRootCauses(TAG);
                             return false;
                         }

                         @Override
                         public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                            //loaded do something 
                          return false;
                         }
                     })
                    .into(imageView);

 

Using Glide in Kotlin

If you are using the Kotlin language instead of Java than you can follow the below steps to use the Glide in your project.

1. Include the Glide Dependency to your build.gradle file

implementation 'com.github.bumptech.glide:glide:4.4.0'
    kapt 'com.github.bumptech.glide:compiler:4.4.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.4.0

1. Apply the kotlin-kapt plugin to your project by adding the code in build.gradle.

apply plugin: 'kotlin-kapt'

1. Add the INTERNET permission to your AndroidMainfest.xml file

<uses-permission android:name="android.permission.INTERNET" />

1. Create AppGlideModule as given below.

MyGlideModule.kt

package com.nplix.imagegallerykotlin

import com.bumptech.glide.annotation.GlideModule
import com.bumptech.glide.module.AppGlideModule

@GlideModule
class MyGlideModule : AppGlideModule()

1. Create Layout file of the MainActivity

 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.nplix.imagegallerykotlin.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ImageView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

6.Build the project by clicking on Build->Make Project and use the generated module as given below.

MainActivity.kt

package com.nplix.imagegallerykotlin

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        GlideApp.with(this)
                .load("https://www.nplix.com/wp-content/uploads/2018/02/9l_326fiszk-luca-bravo.jpg")
                .centerInside()
                .into(ImageView)
    }
}

It is a very simple implementation of the Glide but using glide library you can do much more.

You can download the Java source code of the example  GitHub . If you have any question or query then feel free to comment here.

The source code of Kotlin for Glide.