Picasso — Getting Started & Simple Loading

We had a lot of success and feedback on our Retrofit series, so we decided to do another series on one of our favorite Square library: Picasso.

Picasso can load and display images from many sources, while also taking care of caching and keeping a low memory impact when doing image manipulations.


Picasso Series Overview

  1. Getting Started & Simple Loading
  2. Advanced Loading
  3. Adapter Use (ListView, GridView, ...)
  4. How to Deal with Null/Empty Values (in ListViews)
  5. Placeholders, Errors and Fading
  6. Image Resizing, Scaling and fit()
  7. Ordering Requests by Image Priority
  8. Request Management by Grouping of Images via Tag()
  9. Callbacks, RemoteViews and Notifications
  10. Image Rotation and Transformation
  11. Influencing Image Caching
  12. Cache Indicators, Logging & Stats
  13. Customizing Picasso with Picasso.Builder
  14. Custom Request Handlers
  15. Series Round-Up
  16. Picasso 2.5 — Integrate OkHttp3 as Network Stack
  17. Additional Transformations with Transformation Library
  18. Advanced ListViews With Images
  19. App Release Preparation

Why Use Picasso?

Experienced Android developers can skip this section, but for the starters: you might ask yourself why you want to use Picasso* instead of your own implementation.

Android is quite the diva when working with images, since it'll load images into the memory pixel by pixel. A single photo of an average phone camera with the dimensions of 2592x1936 pixels (5 megapixels) will allocate around 19 MB of memory. If you add the complexity of network requests on spotty wireless connections, caching and image manipulations, you will save yourself a lot of time & headache, if you use a well-tested and developed library like Picasso.

In this series, we'll look at many of the features of Picasso. Just take a peek at the blog post outline and think if you really want to develop all of these features yourself.

* = or any other image loading library, like Glide, ION, etc.

Adding Picasso to Your Setup

Hopefully by now we've convinced you to use a library to handle your image loading requests. If you want to take a look at Picasso, this is the guide for you!

First things first, add Picasso to your dependencies. At the time of writing, the last version of Picasso is 2.5.2.

Gradle

As with most dependencies, pulling it in a Gradle project is a single line in your build.gradle:

compile 'com.squareup.picasso:picasso:2.5.2'  

Maven

While we moved all our projects to Gradle, Picasso also supports Maven projects:

<dependency>  
    <groupId>com.squareup.picasso</groupId>
    <artifactId>picasso</artifactId>
    <version>2.5.2</version>
</dependency>  

First Peek: Loading Image from a URL

The Picasso library is using a fluent interface, specifically implemented with the Picasso class. The Picasso class requires at least three parameters for a fully functional request:

  • with(Context context) - Context is necessary for many Android API calls. Picasso is no difference here.
  • load(String imageUrl) - here you specify which image should be loaded. Mostly it'll be a String representing a URL to an Internet image.
  • into(ImageView targetImageView) - the target ImageView your image is supposed to get displayed in.

Theoretical explanations are always harder to grasp, so let's look at a hands-on example:

ImageView targetImageView = (ImageView) findViewById(R.id.imageView);  
String internetUrl = "http://i.imgur.com/DvpvklR.png";

Picasso  
    .with(context)
    .load(internetUrl)
    .into(targetImageView);

That's it! If the image at the URL exists and your ImageView is visible, you'll see the image in a few seconds. In case the image does not exist, Picasso will return to the error callbacks, which we'll look at later. You might already be convinced with this three-line example that Picasso is useful to you, but this is just the tip of the feature iceberg.

Outlook

In our next post, we'll start by looking at other options to load images, besides from an Internet URL. Specifically, we'll load an image from Android resources, local files and a Uri.

In the next few weeks, we'll walk through all the major capabilities of Picasso.

Explore the Library

Find interesting tutorials and solutions for your problems.

Miscellaneous