Skip to main content

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.



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.

Image and Video 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)
}
}


Using Glide in Kotlin to create Image and Video Thumbnail

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.

Comments

Post a Comment

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit. What is Retrofit? If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps. Further, you can check the Retrofit Library here . So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website. Prerequisite for using the Retrofit for WordPress Android App Ther

How to Read and Write JSON data in Kotlin with GSON

Kotlin is now official language for Android development and it is well supported in Android Studio. So here in this tutorial, we are going to learn about how to read and write JSON data in Kotlin using GSON. If you would like to learn the java version of this tutorial check out the last tutorial " How to Read and Write JSON data using GSON ". Introduction In this tutorial, we will write two methods. In the first method, we will create a JSON file and in second method we will read the file and print in a text box.  If you like to know more about the basic entity of JSON you can check out Basic JSON entity here . What is JSON? JSON stands for J ava S cript O bject N otation JSON is a lightweight data-interchange format It is "self-describing" and easy to understand JSON is language independent and can we used in any language JSON Syntax Rules Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold