(Tutorial Android) Image Loader Using Picasso

Ada beberapa library image loader android yang perlu kita kenal, salah satunya yaitu Picasso. Picasso merupakan library yang banyak dipakai sebagai image downloading dan caching, dibentuk dan dikembangkan oleh Square.

Picasso dalam memuat dan menampilkan gambar dari banyak sekali sumber (lokal maupun url) dengan caching dan memori yang rendah.

Picasso mempunyai beberapa kelebihan diantaranya :
- Mengatur proses loading gambar secara otomatis dan menampilkannya pada screen.
- Secara otomatis mengatur memory dan disk caching, jadi kita tidak perlu pusing mengatur cachenya.
- Transformasi image yang komplek dengan penggunaan memori yang minimal.

Library ini merupakan salah satu library favorit aku yang biasa aku gunakan diberbagai project-project Android.

Kali ini kita akan mencoba bagaimana mengimplementasikan library ini.
Mula-mulai kita siapkan dulu sampel image yang akan kita coba, contohnya foto lucu dari dedek JKT48 satu ini hehe..

Ok lanjut..

Pertama, tambahkan dependencies Picasso ke gradle. Versi yang aku uji coba ini yaitu versi 2.5.2.
Untuk versi terakhir sanggup dilihat di http://square.github.io/picasso/

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

Setelah itu kita akan coba menampilkan image dari 2 source, dari local dan url.

Buat layout yang terdiri dari 2 imageView berikut :

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="com.example.wim.android_picasso.MainActivity">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical"         android:weightSum="1">          <ImageView             android:id="@+id/imgUrl"             android:layout_width="match_parent"             android:layout_height="0dp"             android:scaleType="centerCrop"             android:layout_weight="0.5"/>          <ImageView             android:id="@+id/imgLocal"             android:layout_width="match_parent"             android:layout_height="0dp"             android:scaleType="centerCrop"             android:layout_weight="0.5"/>      </LinearLayout> </RelativeLayout>  

Selanjutnya yaitu penggunaan Picasso di MainActivity. Sangat simpel, yaitu dengan satu baris arahan saja. Bentuk umumnya menyerupai ini :

Picasso.with(context).load("http://....").into(imageView);

Source image yang akan ditampilkan dimasukkan ke method load(), lalu menampilkannya ke imageview dengan method into().
Contohnya :
1. Menampilkan image dari local(drawable)

Picasso.with(getApplicationContext()).load(R.drawable.yupi).into(imgLocal);

2. Menampilkan image dari url + transformasi

// load image from URL Picasso.with(getApplicationContext())         .load("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTww-UBpVO0sSSSTrK3lRGXxas2evXN76fEgcQM_tyvk0mpFJKSrqgwGyL2Z2FD2wW9mLDB-b5A9Jj9jSifsvCMztFmebVTfhOvy3ddJPxxXAj0Ehh8RNHyei1r8Ph4fhwdrOqtA9QlGU/s1600/13102516_264907107197324_1288967016_n.jpg")         .placeholder(R.drawable.placeholder)         .resize(800, 800)         .centerCrop()         .into(imgUrl);

Nah, pada teladan yang ke-2 disini aku mencoba transformasi image dengan mengatur resizenya jadi 800 dan center crop serta menambahkan placeholder saat loading.

Berikut source code lengkap di MainActivity.

package com.example.wim.android_picasso;  import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.ImageView;  import com.squareup.picasso.Picasso;  public class MainActivity extends AppCompatActivity {      private ImageView imgUrl, imgLocal;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          imgUrl = (ImageView) findViewById(R.id.imgUrl);         imgLocal = (ImageView) findViewById(R.id.imgLocal);          // load image from URL         Picasso.with(getApplicationContext())                 .load("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTww-UBpVO0sSSSTrK3lRGXxas2evXN76fEgcQM_tyvk0mpFJKSrqgwGyL2Z2FD2wW9mLDB-b5A9Jj9jSifsvCMztFmebVTfhOvy3ddJPxxXAj0Ehh8RNHyei1r8Ph4fhwdrOqtA9QlGU/s1600/13102516_264907107197324_1288967016_n.jpg")                 .placeholder(R.drawable.placeholder)                 .resize(800, 800)                 .centerCrop()                 .into(imgUrl);          // load image         Picasso.with(getApplicationContext())                 .load(R.drawable.yupi)                 .into(imgLocal);      } }  

Terakhir jangan lupa tambahkan permission internet di AndroidManifest.

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

Build dan jalankan maka akhirnya menyerupai berikut :

Oke sekian dulu tutorial singkat kali ini..

Source code lengkapnya sanggup di lihat di https://github.com/andronut/Android-Picasso
Sekian dan supaya bermanfaat.
Happy Coding :)