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

Kotlin Parcelable Array Objects Send To Activity

We know that IPC (Inter Process Communication) between the activity is an extremely important part of any application development. We often required that we need to send some data to other activity. For example, we may be required to send an array of data, data could be an Integer, String, Long, Double, Float or any other custom data objects. So, In this example, we are going to learn how to implement the Kotlin Parcelable Array object to send the data from one activity to second activity. What is Parcel? The parcel class is designed as a high-performance IPC transport. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC, and references to live IBinde r objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. Create Kotlin Parcelable Array Objects Parcelable is API for placing the arbitrary objects into the Parcel. In Actual in android app development, Parcelable is an interface

Create Custom EditText View in Android

We use the EditText for taking the input from the user and use it at several places in our project. We required to do lots of customization for each time and there are lots of redundant code we write. Writing and managing these redundant codes is very difficult for example if we want to change the look and feel of the view them we need to modify it at each place where our EditText is getting used. So to avoid these kinds of the problem we can create our own Custom EditText View by just. The EditText view is just an extension of the TextView with lots of editing option and properties that required for the user input. How To Create Custom EditText View For creating the Custom EditText we need to extend the AppCompatEditText and override all three constructors of the view as given below. import android.content.Context; import android.graphics.Typeface; import android.support.annotation.Nullable; import android.support.v7.widget.AppCompatEditText; import android.util.AttributeSet; public