In the last tutorials, you've learned how to load images from various sources and how to use different kinds of placeholders. This week's tutorial is important if you cannot influence the size of the images: resizing and scaling!

Glide Series Overview

Image Resizing with override(x, y)

Generally speaking, it's optimal if your server or API deliver the image in the exact dimensions you need, which are a perfect trade-off between bandwidth, memory consumption, and image quality.

In comparison to Picasso, Glide is much more efficient memory-wise. Glide automatically limits the size of the image it holds in cache and memory to the ImageView dimensions. Picasso has the same ability, but requires a call to fit(). With Glide, if the image should not be automatically fitted to the ImageView, call override(horizontalSize, verticalSize). This will resize the image before displaying it in the ImageView.

Glide 4.x

GlideApp  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200) // resizes the image to these dimensions (in pixel). resize does not respect aspect ratio
    .into(imageViewResize);

Glide 3.x

Glide  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200) // resizes the image to these dimensions (in pixel). resize does not respect aspect ratio
    .into(imageViewResize);

This option might also be helpful when you load images when there is no target view with known dimension yet. For example, if the app wants to warm up the cache in the splash screen, it can't measure the ImageViews yet. However, if you know how large the images should be, use override() to provide a specific size.

Explicitly Scaling Images

Now, as with any image manipulation, resizing images can really distort the aspect ratio and uglify the image display. In most of your use cases, you want to prevent this from happening. Glide offers the general scaling options to manipulate the image display. It ships with two standard options centerCrop and fitCenter.

CenterCrop

CenterCrop() is a cropping technique that scales the image so that it fills the requested bounds of the ImageView and then crops the extra. The ImageView will be filled completely, but the entire image might not be displayed.

Glide 4.x

GlideApp  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200) // resizes the image to these dimensions (in pixel)
    .centerCrop() // this cropping technique scales the image so that it fills the requested bounds and then crops the extra.
    .into(imageViewResizeCenterCrop);

Glide 3.x

Glide  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200) // resizes the image to these dimensions (in pixel)
    .centerCrop() // this cropping technique scales the image so that it fills the requested bounds and then crops the extra.
    .into(imageViewResizeCenterCrop);

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.

Glide 4.x

GlideApp  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200)
    .fitCenter() 
    .into(imageViewResizeFitCenter);

Glide 3.x

Glide  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200)
    .fitCenter() 
    .into(imageViewResizeFitCenter);

We'll look at custom transformations, besides centerCrop() and fitCenter() in a future tutorial.

Implicitly Scaling Images

In the section above you always explicitly selected the scale type on the Glide call. Keep in mind that Glide will respect the view's scale type as well. Thus, if you don't call fitCenter() or cropCenter(), Glide will use the specified scale type of the view.

For example, the following ImageView would lead Glide to also use cropCenter as a scale type:

<ImageView  
    android:id="@+id/standard_imageview"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:scaleType="centerCrop"
    android:layout_margin="5dp"/>

Outlook

In this tutorial, you've learned how to make adjustments to the size and display of images. This should be very helpful for creating great apps.

Before we go into more advanced Glide topics, we'll look at one more, very unique feature of Glide: displaying Gifs and videos.