<p>On loading the list of images manually these three problems encounter i.e OutOfMemoryError, slow loading and UI unresponsiveness(flickering). To come out from these problems we can use <span style="color: #0000ff;"><strong>Glide</strong></span> library. In this article, we will talk about Glide in brief, how glide solved the above problems and also build a simple image gallery app where all the images will be loaded from internet and displayed in a grid manner.</p>
<h3><strong><span style="color: #000080;">Introduction to Glide Library</span></strong></h3>
<p>Glide is an open source image loading and caching library for Android APPs developed by <span style="color: #008000;"><strong>bumptech</strong></span>. It is fast, efficient and widely used image loading library, primarily focused on smooth scrolling. It is used in many popular Android Apps and one of the most popular library for image loading and caching.</p>
<p>To load the image in an imageView using glide we have to simply write the below line:</p>
<pre>Glide.with(mContext)
.load(imgUrl) 
.into(imageView);</pre>
<p>Glide library solves the above discuss problems that come while loading a list of images manually :</p>
<h4><span style="color: #000080;"><strong class="kh lz">OutOfMemoryError</strong></span></h4>
<p>Glide mainly takes these three as parameter i.e context/fragment/Activity, imageUrl/drawable image and imageView. In order to solve the <span style="color: #008000;"><strong>OutOfMemoryError</strong></span> problem, it takes imageView. Let&#8217;s say your server is sending an image of (2000&#215;2000) but in your android application, you are going to show an image of (200&#215;200). When you decode server image in memory it will take around 40mb.</p>
<p>Glide has taken the imageView as a parameter so it knows the actual height and width of the imageView in which you want to show the image. It knows that it is (200&#215;200). So Glide instead of loading the full-size image(2000&#215;2000) from the given URL into the disk cache it will first resize it to the size of the imageView(200&#215;200) and then store it into the disk cache after that it will decode the resized image(200&#215;200) into bitmap and load it into the memory so its size will become 4mb. In this way, it helps to prevent your app from throwing popular <strong class="kh lz"><span style="color: #008000;">OutOfMemoryError</span>.</strong></p>
<h4><span style="color: #000080;"><strong>Fast Loading and UI responsive</strong></span></h4>
<p>Just like other systems do Glide will also cancel all the network call and only make network calls that are visible to user. For example, you are scrolling list of images and you stop at 26th item, so the network call will only be going for the 26 and above item that is visible.</p>
<p>One more important thing that glide do internally is <span style="color: #008000;"><strong>caching</strong></span>. When we scroll the list of images from bottom to top it will not download the image again instead it will check the image in <span style="color: #008000;"><strong>memory cache</strong></span> if it exists then it will get it and display it to the user. But in case if it does not exist then it will check in <strong><span style="color: #008000;">disk cache</span></strong> if it is there then it will get the file image from the file system and decode it to bitmap, store it to memory cache and return it to imageView. In case if the image is not available in disk cache also then only it will make a <strong><span style="color: #008000;">network call</span></strong> , store it in both <strong><span style="color: #008000;">memory and disk cache</span></strong>, get the image and display it.</p>
<p><img class="alignnone wp-image-1226" src="https://c1ctech.com/wp-content/uploads/2019/09/Screenshot-2019-09-14-16.10.21-1024x550.png" alt="Screenshot 2019-09-14 16.10.21" width="777" height="417" /></p>
<h3><span style="color: #000080;"><strong>Advantages of using Glide library :</strong></span></h3>
<ul>
<li>Supports fetching, decoding, and displaying video stills, images, and animated GIFs.</li>
<li>It is designed to work with Activity and Fragment’s life cycle too. You can pass the activity or fragment context with <span style="color: #008000;"><strong class="kh lz"><em class="lg">Glide.with()</em></strong> </span>and it will brilliantly integrate with activity lifecycle callbacks such as <span style="color: #008000;"><strong class="kh lz"><em class="lg">onPause()</em></strong></span> or <span style="color: #008000;"><strong class="kh lz"><em class="lg">onResume()</em></strong></span>.</li>
<li>Glide supports <span style="color: #008000;"><strong>animated GIF</strong></span> images and because of Glide integrates with your activity life-cycle, animated GIFs are also paused in <em class="lg"><strong><span style="color: #008000;">onStop()</span></strong> </em>to avoid draining the battery in the background.</li>
<li>Loads <strong><span style="color: #008000;">thumbnail</span></strong> (blurred) first and then loads the high-resolution image like in WhatsApp or Facebook</li>
<li>Glide has its own implementation of <strong><span style="color: #008000;">HttpURLConnection</span></strong> which loads images from remote URLs over the network.</li>
<li>One good thing about Glide is, it provides various configuration and customization options. So, you can tweak Glide library as per your requirement. You can read more about this at <strong><span style="color: #008000;"><a class="bz dk nf ng nh ni" style="color: #008000;" href="https://github.com/bumptech/glide/wiki/Configuration" target="_blank" rel="noopeneer noopener noreferrer">configuration</a></span></strong> page.</li>
<li>You can also add <strong><span style="color: #008000;">placeholder</span></strong> image to display while loading the image or while the image loading fails.</li>
<li>Supports <strong><span style="color: #008000;">Crossfading</span></strong> effects between the media</li>
<li>Supports image arbitrary <strong><span style="color: #008000;">transformations</span></strong> like loading image in circular shape or any other shape.</li>
<li>Provides better <strong><span style="color: #008000;">Memory and disk</span></strong> caching mechanisms.</li>
</ul>
<h3><strong><span style="color: #000080;">How to Use It?</span></strong></h3>
<p>Integrating <span style="color: #008000;"><strong>Glide</strong></span> in your project is very easy. First, add the glide dependency to your <span style="color: #008000;"><strong>build.gradle</strong></span>.</p>
<p><span style="color: #000080;"><strong>build.gradle</strong></span></p>
<pre>dependencies {
 
 <strong><span style="color: #0000ff;">//glide</span></strong>
 implementation 'com.github.bumptech.glide:glide:4.9.0'
 
}</pre>
<p>Second load the image into ImageView using below code snippet.</p>
<pre>String imgUrl = <strong><span style="color: #008000;">"https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"</span></strong>;

ImageView imageView = (ImageView) view.findViewById(R.id.thumbnail);

Glide.with(mContext).load(imgUrl)
.thumbnail(0.5f)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(imageView);</pre>
<p>Now let’s start building the image gallery app.</p>
<h3><strong><span style="color: #000080;">Building Image Gallery App</span></strong></h3>
<p><strong>1</strong>. Create a new project in Android Studio from <span style="color: #008000;"><strong>File ⇒ New Project</strong></span>. Select <span style="color: #008000;"><strong>Blank Activity</strong></span> and then name the application as <strong><span style="color: #008000;">GlideDemo</span></strong>.</p>
<p><strong>2</strong>. Open <span style="color: #008000;"><strong>build.gradle</strong></span> and add <strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://github.com/bumptech/glide" target="_blank" rel="nofollow noopener noreferrer">Glide</a></span></strong> and <strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://c1ctech.com/android-recyclerview-example/" target="_blank" rel="noopener noreferrer">RecyclerView</a></span></strong> dependencies. <strong>RecyclerView</strong> is used to show the gallery images in a Grid fashion.</p>
<h4><strong><span style="color: #0000ff;">Add Dependencies Into build.gradle</span></strong></h4>
<pre>dependencies {
 implementation fileTree(dir: 'libs', include: ['*.jar'])
 implementation 'androidx.appcompat:appcompat:1.0.2'
 implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
 testImplementation 'junit:junit:4.12'
 androidTestImplementation 'androidx.test:runner:1.1.1'
 androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'

 <span style="color: #0000ff;"><strong>//glide</strong></span>
 implementation 'com.github.bumptech.glide:glide:4.9.0'

 <strong><span style="color: #0000ff;">// recyclerView</span></strong>
 implementation 'androidx.recyclerview:recyclerview-selection:1.0.0'

}</pre>
<p><strong>3</strong> .Open <span style="color: #008000;"><strong>AndroidManifest.xml</strong> <span style="color: #000000;">and</span></span> add the <strong><span style="color: #008000;"><em>INTERNET</em></span></strong> permission as we need to get the image from Url.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p><span style="color: #0000ff;"><strong>AndroidManifest.xml</strong></span></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="trendlife.glidedemo">;

 <strong><span style="color: #008000;"><;uses-permission android:name="android.permission.INTERNET"/>;</span></strong>

 <;application
 android:allowBackup="true"
 android:icon="@mipmap/ic_launcher"
 android:label="@string/app_name"
 android:roundIcon="@mipmap/ic_launcher_round"
 android:supportsRtl="true"
 android:theme="@style/AppTheme">;
 <;activity android:name=".MainActivity">;
 <;intent-filter>;
 <;action android:name="android.intent.action.MAIN" />;

 <;category android:name="android.intent.category.LAUNCHER" />;
 <;/intent-filter>;
 <;/activity>;
 <;/application>;

<;/manifest>;</pre>
<p><strong>4</strong> .Open the layout file of your MainActivity and add the <span style="color: #008000;"><strong>recyclerView</strong></span> as shown below:</p>
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;RelativeLayout 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"
 android:background="@color/colorPrimaryDark"
 tools:context=".MainActivity">;


 <;androidx.recyclerview.widget.RecyclerView
 android:id="@+id/recyclerview"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:scrollbars="vertical"
 />;

<;/RelativeLayout>;</pre>
<p><strong>5</strong> .Under <span style="color: #008000;"><strong>res ⇒ layout</strong></span>, create a layout named <span style="color: #008000;"><strong>gallery_thumbnail.xml</strong></span>. This layout contains an <span style="color: #008000;"><strong>ImageView</strong></span> to display the thumbnail image in the gallery view.</p>
<p><span style="color: #0000ff;"><strong>gallery_thumbnail.xml</strong></span></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="200dp"
 android:layout_height="200dp"
 android:orientation="vertical">;

 <;ImageView
 android:id="@+id/thumbnail"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY" />;

<;/LinearLayout>;</pre>
<p><strong>6</strong> .Create a new model class <span style="color: #008000;"><strong>imageUrl.java</strong></span>. These URLs will be invoked by the Glide library on bind to display the images one by one in the image gallery.</p>
<p><strong><span style="color: #0000ff;">imageUrl.java</span></strong></p>
<pre>package trendlife.glidedemo;

public class ImageUrl {


 String imageUrl;

 public String getImageUrl() {
 return imageUrl;
 }

 public void setImageUrl(String imageUrl) {
 this.imageUrl = imageUrl;
 }
}</pre>
<p><strong>7</strong> .Under <span style="color: #008000;"><span style="color: #000000;">the root</span><b> project </b><span style="color: #000000;">directory</span></span>, create a class named <span style="color: #008000;"><strong>GalleryAdapter.java</strong></span> This is an adapter class which inflates the <span style="color: #008000;"><strong>gallery_thumbnail.xml</strong></span> and renders the images in recyclerView.</p>
<p><span style="color: #0000ff;"><strong>GalleryAdapter.java</strong></span></p>
<pre>package trendlife.glidedemo;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.Priority;
import com.bumptech.glide.request.RequestOptions;

import java.util.ArrayList;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class GalleryAdapter extends RecyclerView.Adapter<;GalleryAdapter.MyViewHolder>; {

 private ArrayList<;ImageUrl>; imageUrls;
 private Context context;

 public GalleryAdapter(Context context, ArrayList<;ImageUrl>; imageUrls) {
 this.context = context;
 this.imageUrls = imageUrls;
 }

 @NonNull
 @Override
 public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
 View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.gallery_thumbnail, parent, false);
 return new MyViewHolder(view);
 }

 @Override
 public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
 
 RequestOptions requestOptions = new RequestOptions()
 .placeholder(R.drawable.place_holder_image)
 .error(R.drawable.error_img)
 .fitCenter();

 Glide.with(context)
 .setDefaultRequestOptions(requestOptions)
 .load(imageUrls.get(position).getImageUrl())
 .into(holder.img);

 }

 class MyViewHolder extends RecyclerView.ViewHolder {

 ImageView img;

 public MyViewHolder(@NonNull View itemView) {
 super(itemView);
 img = itemView.findViewById(R.id.thumbnail);
 }
 }

 @Override
 public int getItemCount() {
 return imageUrls.size();
 }
}</pre>
<p><strong>8</strong> .Finally, open <span style="color: #008000;"><strong>MainActivity.java</strong></span> and pass the array list to recyclerView’s adapter class as shown below:</p>
<p><span style="color: #0000ff;"><strong>MainActivity.java</strong></span></p>
<pre>package trendlife.glidedemo;

import android.os.Bundle;
import android.util.Log;

import java.util.ArrayList;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DefaultItemAnimator;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

 RecyclerView recyclerView;
 GalleryAdapter mAdapter;


 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 recyclerView = findViewById(R.id.recyclerview);


 RecyclerView.LayoutManager layoutManager = new GridLayoutManager(getApplicationContext(), 2);
 ArrayList imageUrlList = prepareData();
 mAdapter = new GalleryAdapter(getApplicationContext(), imageUrlList);


 recyclerView.setLayoutManager(layoutManager);
 recyclerView.setItemAnimator(new DefaultItemAnimator());
 recyclerView.setAdapter(mAdapter);


 }

 private ArrayList prepareData() {

<span style="color: #0000ff;"><strong>// here you should give your image URLs and that can be a link from the Internet</strong></span>
 String imageUrls[] = {
<strong><span style="color: #008000;">"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWqxdGGltL3Ap_6e6j5L8Ga9Ly08VRSsIyGBPzkdMdCrSuDOomTA",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8lzDnZhrCxA6xeFtoRno_VC2kmU5G5MCdLjscFT9EXcW9fRp1JA",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0Frq15F4tqShs3o8_EOQWmRDnBpvqze2-Ivnh7_hPcpFA_nxJtA",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT1PLkjujhPe8bFhY_C3eVTk3YZKV7D_FvgmMdzRpU10f8cg2Xq",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-BshanQe-72-_aILEOrdy0tktLS3D0OyCuZETTHS-xspWyyTdgQ",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTIog4jVdAtTmktR6ZWeOLWSOuciGhIpnYcd_ZaeG9fEFAoOKZsDw",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2RiBylPwwMIa9Ky0eyss19pxrtKBcgiZGgY70G0YfbUXSqT1qNw",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSpSvHExAZQVYjGSNFaG4aMoow4IIHXHDmVftcTnYf0ICaXtegPg"</span></strong>
}; 

ArrayList imageUrlList = new ArrayList<;>;(); 
for (int i = 0; i <; imageUrls.length; i++) {
 ImageUrl imageUrl = new ImageUrl(); 
imageUrl.setImageUrl(imageUrls[i]); 
imageUrlList.add(imageUrl); } 
Log.d("MainActivity", "List count: " + imageUrlList.size()); 
return imageUrlList; } 
}</pre>
<p>If you run the app, you can see the images displayed in a grid manner. Be sure that your device is connected to the internet.</p>
<p><img class="alignnone wp-image-1227" src="https://c1ctech.com/wp-content/uploads/2019/09/Screenshot_1568731358-576x1024.png" alt="Screenshot_1568731358" width="372" height="662" /></p>
<p> ;</p>
<p> ;</p>
<p> ;</p>
<p> ;</p>