Why Glide for images?-?Part?2

This is the second part in a two-part series. You could read the first part .

In part 1 we’re talking about how to use glide in your android application and how glide could optimize your app performance and we implement a sample .

In this we we’ll talk about what operations could glide take care of it for you like Transformations ,cashing and other important methods we’ll focus on methods in glide and explain them

the first method we’ll talk about

Transformations

Transformations can be used as an image manipulation before the image is being displayed by using transform(…) we use it in part 1 to make our image circular but we can do a lot of transformations i’ll try to list most of them

Crop

• CropTransformation(Width,Height) :You could crop your image by giving the width and the height you want
• CircleCrop() : It takes no parameters its just make your image circular
• CropSquareTransformation() :It takes no parameters its just make your image square
• RoundedCorners (int radius) it can easily round your image corners you only need to give the radius
• RoundedCornersTransformation (int radius ,int margin, CornerType) : you can use it round your image with more custom options, First parameter you enter the radius for your rounded corners second is margin apply to your photo the third parameter if you wanna make certain side if you image is rounded let see example on that

Glide.with(Context)
       .load(data.get(i).getUrl())
           .transform(new RoundedCornersTransformation(15,1,RoundedCornersTransformation.CornerType.LEFT))
       .into(image);

here we apply the rounded corner to the left side to the image

if we use All instead of Left it will be like that

Color

you can use it to add colors on your images like overlay or something like that

ColorFilterTransformation(int color) you could put overlay for example like this overlay color hash code =#15000000

GrayscaleTransformation() it takes no parameter and it adds gray overlay to your image

BlurTransformation() if you apply it without parameters it will use the default value of radius 25 (the sharpness of blur ) and the default sampling 1 or you could pass only the radius or pass both of them radius and sampling

if we use the default it will be like that

and if increase the sampling to 5 it will be like that

and there is a lot of transformations you can do with GPU Filter (GPUImage)

Will require add dependencies for GPUImage.

ToonFilterTransformation, SepiaFilterTransformation, ContrastFilterTransformation

InvertFilterTransformation, PixelationFilterTransformation, SketchFilterTransformation

SwirlFilterTransformation, BrightnessFilterTransformation, KuwaharaFilterTransformation VignetteFilterTransformation

Cashing

By default, Glide caches images with URLs as keys in the memory and disk. for example if you use url( https://source.unsplash.com/random) that generate random images every time you call it like our example in the first article glide will show the first image that url return but don’t worry you can control that using diskCasheStrategy there are different types of cashing lets explain them

• Glide 3.x & 4.x: DiskCacheStrategy.NONE caches nothing to the disk also you can use skipMemoryCache(true) it will skip memory cache you could use both of them
• Glide 4.x: DiskCacheStrategy.DATA, Glide 3.x: DiskCacheStrategy.SOURCE caches only the original full-resolution image.
• Glide 4.x: DiskCacheStrategy.RESOURCE Glide 3.x: DiskCacheStrategy.RESULT caches only the final image, after reducing the resolution (and possibly transformations) (default behavior of Glide 3.x)
• Glide 4.x only: DiskCacheStrategy.AUTOMATIC intelligently chooses a cache strategy based on the resource (default behavior of Glide 4.x)
• Glide 3.x & 4.x: DiskCacheStrategy.ALL caches all versions of the image

in our case we want DiskCacheStrategy.NONE to retrieve different image each time we call the url

diskCacheStrategy(DiskCacheStrategy.NONE)

Clearing the Cache

so as we said glide cashes so you may wanna to clear the cache for many reasons like debug to make sure that glide don’t load from disk or cache and another reason that you don’t wanna make your app consume the disk space

To clear Glide’s cache, add the following code to clearCache() at the end of MainActivity

Glide.get(this).clearMemory()

Important Methods

placeholder: you could use this method to bind image while loading your image and preparing it and if the loading fail it will still appear unless you use error method it has the priority in the error case

Use fallback method when the url can be null

Apply the centerCrop transformation so that the photo fully fills the ImageView

Glide automatically limits the size of the image it holds in cache and memory to the ImageView dimensions. The more transformations you apply, the longer Glide takes to load the image. In this case, use override(width, height) to tell Glide to load smaller image

example

Glide.with(itemView) 
    .load(url) 
    .centerCrop() 
    .placeholder(R.drawable.ic_image_place_holder) 
    .error(R.drawable.ic_broken_image) 
    .fallback(R.drawable.ic_no_image)
    .into(itemView.ivPhoto) 

What if your target isn’t image ?

for example you wanna set back ground for Relative layout Custom Target will help you to do that

Glide.with(this).load(ServiceGenerator.BASE_URL + url).into(new CustomTarget<Drawable>() {
            @Override
            public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
                yourRelativeLayout.setBackground(resource);
            }

            @Override
            public void onLoadCleared(@Nullable Drawable placeholder) {
            }

        });

Thanks for reading!