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 Theme Creation, Programmatic Way

Flutter and Dart is an excellent combination for creating the mobile app with material design with nice GUI. Its lots of widget which help the developer for creating the app UI very fast with respect to the other language. You may face some problem in starting due to comm, curly brace and semicolon but after some time you will find the way how to work with these all stuff and it becomes very easy for you. But in this article, we are not going to discuss all these. In this article, we will handle a very interesting topic on how to create a custom theme or multiple themes and let's user decide which theme to use.



Create a flutter project



So let's create a flutter project by selecting the appropriate option from the File menu in android studio or Visual Code. If you are new to Flutter and Dart you can check out our recent post to get started Creating Cross-platform app using flutter.



Once your project is created you will get the default counter app and you try running the app in the…

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 sync completed.
Update the project build config …

Flutter State Management With Provider and ChangeNotifier

Flutter state management with provider library and why it's so important? There are lots of topics in flutter which are very important but out of those state management of your flutter application is the most important and little bit complicated as well. So in this article, I will try to explain how to use the provider package for managing the state of flutter and dart application and how to access the data down the hierarchy of the widget tree without recreating the whole UI.



Basic knowledge of the state management and data flow in the Flutter



Before starting the coding I would like to explain some basics about the Flutter application so that you can understand, why it's important to manage the state of your application in the correct way.



In Flutter, everything is a widget and whenever the state of your application changes the UI is recreated the UI with the new data. Let's list out the topic or problem that we are going to explore about state management.



Challenge of St…