How to Use Glide Image Loader Library in Android Apps?
Glide, like Picasso, can load and display images from many sources, while also taking care of caching and keeping a low memory impact when doing image manipulations. Official Google apps (like the app for Google I/O 2015) are using Glide. In this article, we’re going to explore the functionalities of Glide and why it’s superior in certain aspects.
Glide is an Image Loader Library for Android developed by bumptech and is a library that is recommended by Google. It has been used in many Google open source projects including Google I/O 2014 official application. It provides animated GIF support and handles image loading/caching. Animated GIF support is currently not implemented in Picasso. Yes, images play a major role in making the UI of an App more interactive and user-friendly too. So, as an Android Developer, we should take care of using images in App. We should handle the different aspects of an image like the slow unresponsive image, memory issues, loading errors, and many more. If you are not handling these aspects in your application, then your app will make a bad impression on your users.
How to Use Glide Android Library?
1. For using Glide in the android project, we have to add the dependency in gradle file. So, For adding dependency open app/build.gradle file in the app folder in your Android project and add the following lines inside it.
dependencies {
implementation ‘com.github.bumptech.glide:glide:4.11.0’
annotationProcessor ‘com.github.bumptech.glide:compiler:4.11.0’
}
Glide also needs Android Support Library v4, please don’t forget to import support-v4 to your project like above as well. But it is not kind of a problem since Android Support Library v4 is basically needed in every single new-age Android project. Now sync your gradle once again. If you get any type of error then you may check the error on stackoverflow.
2. Now add InternetPermission inside the AndroidManifest.xml file. Open the manifest.xml file and add the following line.
<uses-permission android:name=”android.permission.INTERNET”/>
3. Open the layout file for the main Activity. We need to add an ImageView to the layout. It doesn’t need to be fancy. The following code snippet shows you what I mean.
ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/imageView”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
4. Now Navigate to the main Activity file and Add the following code block to the onCreate() method.
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Glide.with(context)
.load(“YOUR IMAGE URL HERE”)
.into(imageView)
.error(R.drawable.imagenotfound);
In the first line, we are getting the ImageView instance from the layout. And then load the image from the above remote URL using Glide library.
Advanced Usage
For any real-time application, we must think of all possible cases. In the above code, we just store the image from the server link into the imageView.There are some more cases.
- Resize
Glide.with(context)
.load(“YOUR IMAGE URL HERE”)
.override(300, 200)
.error(R.drawable.imagenotfound)
.into(imageView);
Here we are using Glide to fetch a remote image and overriding(resizing) it using before displaying it in an image view.
- Placeholder
Glide.with(context)
.load(“YOUR IMAGE URL HERE”)
.placeholder(R.drawable.placeholder)
.into(imageView);
If your application relies on remote assets, then it’s important to add a fallback in the form of a placeholder image. The placeholder image is shown immediately and replaced by the remote image when Glide has finished fetching it.
- Handling errors
Glide.with(context)
.load(“YOUR IMAGE URL HERE”)
.placeholder(R.drawable.placeholder)
.error(R.drawable.imagenotfound)
.into(imageView);
We already saw how the placeholder method works, but there’s also an error method that accepts a placeholder image. Glide will try to download the remote image three times and display the error placeholder image if it was unable to fetch the remote asset.
- GIFS Support
GlideDrawableImageViewTarget imagePreview = new GlideDrawableImageViewTarget(imageView);
Glide.with(this).load(url).listener(new RequestListener() {
@Override
public boolean onException(Exception e, String model, Target target, boolean isFirstResource) {
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resource, String model, Target target,
boolean isFromMemoryCache, boolean isFirstResource) {
return false;
}
}).into(imagePreview);
- Effects
Blur image:
Glide.with(context)
.load(“YOUR IMAGE URL HERE”)
.bitmapTransform(new BlurTransformation(context))
.into(imageView);
- Multiple Transform:
Glide.with(context)
.load(“YOUR IMAGE URL HERE”)
.bitmapTransform(new BlurTransformation(context, 25), new CropCircleTransformation(context))
.into(imageView);
- Circle crop:
Glide.with(context)
.load(“YOUR IMAGE URL HERE”)
.bitmapTransform(new CropCircleTransformation(context))
.into(imageView);
- Rounded Corners:
int radius = 50;
int margin = 20;
Glide.with(context)
.load(“YOUR IMAGE URL HERE”)
.bitmapTransform(new RoundedCornersTransformation(context, radius, margin))
.into(imageView);
Contact Us