Glide 4.x has introduced a new feature: the generated API. You've learned the basics of this new feature in our generated API tutorial. One upside of the generated API is that it's easy to extend. This allows you to centralize implementation patterns in your app.
In this tutorial you'll learn how to extend the generated API on two examples. You'll build an app, which re-uses the same profile layout in different contexts: user, business, product. All of them use the same layout of today's design: a rounded profile photo and a large background image. With Glide 4.x and the generated API, you can centrally configure the options for each image.
Glide Series Overview
- Getting Started
- Advanced Loading
- Upgrade Guide from Glide 3.x
- Request Options & Generated API
- Extending the Generated API
Extend the Generated API with @GlideExtension
In order to extend the generated API with a new method, you'll need to create a new class:
@GlideExtension
public class FutureStudioGlideExtension {
private FutureStudioGlideExtension() {}
}
The class name does not matter, but you need to annotate the class with @GlideExtension.
New Fluent Interface Method with @GlideOption
Next, you need to add a new public static method to the new class:
@GlideOption
public static void profilePhoto(RequestOptions options) {
options
.placeholder(R.drawable.noise)
.circleCrop()
.override(300, 300);
}
This profilePhoto is annotated with @GlideOption, which makes it visible to Glide's annotation processor. The annotation processor will add it to Glide's fluent interface. Thus, you can call now call profilePhoto on Glide's fluent interface. But what does that do?
Well, as function parameter you have the RequestOptions object, which offers you methods to manipulate and configure the image loading request. In the example above we applied typical settings for a profile image: make it circle-shaped with circleCrop(), minimize the size to a fixed 300 pixels with override(), and set a placeholder.
Second New Fluent Interface Method
After adding a method for the rounded profile photo, you need to add another new fluent interface method for the large background image. The approach is the same. You add a new method profileBackground to the FutureStudioGlideExtension class:
@GlideOption
public static void profileBackground(RequestOptions options) {
options
.placeholder(R.drawable.cupcake)
.centerCrop();
}
The background image is a little easier to display. You defined a different kind of placeholder and the centerCrop() scale type to fill the entire background, even if it cuts parts of the image off.
The entire FutureStudioGlideExtension put together would look like this:
@GlideExtension
public class FutureStudioGlideExtension {
private FutureStudioGlideExtension() {}
@GlideOption
public static void profilePhoto(RequestOptions options) {
options
.placeholder(R.drawable.noise)
.fitCenter()
.circleCrop()
.override(300, 300);
}
@GlideOption
public static void profileBackground(RequestOptions options) {
options
.placeholder(R.drawable.cupcake)
.centerCrop();
}
}
The advantage of having these two methods as Glide extensions: you don't have to constantly copy all of these lines in your code. You can simply use profileBackground in all views that use background images. If you need to change the way the background image looks, you'll only have to change a single method.
Let's look at how you can use these extension methods.
Usage of Extension Methods
First of all, if you want to use the extension methods, you'll need to use the generated API version of Glide. By default, this is GlideApp. Only this version will have the configured extension methods!
Also, if you just implemented the class from above and didn't build the project since then, Android Studio will warn you that those new extension methods don't exist. Don't worry, Glide's annotation processor will add them once you build the project.
Calling the extension methods is as easy as any other method on the fluent interface:
private void loadImageProfilePhoto() {
GlideApp
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.profilePhoto()
.into(imageView1);
}
private void loadImageProfileBackground() {
GlideApp
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[2])
.profileBackground()
.into(imageView2);
}
Summary
In this tutorial you've learned how you can extend Glide's fluent interface with Glide extensions. This enables you to put often used image loading configurations in a central place. Consequently, your code will be easier to maintain and read by other programmers.
Setting up the Glide extension methods takes only a few minutes. We recommend to take advantage of them!
Do you have further questions on this topic or about Glide in general? Let us know on Twitter @futurestud_io or leave a comment below.
Enjoy coding & make it rock!
