Android-native

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...

Ikhwan Written by Ikhwan · 1 min read >

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.

Output ImageView
ImageView
<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.

result
(1) Center crop, (2) Center crop with Gravity, (3) Only Resize, (4) Rotate
//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 😀

Terimakasih 😀

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *