android picasso library

Hi Folks! Today I’d like to describe about Android Picasso Library and implement Picasso library in our android application example.

Let’s Start

Android Picasso library is one of the most popular image downloading and caching library, developed and maintained by Sqaure Inc. It’s very simple to use and you need to write just a few lines of code to do the job. It is very simple and powerful library for image downloading and caching. It needs only a few lines of code to implement this library and an easy to use syntax.

Picasso library handles many common pitfalls of loading images on Android automatically, according to the official docs-

  • Handling ImageView recycling and download cancelation in an adapter.
  • Complex image transformations with minimal memory use.
  • Automatic memory and disk caching.

Loading an Image from Url –

Hassle-free image loading in imageview—often in one line of code!

Picasso.get().load("http://technxt.net/img/paris.jpg").into(imgView);

If you are using the latest version of Picasso (2.71828) then use get() method because with(context) methods is deprecated and is replaced with get() method.

Set placeholder image using Picasso library –

If you want to show a placeholder while loading original image, you can do as below.

Picasso.get().load("http://technxt.net/img/paris.jpg")
                .placeholder(R.drawable.placeholder)
                .into(imgView);

Picasso Error handling –

If you want to show an error drawable is generally used in cases where there’s a failure in loading the image.

Picasso.get().load("http://technxt.net/img/paris.jpg")
                .placeholder(R.drawable.placeholder)
                .error(R.drawable.placeholder_error)
                .into(imgView);

Resizing image with Picasso –

Picasso allows us to resize an image with respect to the aspect ratio using resize() method.

Picasso.get()
 .load("http://technxt.net/img/paris.jpg")
 .resize(100, 100)
 .into(imgView)

Image Rotation with picasso –

Picasso allows us to rotate the image with respect to the degree passed as parameter using rotate() method.

Picasso.get()
    .load("http://technxt.net/img/paris.jpg")
    .rotate(90f)
    .into(imgView);

Loading image from the File System –

File imgFile = new  File("/sdcard/Images/test_image.jpg");
Picasso.get()
        .load(imgFile)
        .fit()
        .into(imgView)

Example –

This example demonstrate about how to integrate Picasso library in android studio.

1. Create a New Project –

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from templates to implement picasso library with ImageView in android using android studio.

2. Implement Dependency –

After creating a new project, specify the following dependency in your build.gradle.

dependencies {
   //Picasso library
   implementation 'com.squareup.picasso:picasso:2.71828'
}

or Maven –

<dependency>
  <groupId>com.squareup.picasso</groupId>
  <artifactId>picasso</artifactId>
  <version>2.71828</version>
</dependency>

Try to add the latest version of the Picasso library or Dependency. Once that’s done, save the file and perform a Gradle sync.

3. Add Internet Permission –

Picasso is going to perform a network request to load images via the internet, we need to include the permission INTERNET in our AndroidManifest.xml.

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

or just implement the following xml code

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.technxt.androidpicassolibrary">
    //internet permission
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

4. Add Image Widget –

We need to add an ImageView to the layout.

<ImageView
        android:id="@+id/imgView"
        android:layout_width="250dp"
        android:layout_height="180dp"
        android:layout_marginTop="20dp"
        android:layout_centerHorizontal="true"/>

Now open res -> layout -> activity_main.xml file and just implement the following xml code

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

    <ImageView
        android:id="@+id/imgView"
        android:layout_width="250dp"
        android:layout_height="180dp"
        android:layout_marginTop="20dp"
        android:layout_centerHorizontal="true"/>

    <Button
        android:id="@+id/loadBtn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="Load Image"
        android:textColor="#ffffff"
        android:background="@color/colorAccent"
        android:foreground="?android:attr/selectableItemBackground"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/rotateBtn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="Rotate Image"
        android:textColor="#ffffff"
        android:background="#0288D1"
        android:foreground="?android:attr/selectableItemBackground"
        android:layout_marginTop="8dp"
        android:layout_centerInParent="true"
        android:layout_below="@id/loadBtn"/>

</RelativeLayout>

5. Add code to load image in ImageView –

Open your MainActivity.java file and add the following code to load image into imageView using Picasso library.

package net.technxt.androidpicassolibrary;

import androidx.appcompat.app.AppCompatActivity;

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 AppCompatActivity {
    ImageView imgView;
    Button loadBtn;
    Button rotateBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imgView = findViewById(R.id.imgView);
        loadBtn = findViewById(R.id.loadBtn);
        rotateBtn = findViewById(R.id.rotateBtn);

        loadBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Picasso.get().load("http://technxt.net/img/paris.jpg").placeholder(R.drawable.ic_image_black_24dp).into(imgView);
            }
        });

        rotateBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Picasso.get().load("http://technxt.net/img/paris.jpg").rotate(90f).into(imgView);
            }
        });



    }
}

Finally run your application.

6. Output –

The output of the our android picasso library example application is shown below

Android Picasso Library

You can download the project Android Picass Library from the below link.

Thanks for reading! If you enjoyed this article, please click the 👍 Like button and share it to help others find it! Feel free to leave a comment 💬 below.
Have feedback? Let’s connect on Facebook.

%d bloggers like this: