How to load, process and cache image in Android using Picasso Android 09.09.2016

In this tutorial you can read about Picasso. The simple library for image uploading, caching, rotating, resising and sometimes OutOfMemoryError. If you want more advanced way read about Glide.

Android SDK does not have a good way to get images from web and display it to android app. To solve this problem, numbers of third party libraries are available.

• Picasso
• Glide
• Fresco
• UImageLoader

You can read some comparison here and here.

Picasso library have lots of features like load images from web, resizing images, cropping images, place holder and displaying error images.

You can setup Picasso image downloader and caching library with gradle dependency. Open your app build.gradle file and add

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

Add user permission android.permission.INTERNET in AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />

Open XML layout file and add ImageView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img"
        android:layout_width="150dp"
        android:layout_height="120dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/placeholder_img" />
</LinearLayout>

In MainActivity file define variable for ImageView and set image URL for load method of Picasso. Following is the complete code of java activity file.

public class MainActivity extends AppCompatActivity {
    ImageView img;
    String url = "http://snovadoma.ru/media/photos/04f631d079c2171827cae83e2ee61c52.jpg";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        img = (ImageView) findViewById(R.id.img);
        Picasso.with(this).load(url).resize(250, 200).into(img);
    }
}

Result

Picasso offers resize images, display error image when image is unable to download, rotate, place holder, transform before image is displayed in ImageView.

If your application relies on remote assets, then it's important to add a fallback in the form of a placeholder image. The placeholder image is shown immediately and replaced by the remote image when Picasso has finished fetching it.

Picasso supports two types of placeholder images. Before we saw how the placeholder method works, but there's also an error method that accepts a placeholder image. Picasso will try to download the remote image three times and display the error placeholder image if it was unable to fetch the remote asset.

Picasso.with(this)
  .load("URL") 
  .error(R.drawable.error_img)
  .placeholder(R.drawable.placeholder_img)
  .resize(250, 180)
  .rotate(180)
  .into(imageView);

There are some interesting parameters

• placeholder() display an image from the drawable resources until the resource from the internet is not loaded.
• error() displays the error image if the application fails to load the image from the URL. It acts as error callback.
• centerCrop() is an advanced cropping method. centerCrop() crops the image to fill the ImageView but it doesn’t display the complete image. The visible image depends on the size of the actual image.
• centerInside() is also a cropping method but it works a bit different. With this cropping technique, the complete image is displayed but it may not fill the ImageView. It scales the image so that both dimensions are equal to or less than the requested bounds of ImageView.
• noFade(). Picasso automatically softens the image in ImageView by fading it. If you don’t need the fading effect and need the actual image then you can use noFade().
• fit() reduces the size of the image according to the ImageView internally.