Square की लोकप्रिय इमेज लोडिंग लाइब्रेरी Picasso का उपयोग करके इमेज लोडिंग, ट्रांसफॉर्मेशन, कॉलबैक, टार्गेट का पूरा ट्यूटोरियल।
निर्भरता जोड़ें
dependencies {
implementation 'com.squareup.picasso:picasso:2.8'
}
चरण 1: लेआउट
res/layout/activity_main.xml - 9 बटन और एक ImageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<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: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>
चरण 2: MainActivity
src/MainActivity.java:
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 scaleIndex = 0;
Button btnDrawable, btnUrl, btnError, btnPlaceholder, btnCallback, btnResize, btnRotate, btnScale, btnTarget;
private Target customTarget;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initTarget();
}
private void initView() {
imageView = findViewById(R.id.imageView);
btnDrawable = findViewById(R.id.btnDrawable);
btnUrl = findViewById(R.id.btnUrl);
btnPlaceholder = findViewById(R.id.btnPlaceholder);
btnError = findViewById(R.id.btnError);
btnCallback = findViewById(R.id.btnCallBack);
btnResize = findViewById(R.id.btnResize);
btnRotate = findViewById(R.id.btnRotate);
btnScale = findViewById(R.id.btnScale);
btnTarget = findViewById(R.id.btnTarget);
btnDrawable.setOnClickListener(this);
btnPlaceholder.setOnClickListener(this);
btnUrl.setOnClickListener(this);
btnCallback.setOnClickListener(this);
btnResize.setOnClickListener(this);
btnError.setOnClickListener(this);
btnRotate.setOnClickListener(this);
btnScale.setOnClickListener(this);
btnTarget.setOnClickListener(this);
}
private void initTarget() {
customTarget = 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);
}
};
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.btnDrawable:
Picasso.get().load(R.drawable.image).into(imageView);
break;
case R.id.btnPlaceholder:
Picasso.get().load("www.journaldev.com")
.placeholder(R.drawable.placeholder).into(imageView);
break;
case R.id.btnUrl:
Picasso.get().load("https://example.com/image.png")
.placeholder(R.drawable.placeholder).into(imageView);
break;
case R.id.btnError:
Picasso.get().load("invalid_url")
.placeholder(R.drawable.placeholder)
.error(R.drawable.error).into(imageView);
break;
case R.id.btnCallBack:
Picasso.get().load("invalid_url")
.error(R.mipmap.ic_launcher)
.into(imageView, new Callback() {
@Override public void onSuccess() { Log.d("TAG", "onSuccess"); }
@Override public void onError(Exception e) {
Toast.makeText(MainActivity.this, "Error occurred", Toast.LENGTH_SHORT).show();
}
});
break;
case R.id.btnResize:
Picasso.get().load(R.drawable.image).resize(200, 200).into(imageView);
break;
case R.id.btnRotate:
Picasso.get().load(R.drawable.image).rotate(90f).into(imageView);
break;
case R.id.btnScale:
// फिट, सेंटर क्रॉप, सेंटर इनसाइड के बीच साइकिल
if (scaleIndex == 0) {
Picasso.get().load(R.drawable.image).fit().into(imageView);
Toast.makeText(this, "Fit", Toast.LENGTH_SHORT).show();
} else if (scaleIndex == 1) {
Picasso.get().load(R.drawable.image).resize(200, 200).centerCrop().into(imageView);
Toast.makeText(this, "Center Crop", Toast.LENGTH_SHORT).show();
} else {
Picasso.get().load(R.drawable.image).resize(200, 200).centerInside().into(imageView);
Toast.makeText(this, "Center Inside", Toast.LENGTH_SHORT).show();
}
scaleIndex = (scaleIndex + 1) % 3;
break;
case R.id.btnTarget:
Picasso.get().load("https://example.com/image.png")
.placeholder(R.drawable.placeholder)
.error(R.drawable.error)
.into(customTarget);
break;
}
}
}
Picasso मुख्य विशेषताएं
| विशेषता | कोड |
|---|---|
| बेसिक लोड | Picasso.get().load(url).into(imageView) |
| प्लेसहोल्डर | .placeholder(R.drawable.placeholder) |
| एरर इमेज | .error(R.drawable.error) |
| रिसाइज | .resize(width, height) |
| फिट (बाउंड्स में) | .fit() |
| सेंटर क्रॉप | .centerCrop() |
| सेंटर इनसाइड | .centerInside() |
| रोटेट | .rotate(degrees) |
| कॉलबैक | .into(imageView, new Callback() {...}) |
| कस्टम टार्गेट | .into(target) |
| ट्रांसफॉर्मेशन | .transform(new Transformation() {...}) |
| कैश नीति | .memoryPolicy() / .networkPolicy() |
| टैगिंग | .tag(context) + Picasso.get().cancelTag(tag) |
Picasso vs Glide तुलना
- Picasso: सरल API, छोटा (~100KB), कोई GIF सपोर्ट नहीं (नेटिव)
- Glide: GIF सपोर्ट, लाइफसाइकल इंटीग्रेशन, बड़ा (~500KB)
- दोनों थ्रेड-सेफ, कैशिंग, प्लेसहोल्डर/एरर सपोर्ट करते हैं
नोट
Picasso 2.x में Picasso.with(context) डिप्रिकेटेड है, Picasso.get() उपयोग करें।