Picasso 2.5 — Integrate OkHttp3 as Network Stack

The image loading library Picasso prefers to use OkHttp as it's network stack. Recently, OkHttp 3 was released with some major changes and improvements. As the time of writing, the latest Picasso version is 2.5.2 and isn't compatible with the improved OkHttp 3. In this blog post, we'll show you how to integrate OkHttp 3 with Picasso 2.5.

If you want to read up on previous Picasso topics, check out our extensive list of blog posts:

Picasso Series Overview

Jake Wharton's OkHttp 3 Downloader

Jake Wharton has released an OkHttp 3 Downloader specifically for Picasso. It wraps around the new architecture of OkHttpOkHttp 33 and makes it compatible with the network implementation requirements of Picasso 2. Let's get going and integrate it.

Fortunately, it's provided as a Gradle dependency. Thus, you'll only need to edit your build.gradle and sync your project:

compile 'com.jakewharton.picasso:picasso2-okhttp3-downloader:1.0.2'  

Setup OkHttp 3 as Picasso's Downloader

Next, you need to set up Picasso so that it's using the OkHttp 3 downloader. The first step is to create an instance of OkHttp and the OkHttp 3 downloader:

okhttp3.OkHttpClient okHttp3Client = new okhttp3.OkHttpClient();  
OkHttp3Downloader okHttp3Downloader = new OkHttp3Downloader(okHttp3Client);  

The second step is to pass the downloader to Picasso. We're using the Picasso.Builder to customize Picasso's behavior. If you need to catch up on how the Picasso.Builder works, read our topic blog post.

Picasso picasso = new Picasso.Builder(context)  
        .downloader(new CustomOkHttp3Downloader(client))
        .build();

The third and final step is to use our newly created Picasso instance to request an image:

String internetUrl = "http://i.imgur.com/DvpvklR.png";  
picasso  
        .with(context)
        .load(internetUrl)
        .into(imageView1);

We've achieved our goal and the image will be loaded via OkHttp 3 \o/

General Setup of Picasso's Downloader

Now you're asking, do I've to create a custom Picasso instance every time I want to request an image? No, you don't! As we've demonstrated in the Picasso.Builder blog post, you can just set one Picasso instance as the global one:

// set the global instance to use this Picasso object
// all following Picasso (with Picasso.with(Context context) requests will use this Picasso object
// you can only use the setSingletonInstance() method once!
try {  
    Picasso.setSingletonInstance(picasso);
} catch (IllegalStateException ignored) {
    // Picasso instance was already set
    // cannot set it after Picasso.with(Context) was already in use
}

All following requests will re-use the custom Picasso instance. Consequently, your entire app will use OkHttp 3!

Customize OkHttp3Downloader

The heart of the shown integration library is a single class OkHttp3Downloader. It implements the wrapping around OkHttp 3. If you don't want to add another gradle dependency, like we've shown you above, or need to customize the OkHttp 3 wrapper, copy the class from Jake's repository.

Let's assume you've implemented your custom CustomOkHttp3Downloader class, which follows the design of the original and implements the Downloader interface. You can use the same approach to utilize it as your network stack:

okhttp3.OkHttpClient client = new okhttp3.OkHttpClient();  
Picasso picasso = new Picasso.Builder(context)  
        .downloader(new CustomOkHttp3Downloader(client))
        .build();

String internetUrl = "http://i.imgur.com/DvpvklR.png";  
picasso  
        .with(context)
        .load(internetUrl)
        .into(imageView2);

Outlook

In this blog post, you've seen how you can utilize OkHttp 3 as your downloader for Picasso 2.5. If you’ve questions or ideas on how to improve this post, leave them in the comments below or shout out @futurestud_io on Twitter.

Make it rock & enjoy coding!


Explore the Library

Find interesting tutorials and solutions for your problems.