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.

First of all, create a project and give a suitable name to your project. For example, here we are taking the name as VideoThmbanail.
So 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.

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.

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'  
 }

After adding the above dependency in your build.gradle file open the MainActivity.java file and add the below code inside 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);  
   }  
 }

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.

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

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

Originally published at NPLIX.