Cách dùng thư viện Picasso Android để tải ảnh

Giới thiệu

Picasso là thư viện tải ảnh (image loading) nổi tiếng của Square, đơn giản, mạnh mẽ: caching tự động, resize, placeholder, error handling, transformation. Bài viết hướng dẫn dùng Picasso để tải ảnh từ URL vào ImageView.

Các bước thực hiện

Bước 1: Tạo dự án và thêm dependency

Android Studio → File → New Project → Empty Activity.

Thêm vào build.gradle (Module: app):

dependencies {
    implementation 'com.squareup.picasso:picasso:2.71828' // Phiên bản mới nhất 2023
    // Phiên bản cũ trong bài: 2.4.0
}

Bước 2: Giao diện (res/layout/activity_main.xml)

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/btnDownload"
        android:scaleType="centerCrop"
        android:contentDescription="@string/app_name" />

    <Button
        android:id="@+id/btnDownload"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:textAlignment="center"
        android:text="Tải ảnh" />
</RelativeLayout>

Bước 3: Logic (src/MainActivity.java)

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 imageView;
    Button btnDownload;

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

        imageView = findViewById(R.id.imageView);
        btnDownload = findViewById(R.id.btnDownload);

        btnDownload.setOnClickListener(v -> {
            // Cú pháp cơ bản
            Picasso.get() // Phiên bản mới dùng get() thay với(context)
                    .load("https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                    .into(imageView);
        });
    }
}

Bước 4: Manifest (Cần quyền INTERNET)

<?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.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>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. Nhấn "Tải ảnh" → Picasso tải và hiển thị ảnh (có cache).

Tính năng nâng cao của Picasso

Placeholder & Error

Picasso.get()
    .load(url)
    .placeholder(R.drawable.placeholder)    // Ảnh chờ tải
    .error(R.drawable.error_image)          // Ảnh khi lỗi
    .into(imageView);

Resize & Crop

Picasso.get()
    .load(url)
    .resize(200, 200)           // Resize chính xác (có thể méo)
    .centerCrop()               // Crop giữa, giữ tỷ lệ
    .into(imageView);

// Hoặc fit() - tự đo View size trước khi load
Picasso.get()
    .load(url)
    .fit()                      // Tự động resize vừa ImageView
    .centerCrop()
    .into(imageView);

Transformation (Bo tròn, blur...)

// Bo tròn đơn giản
Picasso.get()
    .load(url)
    .transform(new CircleTransform())
    .into(imageView);

// Custom Transformation
public class CircleTransform implements Transformation {
    @Override
    public Bitmap transform(Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;
        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
        Bitmap result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        canvas.drawCircle(size/2f, size/2f, size/2f, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(squared, 0, 0, paint);
        if (squared != source) squared.recycle();
        return result;
    }
    @Override public String key() { return "circle"; }
}

Callback (Callback interface)

Picasso.get()
    .load(url)
    .into(imageView, new Callback() {
        @Override
        public void onSuccess() { /* Xử lý thành công */ }
        @Override
        public void onError(Exception e) { /* Xử lý lỗi */ }
    });

Picasso vs Glide vs Coil

Lưu ý

• Picasso 2.71828+ dùng Picasso.get() thay Picasso.with(context)
• Tự động xử lý lifecycle, hủy request khi View detach
• Cache: Memory (LruCache) + Disk (OkHttp cache)
• Network security config: Android 9+ cần config cleartextTraffic cho HTTP