Load Image dengan Menggunakan COIL, Part 2

Selamat datang teman” di Part ke 2 tentang COIL. Jika teman” belum baca part pertamanya, bisa baca di link ini ya. Nah untuk part 2 ini kita akan membahas tentang transisi, mapper, gif, svg dan singleton. Langsung aja ke topik yang pertama, yuk ngoding 😀

Transisi

Untuk menggunakan transisi, kita bisa menggunakan code seperti berikut ini:

iv_transition.load(imageUrl) {
    placeholder(R.drawable.ic_loading)
    transition(CrossfadeTransition(5000))
}

• iv_transition adalah id dari ImageView yang kita gunakan
• CrossfadeTransition adalah transisi yang kita gunakan
• 5000 adalah durasi yang digunakan dan dalam satuan Milis

Mapper

Dalam mengolah data, tentu kita sering membuat class baru untuk menampung data tersebut. Hal yang biasa dilakukan adalah memanggil salah satu properti dari data tersebut, lalu menggunakan data tersebut untuk menampilkan gambar.

Coil menyediakan mapper agar kita tidak perlu mengambil properti tersebut. Kita cukup langsung memberikan data class tersebut. Berikut caranya

Pertama, tentu kita harus memiliki dao/objectnya. Berikut contohnya:

data class School(
    val id: Int,
    val imageUrl: String,
    val name: String
)

Kedua, kita akan membuat class yang berfungsi untuk mapper atau memilih properti yang mana akan digunakan nantinya oleh Coil. Pada object School kita akan menggunakan imageUrl.

import coil.map.Mapper

class SchoolMapper : Mapper<School, String> {
    override fun map(data: School) = data.imageUrl
}

Ketiga, setelah memiliki mapper, kita akan menambahkan mapper tersebut ke ImageLoader. Berikut contoh codenya beserta dengan penggunaannya:

val imageLoaderMapper = ImageLoader.Builder(this@CoilActivity)
         .componentRegistry {
              add(SchoolMapper())
         }.build()

val school = School( 1, "https://cdn2.tstatic.net/tribunnews/foto/bank/images/universitas-andalas.jpg", "Universitas Andalas" )

val request = LoadRequest.Builder(this@CoilActivity)
       .data(school)
       .target(iv_mapper)
       .build()

imageLoaderMapper.execute(request)

• Kita menggunakan componentRegistery untuk menambahkan mapper yang akan kita gunakan.
• Pada method .data() kita bisa langsung memberikan param object. Jadi kita tidak perlu mengambil properti url lagi.

GIF

Tentu saja, coil juga bisa menampilkan GIF, berikut contoh codenya.

val imageLoaderGif = ImageLoader.Builder(this@CoilActivity)
      .componentRegistry {
           if (SDK_INT >= 28) {
                add(ImageDecoderDecoder())
           } else {
                add(GifDecoder())
           }
      }.build()

val request = LoadRequest.Builder(this@CoilActivity)
       .data(urlGif)
       .target(iv_gif)
       .build()

imageLoaderGif.execute(request)

• Dalam menampilkan GIF kita juga menggunakan componentRegistery. Disini kita menambahkan decoder sesusai dengan SDK pada device.

SVG

Untuk SVG kita kembali menggunakan componentRegistry untuk menambahkan decodernya. Berikut contoh codenya:

val imageLoaderSvg = ImageLoader.Builder(this@CoilActivity)
         .componentRegistry {
              add(SvgDecoder(this@CoilActivity))
         }.build()

val request = LoadRequest.Builder(this@CoilActivity)
         .data(urlSvg)
         .target(iv_svg)
         .build()

imageLoaderSvg.execute(request)

• Disini kita menggunakan SvgDecoder untuk menampilkan file svg

Singleton

Nah sampai pada tahap ini, teman” tentu merasakan kalau kita cukup sering melakukan configurasi terhadap ImageLoader. Dari pada menggunakan ImageLoader kenapa tidak langsung memanggil method load saja dari ImageView?

Sebenarnya method load yang digunakan tersebut juga menggunakan ImageLoader. Kita bisa melakukan Command + Click (atau Control + Click untuk pengguna windows) pada method load tersebut, dan kita akan menemukan code seperti berikut:

/** @see ImageView.loadAny */
@JvmSynthetic
inline fun ImageView.load(
    uri: String?,
    imageLoader: ImageLoader = Coil.imageLoader(context),
    builder: LoadRequestBuilder.() -> Unit = {}
): RequestDisposable = loadAny(uri, imageLoader, builder)

Seperti yang terlihat, fungsi load tersebut sebenarnya juga menggunakan ImageLoader.

Lalu jika kita melakukan configurasi berulang kali, tentu kita nantinya akan sering melakukan duplikasi code. Pada kondisi ini kita bisa menggunakan Singleton. Dengan Singleton kita cukup melakukan inisialisasi untuk ImageLoader satu kali, setelah itu ImageLoader bisa digunakan di manapun.

Pertama, Buat class baru yang akan meextend ke class Application().

Kedua, Tambahkan ImageLoaderFactory untuk membantu kita dalam melakukan inisialisasi ImageLoader. Berikut contoh codenya:

class MyApp : Application(), ImageLoaderFactory {
    override fun onCreate() {
        super.onCreate()
    }

    override fun newImageLoader(): ImageLoader =
        ImageLoader.Builder(this)
            .build()
}

• Sesuaikan imageLoader yang diinginkan pada method newImageLoader(). Lakukan penambahan decoder untuk GIF, mapper atau hal lainnya yang sesuai dengan kebutuhan kita disini.

Ketiga, jangan lupa untuk melakukan pengaturan di androidManifest.xml untuk class MyApp kita, seperti berikut

    <application
        android:name=".MyApp"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        ...
        >

        ...

    </application>

Selesai, kita bisa menggunakan ImageLoader yang sama dan hal ini tentu akan mengurangi code yang sama di aplikasi kita 😀

#ExtraNote

Jika pada suatu kondisi ternyata aplikasi kita perlu untuk mengubah imageLoader yang akan digunakan, gunakan code seperti berikut ini

val imageLoader = ImageLoader.Builder(this)
        .availableMemoryPercentage(0.25)
        .crossfade(true)
        .placeholder(R.drawable.ic_camera)
        .build()
Coil.setImageLoader(imageLoader)

Dengan melakukan hal tersebut kita akan menimpa configurasi Coil yang terdapat pada class app kita dengan imageLoader yang baru

Sekian bahasan tentang coil, terimakasih untuk teman” yang telah meluangkan waktunya. Jika teman” tertarik dengan ImageLoader lainnya, bisa kunjungi link dibawah ini ya, terimakasih 😀

• Fresco
• Picasso
• Glide