Android Picasso Tutorial With Examples [Latest]

Android Picasso

Android Picasso is an image loading/processing library developed and maintained by Square Inc. It’s immensely popular since it often requires just one line of code and has a similar style of coding for each of its features(we’ll be implementing them soon!). To use the android Picasso Library in your Android Studio project, add the following dependency in your build.gradle file.

Android Picasso comes with its own set of features such as:

1. Resizing and Scaling
2. Center Cropping
3. Rotation and Transformation
4. Setting the Placeholder and Error images
5. Fading
6. Disk and Memory Caching
7. Priority Requests
8. Support for Request cancellation and parallel downloading

Android Picasso – Loading image from URL

To load a image from URL in an ImageView using picasso api, following code snippet is commonly used.

Android Picasso – Loading a resource

To load a resource (drawable/mipmap):

Android Picasso – Loading image from File

To load a file image :

Android Picasso Caching

1. 1. Memory Policy

Picasso by default tries to get an image from the memory first. To prevent this we can add the method noMemoryPolicy() by calling either or both of the enums MemoryPolicy.NO_CAHE, MemoryPolicy.NO_STORE.

• Memory.NO_CACHE is used to prevent loading the image from the stored cache.
• Memory.NO_STORE is used to not store the image in the cache at all. Typically used if we need the image one single time.

• Network Policy

If the image is not served/prevented from the Memory, Picasso next tries to get it from the Disk Cache.
To skip the disk cache we need to call the method .networkPolicy() with the parameter set as NetworkPolicy.NO_CACHE

Another useful enum is NetworkPolicy.OFFLINE which would check for the image in the cache only. It’ll show the error image(if defined) or blank if the image is not found in the cache.

Let’s dive into the coding part of android picasso tutorial where we’ll see and implement all the features together.

Android Picasso Example Project Structure

Android Picasso Example Code

The activity_main.xml is given below.

The code for MainActivity.java is given below:

Essentially in the above code, we’ve implemented a feature of Picasso on each button click.

1. Drawable : This button click invokes the most basic feature of Picasso i.e. Loading A drawable image into an ImageView
2. Placeholder : A placeholder is commonly used to display a drawable image while the main image gets loaded into the imageview. This is essential in cases when the image takes time to load from the web.
   
   Picasso.with(this).load("www.journaldev.com").placeholder(R.drawable.placeholder).into(imageView);

   1 2 3

   Picasso.with(this).load("www.journaldev.com").placeholder(R.drawable.placeholder).into(imageView);

   
   A .placeholder() is relevant only after the load method. In the above line, since the URl doesn’t fetch any image, the ImageView stays with the placeholder.
3. URL: To load an image from a URl, the url is enclosed as a String inside the load() method
4. Error : An error drawable is generally used in cases where there’s a failure in loading the image. In this case the interim placeholder image gets replaced by the error drawable that’s placed inside .error() method.
5. Callback : Picasso provides callback methods through which we can keep a check of the status of the image loaded (success/error) and display a text accordingly. We’ve displayed a Toast message for the same when an error occurs as show below.
   
   Picasso.with(this).load("www.journaldev.com").error(R.mipmap.ic_launcher).into(imageView, new Callback() { @Override public void onSuccess() { Log.d("TAG", "onSuccess"); } @Override public void onError() { Toast.makeText(getApplicationContext(), "An error occurred", Toast.LENGTH_SHORT).show(); } });

   1 2 3 4 5 6 7 8 9 10 11 12

   Picasso.with(this).load("www.journaldev.com").error(R.mipmap.ic_launcher).into(imageView, new Callback() {                     @Override                     public void onSuccess() {                         Log.d("TAG", "onSuccess");                     }                     @Override                     public void onError() {                         Toast.makeText(getApplicationContext(), "An error occurred", Toast.LENGTH_SHORT).show();                     }                 });

6. Resize : Picasso allows us to use a resize the image before displaying it in an ImageView by invoking the method resize() and passing the desired width and height in pixels
7. Rotate : To rotate an image pass the float value inside the rotate() method. The image is rotated in degrees upon it’s anchor point (0,0)
8. Scale : Resizing an image can cause stretched images. To keep the aspect ratio intact use centerCrop() or centerInside() with the resize() method.
   fit() is like a delayed resize(), that reduces the image to fit the ImageView bounds.
   Note : fit cannot be used with resize() since it has a built-in resize. centerCrop and centerInside can’t be used without calling resize() with a positive width and height
9. Targets : This is another form of callback that’s used as a listener for image loading. Targets are an interface that would return the bitmap image along with its placeholder and error drawable(if defined). We can further customise the bitmap image returned in the method onBitmapLoaded() or directly show it in the ImageView

The output of the our android picasso example application in action is shown below.

Android Picasso – .noFade() and .noPlaceholder()

Picasso by default fades in the image inside the imageview to provide a meaningful animation. To remove this android animation invoke the method noFade() in the code as :

A noPlaceholder() method is handy when an ImageView handles multiple Picasso calls. Going the conventional way(without noPlaceholder method) would cause every new Picasso call to change the previous image to the placeholder and then to the new image. This can look ugly and this is where noPlaceholder() comes to our rescue.

Android Picasso – Resuming/Pausing/Cancelling Requests

To do any of the above, we need to first set a tag as :

Resuming, Pausing or Cancelling a request is generally done in ListView/RecyclerView.

Android Picasso Priority Requests

A request such as the one below has higher chances of getting completed first in a ListView which many multiple requests.

priority() offers three types of Constants : HIGH, NORMAL and LOW

Note: Setting a priority just gives an intended order of request calls. It doesn’t gurantee to strictly follow the order.

This brings an end to android picasso tutorial. You can download the final Android Picasso example project from the link given below.