(Tutorial Android) Image Loader using Picasso

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

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

Picasso memiliki 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 saya yang biasa saya 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, misalnya foto lucu dari dedek JKT48 satu ini hehe..

Ok lanjut..

Pertama, tambahkan dependencies Picasso ke gradle. Versi yang saya uji coba ini adalah versi 2.5.2.
Untuk versi terakhir bisa 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 adalah penggunaan Picasso di MainActivity. Sangat simpel, yaitu dengan satu baris kode saja. Bentuk umumnya seperti ini :

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

Source image yang akan ditampilkan dimasukkan ke method load(), kemudian 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/AVvXsEiDzQyz9AIM-pF3Gw8WYbx07QWjxONvmDvaiBh_8ROX5kzq9RGcPxoaJh_t3t1mO2WHQVaNZHIIFLs02XsUYcPcIzFUz84tN2cy0QiTsX4UB-yTIjHV3Z_lM2NL1o93EuvmZwALVnYcqbA/s1600/13102516_264907107197324_1288967016_n.jpg")
        .placeholder(R.drawable.placeholder)
        .resize(800, 800)
        .centerCrop()
        .into(imgUrl);

Nah, pada contoh yang ke-2 disini saya mencoba transformasi image dengan mengatur resizenya jadi 800 dan center crop serta menambahkan placeholder ketika 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/AVvXsEiDzQyz9AIM-pF3Gw8WYbx07QWjxONvmDvaiBh_8ROX5kzq9RGcPxoaJh_t3t1mO2WHQVaNZHIIFLs02XsUYcPcIzFUz84tN2cy0QiTsX4UB-yTIjHV3Z_lM2NL1o93EuvmZwALVnYcqbA/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 hasilnya seperti berikut :

Oke sekian dulu tutorial singkat kali ini..

Source code lengkapnya dapat di lihat di https://github.com/wimsonevel/Android-Picasso
Sekian dan semoga bermanfaat.
Happy Coding :)

Share this :