What is Glide Android?
- Glide Android is an open-source media management and image-loading framework for Android.
- It supports fetching, decoding, and displaying video stills, images, and animated GIFs.
- Glide includes a flexible API that allows developers to plug into almost any network stack.
- By default, Glide uses a custom HttpUrlConnection-based stack but also includes utility libraries to plug into Google’s Volley project or Square’s OkHttp library instead.
Why is Glide Android?
Glide’s primary focus is on making scrolling any kind of list of images as smooth and fast as possible, but Glide is also effective for almost any case where you need to fetch, resize, and display a remote image.
Setup Glide in your Android Studio project
Add to your app/build.gradle
file:
dependencies {
implementation 'com.github.bumptech.glide:glide:4.7.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'
}
Code language: JavaScript (javascript)
Basic Usage of Glide
Glide.with(this).load("imageUrl").into(imageView);
Code language: CSS (css)
Glide Basic Example
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
Private String imageUrl =””;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.imageview);
Glide.with(this)
.load("imageUrl")
.into(imageView);
}
}
Code language: JavaScript (javascript)
Advanced Usage of Glide
With PlaceHolder
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.placeholderOf(R.drawable.no_image))
.into(imageView);
Code language: CSS (css)
With Placeholder and error placeholder
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.placeholderOf(R.drawable.no_image))
.apply(RequestOptions.errorOf(R.drawable.error))
.into(imageView);
Code language: CSS (css)
Resizing image
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.placeholderOf(R.drawable.no_image))
.apply(RequestOptions.overrideOf(300,300))
.into(imageView);
Code language: CSS (css)
Cropping image
Center Crop
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.centerCropTransform())
.into(imageView);
Code language: CSS (css)
Circle crop
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.circleCropTransform())
.into(imageView);
Code language: CSS (css)
Fit Center
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.fitCenterTransform())
.into(imageView);
Code language: CSS (css)
Resizing with the center crop
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.overrideOf(100,100))
.apply(RequestOptions.centerCropTransform())
.into(imageView);
Code language: CSS (css)
Resize and fit the center
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.overrideOf(100,100))
.apply(RequestOptions.fitCenterTransform())
.into(imageView);
Code language: CSS (css)
Adding a listener for Glide image loading
Glide.with(this)
.load("imageUrl")
.listener(new RequestListener<Drawable>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
Toast.makeText(getApplicationContext(),e.getMessage(),Toast.LENGTH_SHORT).show();
return false;
}
@Override
public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
Toast.makeText(getApplicationContext(),"Success",Toast.LENGTH_SHORT).show();
return false;
}
})
.into(imageView);
Code language: JavaScript (javascript)
Change Glide Default Configuration
Extending AppGlideModule you can override the default config on the glide.
In this case, I just change the default image format of the glide.
Glide default Bitmap Format is set to RGB_565 since it
consumed just 50% memory footprint compared to ARGB_8888.
@com.bumptech.glide.annotation.GlideModule
public class GlideModule extends AppGlideModule {
@Override
public void applyOptions(@NonNull Context context, @NonNull GlideBuilder builder) {
builder.setDefaultRequestOptions(RequestOptions.formatOf(DecodeFormat.PREFER_ARGB_8888));
}
}
Code language: CSS (css)
Glide Transformations
Transformations are supported by an additional third-party library, glide-transformations. First, add the dependencies:
dependencies {
implementation 'jp.wasabeef:glide-transformations:3.3.0'
// If you want to use the GPU Filters
implementation 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'
}
Code language: JavaScript (javascript)
Rounded Corners
int radius = 50; // corner radius
int margin = 10; // crop margin
GlideApp.with(this)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.transform(new RoundedCornersTransformation(radius, margin))
.into(imageView);
Code language: JavaScript (javascript)
Circle Crop
GlideApp.with(this)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.transform(new CircleCrop())
.into(imageView);
Code language: JavaScript (javascript)
Blur Effect
GlideApp.with(this)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.transform(new BlurTransformation())
.into(imageView);
Code language: JavaScript (javascript)
Multiple transforms
Also, you can use multiple transformations at once.
GlideApp.with(this)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.transform(new MultiTransformation<Bitmap>(new BlurTransformation(25), new CircleCrop()))
.into(imageView);
Code language: JavaScript (javascript)
Adjusting Image Size Dynamically
To readjust the ImageView size after the image has been retrieved, first define a SimpleTarget<Bitmap> object to intercept the Bitmap once it is loaded:
private SimpleTarget target = new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap bitmap, @Nullable Transition<? super Bitmap> transition) {
// do something with the bitmap
// set it to an ImageView
imageView.setImageBitmap(bitmap);
}
};
Code language: PHP (php)
Next, pass the SimpleTarget to Glide via into().
GlideApp.with(context)
.load("https://i2.wp.com/velmm.com/wp-content/uploads/2018/07/glide_android.png")
.asBitmap()
.into(target);
Code language: JavaScript (javascript)
Glide Android Example :
build.gradle
dependencies {
implementation 'com.github.bumptech.glide:glide:4.7.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'
implementation 'jp.wasabeef:glide-transformations:3.3.0'
// If you want to use the GPU Filters
implementation 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.4.1'
}
Code language: JavaScript (javascript)
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.imageview);
/*//Normal way
Glide.with(this)
.load("imageUrl")
.into(imageView);
//With PlaceHolder
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.placeholderOf(R.drawable.no_image))
.into(imageView);*/
//With Placeholder and error placeholder
/*Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.placeholderOf(R.drawable.no_image))
.apply(RequestOptions.errorOf(R.drawable.error))
.into(imageView);
*/
//Resizing image
/*Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.placeholderOf(R.drawable.no_image))
.apply(RequestOptions.overrideOf(300,300))
.into(imageView);*/
/*Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.overrideOf(100,100))
.apply(RequestOptions.centerCropTransform())
.into(imageView);*/
/*Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.overrideOf(100,100))
.apply(RequestOptions.fitCenterTransform())
.into(imageView);*/
//Croping image
//center crop
/*Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.centerCropTransform())
.into(imageView);*/
//Circle crop
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.circleCropTransform())
.into(imageView);
/*Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.fitCenterTransform())
.into(imageView);*/
Glide.with(this)
.load("imageUrl")
.listener(new RequestListener<Drawable>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
Toast.makeText(getApplicationContext(),e.getMessage(),Toast.LENGTH_SHORT).show();
return false;
}
@Override
public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
Toast.makeText(getApplicationContext(),"Success",Toast.LENGTH_SHORT).show();
return false;
}
})
.into(imageView);
}
}
Code language: JavaScript (javascript)
you can download this example from github.
Leave a Reply