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'
}Basic Usage of Glide
Glide.with(this).load("imageUrl").into(imageView);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);
}
}Advanced Usage of Glide
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);Cropping 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);Fit Center
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.fitCenterTransform())
.into(imageView);Resizing with the center crop
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.overrideOf(100,100))
.apply(RequestOptions.centerCropTransform())
.into(imageView);Resize and fit the center
Glide.with(this)
.load("imageUrl")
.apply(RequestOptions.overrideOf(100,100))
.apply(RequestOptions.fitCenterTransform())
.into(imageView);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);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));
}
}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'
}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);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);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);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);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);
}
};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);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'
}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);
}
}you can download this example from github.
Leave a Reply