Picasso Image Library: Percepat Parsing Gambar pada Server di Aplikasi Android

Picasso Image Library: Percepat Parsing Gambar pada Server di Aplikasi Android

Tutorial Information

ProgramAndroid Developer Tool, Library Picasso
Version2.3.4
DifficultyStandar - Menengah
Estimated Time15 - 20 Menit
DownloadClick this link

Seorang Developer Android yang mengerjakan banyak project tentunya sangat membutuhkan efisiensi waktu dalam penyelesaian project. Dalam pengembangan aplikasi android, banyak dikembangkan library-library yang kemampuannya…

Seorang Developer Android yang mengerjakan banyak project tentunya sangat membutuhkan efisiensi waktu dalam penyelesaian project. Dalam pengembangan aplikasi android, banyak dikembangkan library-library yang kemampuannya tidak diragukan lagi dalam mendukung salah satu masalah ini, misalnya saja library dalam pengembangan UI (User Interface) yang dibuat oleh Jake Wharton bernama ActionBarSherlock, maupun library lain yang tidak bisa penulis sebutkan satu persatu. Salah satunya adalah library dalam mempercepat proses pengembangan aplikasi untuk ImageLoader bernama Picasso yang juga dibuat oleh Jake.

Picasso adalah library mungil untuk proses pengambilan gambar (downloading) dan menyimpan di memory (caching) pada Android. Jika seorang pengembang aplikasi yang biasa melakukan proses pengambilan gambar dari suatu web service atau internet misalnya, maka biasanya adalah melakukan penulisan beberapa kode yang dirasa memang cukup banyak untuk kedua proses tersebut, dan ini akan dirasa kurang praktis dan tentunya akan menghasilkan banyak class di dalam resource folder. Penggunaan library ini cukup sederhana dan kehebatannya adalah hanya menuliskannya dalam satu baris kode saja. Contohnya :


Picasso.with(context).load("http://bisakomputer.com/wp-content/uploads/2013/03/main-logo.png").into(imageView);

Potongan source code diatas adalah cara standar untuk mengambil gambar dari link dan menampilkannya di imageView yang tentunya harus di deklarasikan terlebih dahulu. Namun sebelum itu, Anda harus mengunduh terlebih dahulu library mungil ini di http://square.github.io/picasso/, Anda bisa mengunduhnya dalam bentuk ekstensi jar atau mengunduh langsung source codenya di akun github square, untuk cara menggunakannya adalah sebagai berikut :

  • Copy dulu library Picasso yang sudah diunduh tadi di folder libs Project.
  • Lalu masuk kembali ke ADT dan klik kanan project, lalu pilih Properties, dan pilih Java Build Path.
  • Klik Add External Jar, lalu pilih library tadi yang sudah dicopy.

BisaKomputer - Loading gambar dengan square - external library

Sebagai contoh disini Penulis akan mencontohkan cara menampilkan gambar dari URL dalam GridView, langkah awalnya adalah menginisialisasi terlebih dahulu layoutnya di MainActivity, contoh :


package com.belajar.picassoexample;

import android.app.Activity;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.GridView;

public class MainActivity extends Activity {

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

GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
}
}

Berikut Layout XML yang akan menampung GridView dengan nama file main_activity.xml :


<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>

Lalu setelah itu kita buat class ImageAdapter dimana kelas ini akan memanggil class Picasso untuk loader dari gambar yang ada di URL. Disini akan dicontohkan secara manual mengambil 9 gambar di server dengan nama yang sudah diurutkan dari 0 – 9 berekstensi PNG. Berikut class ImageAdapter.java :


package com.belajar.picassoexample;

import com.squareup.picasso.Picasso;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
private Context mContext;
int imageTotal = 9;
public static final String IMAGE_URL = "http://192.168.1.6/android/res/picasso/";

// Constructor
public ImageAdapter(Context c) {
mContext = c;
}

public int getCount() {
return imageTotal;
}

public Object getItem(int position) {
return null;
}

public long getItemId(int position) {
return 0;
}

// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(180, 180));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}

Picasso.with(mContext)
.load(IMAGE_URL + position +".png")
.placeholder(R.drawable.loader).error(R.drawable.ic_launcher).fit()
.centerCrop().into(imageView);

return imageView;
}
}

Penjelasan :

  • Picasso.with() digunakan untuk memanggil context dari class tersebut sebagai parameter.
  • Lalu memanggil method load , dimana fungsinya adalah untuk memberikan nilai parameter berupa URL.
  • Placeholder adalah method untuk memanggil gambar yang digunakan untuk gambar default saat thread atau proses sedang berjalan pada background dan data gambar masih belum diterima sempurna, bisa berupa bentuk gambar berupa proses loading dan lain lain.
  • Lalu method error adalah exception atau pengecualian untuk mengambil gambar lain yang digunakan secara default yang digunakan jika gambar dari sumber gagal di unduh saat setelah proses thread selesai.

Setelah itu jangan lupa tambahkan permission di AndroidManifest, berupa penggunan network, internet, dan external storage (Penyimpanan eksternal), contohnya :


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

Maka setelah itu hasil yang diharapkan adalah sebagai berikut :
BisaKomputer - Loading gambar dengan squareUntuk source code bisa diunduh di link yang ada. Dengan itu, secara otomatis Picasso akan melakukan proses downloading yang lebih mudah dan hemat resource, serta caching otomatis. Selain itu, masih ada beberapa fitur dari library ini, yaitu :

  1. Penggunaan method resize untuk meresize gambar secara otomatis untuk mengurangi penggunaan memory yang terlalu besar. Caranya adalah sebagai berikut :
    
    Picasso.with(context)
    .load(url)
    .resize(50, 50)
    .centerCrop()
    .into(imageView)
    
    
  2. Melakukan transformasi untuk menghasilkan efek yang lebih dinamis, contohnya :
    
    public class CropSquareTransformation 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 result = Bitmap.createBitmap(source, x, y, size, size);
    if (result != source) {
    source.recycle();
    }
    return result;
    }
    
    @Override public String key() { return "square()"; }
    }
    
    

    Lalu instance class ini di transform method pada Picasso.

Penutup

Penggunaan library ini disarankan untuk para developer Android jika ingin melakukan efisiensi waktu dalam mengembangkan aplikasinya karena tuntutan pasar. Masih banyak lagi sebenarnya library-library pendukung yang akan Penulis bahas pada tutorial lain. Namun juga alangkah baiknya, jika kita sebagai seorang developer juga ikut melakukan sumbangsih dengan membuat library lain yang juga bermanfaat pada sebuah platform.

Tag: , , ,

2 Comments

Leave Comment
  1. Dedy says:

    visit link us : printerous.com

    Cetak photo atau image dalam bentuk kanvas, magnet dan tote bag
    secara online

  2. adhy says:

    hai… gimana caranya menambahkan open position image

Write Comment

Your email will not be published. The marked label is required.