In Android, loading images is difficult as you have to deal with network requests, image caching, and image memory. Another big challenge while caching an image is that image loaders also need to do encoding and decoding, especially with large images because they are very memory inefficient and need a lot of memory for a single large image. The solution to all these challenges is to use Glide in Android.
Glide is an image library for Android. It is created and maintained by bumptech and is recommended by Google. Glide hides all the complexity as it will deal with back-on threading, loading images from the internet and even caching and it also provides animated GIF support . Glide makes it quite easier for displaying images from remote locations.
Glide Installation in Android:
implementation ‘com.github.bumptech.glide:glide:4.15.1’
annotationProcessor ‘com.github.bumptech.glide:compiler:4.15.1’
In order to load an Image with Glide you need Internet permission in your Android Manifest file.
<uses-permission android:name="android.permission.INTERNET" />Creating XML layout
In this step, we are going to design the XML layout consisting of Buttons and an ImageView.
Note: Here I am using view binding to link my xml to my java file. We will discuss this in a separate tutorial.
<layout 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"
tools:context=".MainActivity">
<data>
<variable
name="category"
type="com.example.glideexample.MainActivity" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:id="@+id/image"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/url"
android:layout_margin="2dp"
android:text="Load"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/resize"
android:layout_margin="2dp"
android:text="Resize"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/fitcentre"
android:text="Fit Centre"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/centrecrop"
android:layout_margin="2dp"
android:text="Centre Crop"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/drawable"
android:layout_margin="2dp"
android:text="Drawable"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/placeholder"
android:text="Place Holde"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/cache"
android:layout_margin="2dp"
android:text="Cache"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/circlecrop"
android:layout_margin="2dp"
android:text="Circle Crop"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/error"
android:text="Error"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/target"
android:layout_margin="2dp"
android:text="Target"/>
</LinearLayout>
</LinearLayout>
</layout>Implementing Glide Features
Loading an image from a URL
Glide displays the images from links without downloading them.
mBinding.url.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("Your Image URL")
.into(mBinding.image);
}
});Image Caching
Glide checks the cache before starting a new request for an image:
- Active resources – Glide checks if the image is visible in another view.
- Memory cache – Glide checks if the image was recently loaded and is still in memory.
- Data – Was the data in this image obtained from the written disk cache before
Loading only from the cache
Glide.with(MainActivity.this)
.load("Image URL")
.onlyRetrieveFromCache(true)
.into(mBinding.image);Targets
Targets act as the interface between the request and the object sending the request. The purpose of targets is to display placeholders, loading images, and assigning the correct dimensions for each requested image.
mBinding.target.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.asGif()
.load(R.mipmap.ic_launcher)
.into(new SimpleTarget<GifDrawable>() {
@Override
public void onResourceReady(@NonNull GifDrawable resource, @Nullable Transition<? super GifDrawable> transition) {
resource.start();
mBinding.image.setImageDrawable(resource);
}
});
}
});
Loading Drawable Image
Glide allows loading of Drawable image files into ImageViews.By adding the following lines of code this can be implemented:
mBinding.drawable.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load(R.mipmap.ic_launcher)
.into(mBinding.image);
}
});CenterCrop
To fill the requested bounds of the ImageView CenterCrop() is a cropping technique that scales the image and then crops the extra.The ImageView will be filled completely, but the entire image might not be displayed.
Center crop is implemented by using the centerCrop() method.
mBinding.centrecrop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load(R.mipmap.ic_launcher)
.centerCrop()
.into(mBinding.image);
}
});FitCenter
fitCenter() is a cropping technique that scales the image so that both dimensions are equal to or less than the requested bounds of the ImageView. The image will be displayed completely, but might not fill the entire ImageView.
It is implemented by using the fitCenter() method.
mBinding.fitcentre.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load(R.mipmap.ic_launcher)
.fitCenter()
.into(mBinding.image);
}
});CircleCrop
circleCrop is a cropping technique that scales the image inside the ImageView but the resulting image is converted to a circular outline.
It is implemented by using the circleCrop() method.
mBinding.circlecrop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("Image URL")
.circleCrop()
.into(mBinding.image);
}
});Placeholders
Placeholders are the images visible while the request is still in progress . The placeholder will disappear once the request is successful. However in case the request fails to load the place holder will persist in the ImageView.
mBinding.placeholder.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("image url")
.placeholder(R.drawable.placeholder)
.into(mBinding.image);
}
});Errors Images
An error image is displayed when the requested url is null or source fails to load
mBinding.error.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("Image url")
.error(R.drawable.error)
.into(mBinding.image);
}
});Android Glide Example in Android Studio:
Below is the example of using Glide in Android in which we will show different features those are provided by Glide to load the image from network in your application.
Below you can download code or read step by step example explanation:
We have used a simple image url that will be loaded in imageview with Glide library. On tap of buttons in our layout , you will see image loading but in different ways.
- Step 1: Create a new project in your android studio and name it as Glide Example.
- Step 2: Open res -> layout -> xml (or) main.xml and add following code : In this step, we open an XML file and add the code to display a layout in our activity. In layout we have used one image view that is going to be your target imageview, in which Image will be displayed and I have used a few buttons on click of these buttons we will perform different operations that will reflect in imageview.
<layout 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"
tools:context=".MainActivity">
<data>
<variable
name="category"
type="com.example.glideexample.MainActivity" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:id="@+id/image"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/url"
android:layout_margin="2dp"
android:text="Load"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/resize"
android:layout_margin="2dp"
android:text="Resize"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/fitcentre"
android:text="Fit Centre"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/centrecrop"
android:layout_margin="2dp"
android:text="Centre Crop"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/drawable"
android:layout_margin="2dp"
android:text="Drawable"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/placeholder"
android:text="Place Holde"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/cache"
android:layout_margin="2dp"
android:text="Cache"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/circlecrop"
android:layout_margin="2dp"
android:text="Circle Crop"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="2dp"
android:id="@+id/error"
android:text="Error"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/target"
android:layout_margin="2dp"
android:text="Target"/>
</LinearLayout>
</LinearLayout>
</layout>- Step 3: Open src -> package -> MainActivity.java
In this activity, We linked the views to java using view binding and then we created a method in which we handled every button click. Once you click any button, the image will load in the image view differently on every button click. Glide feature is used and the image will load accordingly. Below is the code of the main activity java class.
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;
import android.os.Bundle;
import android.view.View;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.resource.gif.GifDrawable;
import com.bumptech.glide.request.target.SimpleTarget;
import com.bumptech.glide.request.transition.Transition;
import com.example.glideexample.databinding.ActivityMainBinding;
public class MainActivity extends AppCompatActivity {
ActivityMainBinding mBinding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
mBinding.url.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("Your Image URL")
.into(mBinding.image);
}
});
mBinding.cache.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("Image URL")
.onlyRetrieveFromCache(true)
.into(mBinding.image);
}
});
mBinding.centrecrop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load(R.drawable.centrecrop)
.centerCrop()
.into(mBinding.image);
}
});
mBinding.circlecrop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("Image URL")
.circleCrop()
.into(mBinding.image);
}
});
mBinding.error.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("Image url")
.error(R.drawable.error)
.into(mBinding.image);
}
});
mBinding.fitcentre.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load(R.drawable.fitcentre)
.fitCenter()
.into(mBinding.image);
}
});
mBinding.placeholder.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("image")
.placeholder(R.drawable.placeholder)
.into(mBinding.image);
}
});
mBinding.target.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.asGif()
.load(R.mipmap.ic_launcher)
.into(new SimpleTarget<GifDrawable>() {
@Override
public void onResourceReady(@NonNull GifDrawable resource, @Nullable Transition<? super GifDrawable> transition) {
resource.start();
mBinding.image.setImageDrawable(resource);
}
});
}
});
mBinding.drawable.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load(R.drawable.drawable)
.into(mBinding.image);
}
});
mBinding.placeholder.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Glide.with(MainActivity.this)
.load("image url")
.placeholder(R.drawable.placeholder)
.into(mBinding.image);
}
});
}
}Output:
Now run the App and you will see an image loaded using Glide library in your Android App.
Leave a Reply