Load Image dengan menggunakan Picasso

Hallo teman2, di setiap aplikasi biasanya terdapat fitur yang menampilkan gambar yang berasal dari internet. Di tulisan sebelumnya kita telah membahas tentang Glide. Untuk talisan kali ini kita akan membahas mengenai Picasso. Picasso tentunya adalah salah satu library juga yang berfungsi untuk image loader.

Langsung aja nih, yuk ngoding 😀

Persiapan

Kita akan menambahkan library picasso pada build.gradle(:app) seperti di bawah ini:

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
   ...
}

dependencies {
    ...

    // PICASSO
    implementation 'com.squareup.picasso:picasso:2.71828'
}

Dan jangan lupa tambahkan permission internet di AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ikhwankoto.com.explore_image_loader">

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

    <application
        android:name=".MyApp"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        ...

    </application>

</manifest>

Persiapannya udah nih, kita lanjut ke code kotlin dan xmlnya.

Layout

Untuk layout kita akan menggunakan ImageView sederhana.

<ImageView
    android:id="@+id/iv_standart"
    android:layout_width="172dp"
    android:layout_height="172dp"
    android:layout_marginStart="12dp"
    android:layout_marginTop="18dp"
    android:layout_marginEnd="12dp"
    android:background="@color/colorPrimary"/>

Disini kita menambahkan background hijau secara default, agar nantinya kita bisa melihat radius atau perubahan lainnya.

Simple call

Pertama mari kita coba menampilkan image secara sederhana

Picasso.get().load(urlImage).into(iv_standart)

• urlImage = url gambar yang ingin ditampilkan
• iv_standart = Id dari ImageView di layout

Transformation

Di library Picasso terdapat beberapa transformation yang telah tersedia.

//Center Crop
   Picasso.get()
        .load(urlImage)
        .resize(172, 172)
        .centerCrop()
        .into(iv_transformation)

//Center Crop with Gravity
   Picasso.get()
        .load(urlImage)
        .resize(172, 172)
        .centerCrop(Gravity.RIGHT)
        .into(iv_centercrop_withgravity)

//Only Resize
   Picasso.get()
        .load(urlImage)
        .resize(50, 50)
        .into(iv_resize)

//Rotate
   Picasso.get()
        .load(urlImage)
        .rotate(90f)
        .into(iv_rotate)

Note: Penggunaan centercrop() harus diiringi dengan penggunaan resize()

Placeholder

Di picasso kita juga bisa menggunakan placeholder.

   Picasso.get()
        .load(urlImage)
        .placeholder(R.drawable.ic_loading)
        .error(R.drawable.ic_error)
        .into(iv_placeholder)

• placeholder(…) untuk menggunakan drawable ketika image masih diload dari internet
• error(…) untuk menggunakan drawable ketika image gagal diload dari internet

Sekian postingan kali ini, semoga membantu ya. Kunjungi repo piccaso di github dan websitenya untuk melihat info terbaru dari Picasso ya 😀

YukNgoding juga punya beberapa topik menarik lainnya juga loh 😀

• Load Image dan GIF dengan menggunakan Glide
• Tingkatkan performa dengan Request Option di Glide

Terimakasih 😀