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
- Getting Started
- Advanced Loading
- ListAdapter (ListView, GridView)
- Placeholders & Fade Animations
- Image Resizing & Scaling
- Displaying Gifs & Videos
- Caching Basics
- Request Priorities
- Callbacks: SimpleTarget and ViewTarget for Custom View Classes
- Loading Images into Notifications and AppWidgets
- Exceptions: Debugging and Error Handling
- Custom Transformations
- Custom Animations with animate()
- Integrating Networking Stacks
- Customize Glide with Modules
- Glide Module Example: Accepting Self-Signed HTTPS Certificates
- Glide Module Example: Customize Caching
- Glide Module Example: Optimizing By Loading Images In Custom Sizes
- Dynamically Use Model Loaders
- How to Rotate Images
- Series Roundup
- Advanced ListViews With Images
- App Release Preparation
- How to Choose the Best Caching Preference
- How to Ignore URL Query Parameters In Cache Lookup (soon)
- 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
override(horizontalSize, verticalSize). This will resize the image before displaying it in the
Glide .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages) .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.
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() 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) .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() 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
Glide .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages) .override(600, 200) .fitCenter() .into(imageViewResizeFitCenter);
We'll look at custom transformations, besides
fitCenter() in a later blog post.
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.