【Android】画像ライブラリPicassoの使い方を徹底解説！基本機能とサンプルコード

このチュートリアルでは、Androidアプリ開発で定番の画像読み込みライブラリ「Picasso」の基本的な使い方を、実際のサンプルコードとともに解説します。

PicassoはSquare社が提供するオープンソースの画像ライブラリです。URLやDrawableリソースからの画像読み込み、キャッシュ管理、プレースホルダーやエラー画像の設定、リサイズや回転などの画像加工を、わずか数行のコードで実現できるのが大きな魅力です。

ステップ1：新規プロジェクトの作成

Android Studioを起動し、「File」→「New Project」を選択して、必要な項目を入力して新しいプロジェクトを作成します。

ステップ2：レイアウトファイル（activity_main.xml）の編集

res/layout/activity_main.xml に以下のコードを追加します。このレイアウトには中央に ImageView を配置し、その周囲に Picasso の各機能を呼び出すためのボタンを並べています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity">
<Button
    android:id="@+id/btnDrawable"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:text="Drawable" />
<ImageView
    android:id="@+id/imageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_centerHorizontal="true"
    android:src="@mipmap/ic_launcher" />
<Button
    android:id="@+id/btnPlaceholder"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnUrl"
    android:layout_alignBottom="@+id/btnUrl"
    android:layout_centerHorizontal="true"
    android:text="Placeholder" />
<Button
    android:id="@+id/btnUrl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnDrawable"
    android:layout_alignBottom="@+id/btnDrawable"
    android:layout_alignParentEnd="true"
    android:text="URL" />
<Button
    android:id="@+id/btnError"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/btnDrawable"
    android:layout_alignParentStart="true"
    android:layout_marginTop="12dp"
    android:text="Error" />
<Button
    android:id="@+id/btnCallBack"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnError"
    android:layout_alignStart="@+id/btnPlaceholder"
    android:layout_alignBottom="@+id/btnError"
    android:text="Callback" />
<Button
    android:id="@+id/btnResize"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnCallBack"
    android:layout_alignBottom="@+id/btnCallBack"
    android:layout_alignParentEnd="true"
    android:text="Resize" />
<Button
    android:id="@+id/btnRotate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/btnError"
    android:layout_alignParentStart="true"
    android:layout_marginTop="12dp"
    android:text="Rotate" />
<Button
    android:id="@+id/btnScale"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignStart="@+id/btnCallBack"
    android:layout_alignBottom="@+id/btnTarget"
    android:text="Scale" />
<Button
    android:id="@+id/btnTarget"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnRotate"
    android:layout_alignBottom="@+id/btnRotate"
    android:layout_alignParentEnd="true"
    android:text="Targets" />
</RelativeLayout>

ステップ3：MainActivity.java の実装

src/MainActivity.java に以下のコードを追加します。各ボタンのクリックイベントに応じて、Picassoのさまざまな機能を切り替えて試せるようになっています。

package app.com.sample;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import com.squareup.picasso.Callback;
import com.squareup.picasso.Picasso;
import com.squareup.picasso.Target;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    ImageView imageView;
    int i = 0;
    Button btnDrawableImage, btnUrlImage, btnErrorImage, btnPlaceholderImage, btnCallback, btnResizeImage,
    btnRotateImage, btnScaleImage, btnTarget;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        imageView = findViewById(R.id.imageView);
        btnDrawableImage = findViewById(R.id.btnDrawable);
        btnUrlImage = findViewById(R.id.btnUrl);
        btnPlaceholderImage = findViewById(R.id.btnPlaceholder);
        btnErrorImage = findViewById(R.id.btnError);
        btnCallback = findViewById(R.id.btnCallBack);
        btnResizeImage = findViewById(R.id.btnResize);
        btnRotateImage = findViewById(R.id.btnRotate);
        btnScaleImage = findViewById(R.id.btnScale);
        btnTarget = findViewById(R.id.btnTarget);
        btnDrawableImage.setOnClickListener(this);
        btnPlaceholderImage.setOnClickListener(this);
        btnUrlImage.setOnClickListener(this);
        btnCallback.setOnClickListener(this);
        btnResizeImage.setOnClickListener(this);
        btnErrorImage.setOnClickListener(this);
        btnRotateImage.setOnClickListener(this);
        btnScaleImage.setOnClickListener(this);
        btnTarget.setOnClickListener(this);
    }
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btnDrawable:
            Picasso.with(this).load(R.drawable.image).into(imageView);
            break;
            case R.id.btnPlaceholder:
            Picasso.with(this).load("www.journaldev.com").placeholder(R.drawable.placeholder).into(imageView);
            break;
            case R.id.btnUrl:
            Picasso.with(this).load("https://cdn.journaldev.com/wp-content/uploads/2017/01/android-constraintlayout-sdk-tool-install.png").placeholder(R.drawable.placeholder).into(imageView);
            break;
            case R.id.btnError:
            Picasso.with(this).load("www.journaldev.com").placeholder(R.drawable.placeholder).error(R.drawable.error).into(imageView);
            break;
            case R.id.btnCallBack:
            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();
                }
            });
            break;
            case R.id.btnResize:
            Picasso.with(this).load(R.drawable.image).resize(200, 200).into(imageView);
            break;
            case R.id.btnRotate:
            Picasso.with(this).load(R.drawable.image).rotate(90f).into(imageView);
            break;
            case R.id.btnScale:
            if (i == 3)
            i = 0;
            else {
                if (i == 0) {
                    Picasso.with(this).load(R.drawable.image).fit().into(imageView);
                    Toast.makeText(getApplicationContext(), "Fit", Toast.LENGTH_SHORT).show();
                }
                else if (i == 1) {
                    Picasso.with(this).load(R.drawable.image).resize(200, 200).centerCrop().into(imageView);
                    Toast.makeText(getApplicationContext(), "Center Crop", Toast.LENGTH_SHORT).show();
                }
                else if (i == 2) {
                    Picasso.with(this).load(R.drawable.image).resize(200, 200).centerInside().into(imageView);
                    Toast.makeText(getApplicationContext(), "Center Inside", Toast.LENGTH_SHORT).show();
                }
                i++;
            }
            break;
            case R.id.btnTarget:
            Picasso.with(this).load("https://cdn.journaldev.com/wp-content/uploads/2017/01/android-constraintlayout-sdk-tool-install.png").placeholder(R.drawable.placeholder).error(R.drawable.error).into(target);
            break;
        }
    }
    private Target target = new Target() {
        @Override
        public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
            imageView.setImageBitmap(bitmap);
        }
        @Override
        public void onBitmapFailed(Drawable errorDrawable) {
            imageView.setImageDrawable(errorDrawable);
        }
        @Override
        public void onPrepareLoad(Drawable placeHolderDrawable) {
            imageView.setImageDrawable(placeHolderDrawable);
        }
    };
}

主な機能のポイント

• placeholder()：画像の読み込み中に表示するプレースホルダー画像を指定できます。
• error()：読み込みに失敗した際に表示するエラー用画像を設定できます。
• Callback：onSuccess() / onError() を実装することで、読み込みの成功・失敗を検知できます。
• resize() / rotate()：ピクセル単位でのリサイズや、角度を指定した回転が簡単に行えます。
• fit() / centerCrop() / centerInside()：ImageViewのサイズに合わせたスケーリング方式を選択できます。
• Target：読み込んだ Bitmap を直接受け取り、任意の処理に活用できます。

ステップ4：AndroidManifest.xml の編集

androidManifest.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <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>

注意： ネットワーク上のURLから画像を読み込む場合は、マニフェストに <uses-permission android:name="android.permission.INTERNET"/> を追加する必要があります。忘れると通信エラーが発生するので注意しましょう。

アプリの実行

それでは、アプリを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続しているものとして説明します。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。接続したモバイルデバイスを選択すると、端末に以下のような初期画面が表示されます。