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
- Getting Started & Simple Loading
- Advanced Loading
- Adapter Use (ListView, GridView, ...)
- How to Deal with Null/Empty Values (in ListViews)
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.
