How to Use Picasso Image Loader Library in Android?

Picasso is open source and one of the widely used image download libraries in Android. It is created and maintained by Square. It is among the powerful image download and caching library for Android. Picasso simplifies the process of loading images from external URLs and displays them on your application. For example, downloading an image from the server is one of the most common tasks in any application. And it needs quite a larger amount of code to achieve this via android networking API. By using Picasso, you can achieve this with a few lines of code. 

How to Use Picasso Android Library?

Step 1: Create an empty activity project

Create an empty activity Android Studio project. Refer to Android | How to Create/Start a New Project in Android Studio? to know how to create an empty activity Android Studio project. Note that select Java as the programming language.

Step 2: Adding the required dependency to app-level gradle file

For using Picasso in the android project, we have to add a dependency in the app-level gradle file. So, For adding dependency open app/build.gradle file in the app folder in your Android project and add the following lines inside it. Add these lines inside dependencies{}.

implementation ‘com.squareup.picasso:picasso:2.8’ 

Refer to the following image, if unable to locate the app-level gradle file and invoke the dependency.

Now click on the “Sync Now” button. So that the Android Studio downloads the required dependency files. If you get any type of error then you may check the error on stackoverflow.

Step 3: Working with the Manifest File

Now add InternetPermission inside the AndroidManifest.xml file. Open the manifest.xml file and add the following line. 

<users-permission android:name=”android.permission.INTERNET”/>

Step 4: Working with the activity_main.xml file

Open the layout file for the activity_main.xml file. We need to add an ImageView to the application’s main layout.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:padding="16dp" />

</RelativeLayout>

Step 5: Working with the MainActivity.java file

Now Navigate to the MainActivity.java file and add the following block of code. In the first line, we are getting the ImageView instance from the layout. And then load the image from the remote URL mentioned in the JAVA code using the Picasso library.

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

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

        ImageView imageView = findViewById(R.id.imageView);
        Picasso.with(this)
                .load("https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg")
                .into(imageView);
    }
}

Output:

Note: Make sure the mobile device or Android Emulator has the network connectivity to load the image.

More Functionalities of the Picasso Library

For any real-time application, we must think of all possible cases. In the above code, we just download the image from the server link. But how to display that image in the app.How to resize it and what if the image loading failed? We need to have another image showing an error message that image loading failed. This all matters for an app developer. The following code changes are made in the MainActivity.java file.

1) Resize

Here we are using Picasso to fetch a remote image and resize it before displaying it in an ImageView.

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

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

        ImageView imageView = findViewById(R.id.imageView);
        Picasso.with(this)
                .load("https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png")
                .resize(300, 300)
                .into(imageView);
    }
}

Output:

2) Placeholder

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.

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

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

        ImageView imageView = findViewById(R.id.imageView);
        Picasso.with(this)
                .load("https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png")
                .placeholder(R.mipmap.ic_launcher)
                .into(imageView);
    }
}

Output:

3) Error Fallback

• Picasso supports two types of placeholder images. We already 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.
• The error image will be shown, in this case when there is no internet connectivity for the application. Instead of loading the image from the URL, the Picasso library shows the error image.

Note: To see this result uninstall the previously loaded application and then install the fresh version of the application from the Android Studio.

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

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

        ImageView imageView = findViewById(R.id.imageView);
        Picasso.with(this)
                .load("https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png")
                .error(R.drawable.error_gfg)
                .into(imageView);
    }
}

Output:

4) Cropping 

If you are not sure about the size of the image loaded from the remote server that what will be the size of the image. So in this code snippet image will make the image center cropped.

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

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

        ImageView imageView = findViewById(R.id.imageView);
        Picasso.with(this)
                .load("https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo-300x300.png") // Equivalent of what ends up in onBitmapLoaded
                .placeholder(R.mipmap.ic_launcher)
                .error(R.drawable.error_gfg)
                .centerCrop()
                .fit()
                .into(imageView);
    }
}

Output:

Troubleshooting while loading an image using Picasso Library

OutOfMemoryError Loading Errors

If an image or set of images aren’t loading, make sure to check the Android monitor log in Android Studio. There’s a good chance you might see a java.lang.OutOfMemoryError “Failed to allocate a […] byte allocation with […] free bytes” or an Out of memory on a 51121168-byte allocation. This is quite common and means that you are loading one or more large images that have not been properly resized. 

First, you have to find which image(s) being loaded are likely causing this error. For any given Picasso call, we can fix this by one or more of the following approaches: 

1. Add an explicit width or height to the ImageView by setting layout_width=500dp in the layout file and then be sure to call fit() during your load: Picasso.with(…).load(imageUri).fit().into(…)
2. Open up your static placeholder or error images and make sure their dimensions are relatively small (< 500px width). If not, resize those static images and save them back to your project.
3. Try removing android:adjustViewBounds=”true” from your ImageView if present and if you are calling .fit() rather than using .resize(width, height)
4. Call .resize(width, height) during the Picasso load and explicitly set a width or height for the image such as: 
   Picasso.with(…).load(imageUri).resize(500, 0).into(…). By passing 0, the correct height is automatically calculated.