Picasso Android Tutorial

In this tutorial you will learn how to use Picasso android library to load image from url.

Picasso is an open source android library which is developed and maintained by Square. Below are some features that make this library the best option for loading image from internet.

Features

Easy to use and reduces the code very much
Automatic memory and cache management

Allows image transformation

You can also use Volley library, which is a great alternative of Picasso.

Also Read: Android Volley Tutorial

Before using Picasso we have to add its dependency in build.gradle file.

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

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

Also add internet access permission in AndroidMainfest.xml file.

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

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

Loading Image

We can load image by just typing one line of code. It can be done in following way.

Picasso.with(context).load(image_url).into(imageview);

1	Picasso.with(context).load(image_url).into(imageview);

Place Holder and Error Handler

We can specify an image as a place holder until the image is being loaded. We can also give an image as an error handler if any error occurs while loading the image.

Picasso.with(context).load(image_url).placeholder(placeholder_image).error(error_image)into(imageview);

1	Picasso.with(context).load(image_url).placeholder(placeholder_image).error(error_image)into(imageview);

Image Transformation

As I already told that this library also supports image transformation. So we can change image dimensions to fit layouts and reduce memory size.

Picasso.with(context).load(image_url).resize(width, height).rotate(degree).into(imageview);

1	Picasso.with(context).load(image_url).resize(width, height).rotate(degree).into(imageview);

Don’t you thing that it reduces the code very much?

Picasso Android Example

In this example I am loading image from url on button click.

Create a project with package name com.picassoandroid and add following code in respective files

activity_main.xml

<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:id="@+id/img"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn"
        android:text="Load Image"/>

</LinearLayout>

<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"

android:orientation="vertical">

<ImageView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="10dp"

android:id="@+id/img"/>

<Button

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/btn"

android:text="Load Image"/>

</LinearLayout>

MainActivity.java

package com.picassoandroid;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import com.squareup.picasso.Picasso;


public class MainActivity extends Activity {
    ImageView img;
    Button btn;
    String url ="https://www.thecrazyprogrammer.com/wp-content/uploads/2015/07/The-Crazy-Programmer.png";

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

        img = (ImageView)findViewById(R.id.img);
        btn = (Button)findViewById(R.id.btn);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Picasso.with(MainActivity.this).load(url).into(img);
           }
        });
    }
}

package com.picassoandroid;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class MainActivity extends Activity {

ImageView img;

Button btn;

String url ="https://www.thecrazyprogrammer.com/wp-content/uploads/2015/07/The-Crazy-Programmer.png";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

img = (ImageView)findViewById(R.id.img);

btn = (Button)findViewById(R.id.btn);

btn.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Picasso.with(MainActivity.this).load(url).into(img);

}

});

}

The code is self explanatory, if still you are facing any difficulty in above Picasso android tutorial then feel free to ask it by commenting below.

Happy Coding!! 🙂 🙂