Glide — Image Resizing & Scaling

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


Glide Series Overview

  1. Getting Started
  2. Advanced Loading
  3. ListAdapter (ListView, GridView)
  4. Placeholders & Fade Animations
  5. Image Resizing & Scaling
  6. Displaying Gifs & Videos
  7. Caching Basics
  8. Request Priorities
  9. Thumbnails
  10. Callbacks: SimpleTarget and ViewTarget for Custom View Classes
  11. Loading Images into Notifications and AppWidgets
  12. Exceptions: Debugging and Error Handling
  13. Custom Transformations
  14. Custom Animations with animate()
  15. Integrating Networking Stacks
  16. Customize Glide with Modules
  17. Glide Module Example: Accepting Self-Signed HTTPS Certificates
  18. Glide Module Example: Customize Caching
  19. Glide Module Example: Optimizing By Loading Images In Custom Sizes
  20. Dynamically Use Model Loaders
  21. How to Rotate Images
  22. Series Roundup
  23. Advanced ListViews With Images
  24. App Release Preparation
  25. How to Choose the Best Caching Preference
  26. How to Ignore URL Query Parameters In Cache Lookup (soon)
  27. Network-Dependent Image Loading (soon)

Image Resizing with resize(x, y)

Generally 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  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200) // resizes the image to these dimensions (in pixel). 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.

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 transformations 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  
    .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  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .override(600, 200)
    .fitCenter() 
    .into(imageViewResizeFitCenter);

We'll look at custom transformations, besides centerCrop() and fitCenter() in a later blog post.

Outlook

In this blog post, 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.

Explore the Library

Find interesting tutorials and solutions for your problems.

Miscellaneous