Image Loading | Picasso Library

Setelah beberapa abad tidak posting, akhirnya hari ini saya tergugah kembali, untuk berbagi ilmu yang semoga bisa berguna bagi para android developer. Kali ini saya akan membahas tentang bagaimana menggunakan Picasso library untuk mengambil data image dari chace maupun dari network dan menampilkannya ke image view.

Library ini sangat mudah sekali digunakan, kenapa? Hanya butuh 1 baris kode untuk dapat menampilkan image di image view. Seperti ini contohnya :

Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);

Seperti yang disebutkan dalam website officialnya, http://square.github.io/picasso/, picasso mempunyai beberapa kelebihan:

  1. Gambar yang diambil lewat picasso, dapat diubah ukurannya sesuai yang kita inginkan.
    Picasso.with(context).load(url).resize(50, 50).centerCrop().into(imageView)
  2. Placeholder untuk download dan error. Jadi kita bisa memberikan layout/tampilan ketika image sedang diload atau ketika gagal diload.
    Picasso.with(context).load(url).placeholder(R.drawable.user_placeholder).error(R.drawable.user_placeholder_error).into(imageView);
  3. Image yang akan diload tersebut, bisa mengambil dari beberapa resources, seperti url, assets dan files.
  4. Lalu ketika kita mengambil data dari internet, picasso akan terlebih dahulu mengecek di memory maupun harddisk tentang data tersebut, jika memang tersedia, maka akan ditampilkan dan jika tidak tersedia maka akan didownload dari internet.

Biar lebih semangat lagi, langsung keprakteknya aja. Langkah-langkahnya sebagai berikut:

  1. Buka android studio, lalu buka file build.gradle yang berada dalam folder app
    1
  2. Lalu buka http://square.github.io/picasso/ dan copy bagian GRADLE
    2
  3. Lalu setelah itu, paste di build.gradle tadi pada bagian dependencies dan jangan lupa untuk sync project
    3
  4. Nah sekarang library picasso sudah dapat digunakan. Mari kita mencobanya, yang pertama kita akan gunakan adalah gambar yang diambil dari project/drawable. Tentunya, sebelumnya kita siapkan sebuah image view, tambahkan image view didalam layout, dan deklarasikan image view ke dalam sebuah variable
    <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:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/picasso_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"/>
    
    </RelativeLayout>
    
    package com.heendher.picassotutorial; // ganti dengan nama package project anda
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.ImageView;
    
    public class MainActivity extends AppCompatActivity {
        private ImageView mPicassoImage;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
             mPicassoImage = (ImageView)findViewById(R.id.picasso_image);
        }
    
    
    }
    
  5. Sekarang kita akan menggunakan image dari folder mipmap dan menampilkannya di image view yang telah dideklarasikan tadi
    package com.heendher.picassotutorial;// ganti dengan nama package project anda
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.ImageView;
    
    import com.squareup.picasso.Picasso;
    
    public class MainActivity extends AppCompatActivity {
        private ImageView mPicassoImage;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mPicassoImage = (ImageView) findViewById(R.id.picasso_image);
            Picasso.with(getApplicationContext()).load(R.mipmap.ic_launcher).into(mPicassoImage);
        }
    
    
    }
    

    6

  6. Yang dari assets berhasil dilakukan, sekarang kita coba yang dari internet. Sebelum itu, karena kita mengambil data dari internet, kita perlu menambahkan permission terlebih dahulu di manifest, letakkan sebelum <application
     <uses-permission android:name="android.permission.INTERNET"></uses-permission>

     

  7. Lalu kita ubah load yang tadinya mengambil data dari drawable, dengan sebuah link image
    Picasso.with(getApplicationContext()).load("http://travelbyart.com/wp-content/uploads/2014/12/pablo-picasso.jpg").into(mPicassoImage);

    7

Untuk yang menggunakan place holder, praktekin sendiri yak, biar makin mengerti cara menggunakan library ini, selamat mencoba.