Android-native

Load Image dengan Menggunakan COIL, Part 1

Nah load image lagi ( :v ). Saya sendiri mencoba untuk membahas per topik dan ini bahasan terakhir ( untuk saat ini...

Ikhwan Written by Ikhwan · 3 min read >

Nah load image lagi ( :v ). Saya sendiri mencoba untuk membahas per topik dan ini bahasan terakhir ( untuk saat ini 😀 ) tentang load image. Di postingan ini kita bakal bahas COIL. Jika dibandingkan dengan Picasso, Glide, dan Fresco, library Coil ini tergolong baru. Meskipun baru, library ini cukup menjanjikan dikarenakan Coil adalah

  • Fast: Coil melakukan optimasi termasuk memory dan dis caching, downsampling gambar di memory, re-using Bitmaps, dan berbagai hal lainnya.
  • Lightweight: Coil menambahkan ~2000 method ke APK (untuk apps yang telah menggunakan OkHttp), yang mana sebanding dengan Picasso dan jauh lebih sedikit dari pada Glide dan Fresco.
  • Easy to use: Library ini menggunakan feature bahasa Kotlin untuk mempermudah dan mengurangi boilerplate
  • Modern: Librari ini dibangun dengan menjadikan kotlin sebagai target utama, dan menggunakan library modern, seperti Coroutines, OkHttp, Okio, dan AndroidX Lifecycles.

Jika teman” tertarik dengan image loader yang lainnya, bisa kunjungi link di bawah ini ya 😀

Sesuai dengan penjelasannya, library ini cukup menjanjikan. Saya menggunakan kata “cukup” karena belum mencobanya di aplikasi yang udah release, tapi untuk next project bakalan pake library ini untuk Image loader. Nah langsung aja, Yuk Ngoding 😀


Persiapan

Kita akan menambahkan library Coil dan beberapa pengaturan pada build.gradle(:app) seperti di bawah ini:

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

android {
    
    ...

    // COIL
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

}

// COIL
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

dependencies {

    ...

    // COIL
    implementation("io.coil-kt:coil:0.11.0")
    // For gif
    implementation("io.coil-kt:coil-gif:0.11.0")
    // For svg
    implementation("io.coil-kt:coil-svg:0.11.0")
    // For video frame
    implementation("io.coil-kt:coil-video:0.11.0")
}

Lalu jangan lupa tambahkan permission internet di AndroidManifest.xml seperti biasanya ya.


Layout

Disini kita akan menggunakan ImageView yang memiliki background hijau, agar kita dapat melihat transformasi atau perubahan yang akan terjadi nantinya. Gunakan layout seperti berikut ini

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"
    tools:src="@drawable/ic_launcher_background" />

Simple Call

Kita akan menggunakan coin untuk menampilkan gambar dari internet. Gunakan code berikut ini:

iv_standart.load(imageUrl)
  • iv_standart merupakan Id dari ImageView yang kita gunakan
  • imageUrl merupakan url dari gambar yang ingin kita tampilkan

Seperti yang terlihat pada code di atas, kita bisa menjalankan sebuah method yang tersedia di ImageView. Hal ini bisa dilakukan karena coin menggunakan Kotlin Extension.

Berikut hasil dari code sebelumnya:

Hasil

Kita juga bisa membatalkan proses dengan code berikut ini:

val disposable = iv_standart.load(imageUrl)
disposable.dispose()

ImageLoader

Selain menggunakan Kotlin Extension, kita juga bisa menggunakan opsi lainnya yaitu ImageLoader. ImageLoader adalah kelas service yang akan mengeksuksi request. Request yang dimaksud disini adalah LoadRequest atau GetRequest.

Kita bisa melakukan inisialisasi pada ImageLoader dengan beberapa cara, seperti berikut:

//Cara 1
var imageLoader = Coil.imageLoader(this)
//Cara 2
var imageLoader = ImageLoader.Builder(this).build()

Yang membedakan antara kedua cara tersebut adalah scope pengunaan. Cara pertama memiliki scope di level aplikasi. Yang mana jika setiap activity menggunakan code tersebut, maka kita akan menggunakan image loader yang sama di setiap activity.

Sedangkan cara kedua, imageloader hanya akan digunakan di activity itu sendiri. Jika code digunakan pada activity yang lainnya, makan itu akan menjadi imageloader baru, atau bisa dibilang tidak berkaitan.

Pengujian untuk dua statement tersebut bisa dilakukan dengan memanggil fungsi shutdown(). Fungsi ini akan membuat Coil tidak akan bisa digunakan lagi. Dengan cara pertama akan membuat coil tidak bisa digunakan lagi di seluruh activity, sedangkan cara kedua hanya akan membuat coil tidak berfungsi untuk satu activity itu saja.

Terdapat satu topik yang berkaitan dengan hal ini yaitu Singleton. Tapi hal tersebut akan kita bahas nanti ya.


LoadRequest dan GetRequest

Ketika menggunakan image loader, kita juga akan menggunakan LoadRequest atau GetRequest.

  • LoadRequest adalah request yang scopenya ada pada Lifecycle dan mensupport Target, Transisi, dan lainnya
  • GetRequest adalah request yang suspend atau async. Dan akan mengembalikan sebuah result yaitu RequestResult. Hal tersebut bisa dilakukan dengan adanya Coroutine

Berikut contoh penggunaan:

//Inisialisasi ImageLoader
var imageLoader = ImageLoader.Builder(this).build()

// Menggunakan LoadRequest
val request = LoadRequest.Builder(this)
    .data(imageUrl)
    .target(iv_imageloader_loadrequest)
    .build()
imageLoader.execute(request)

// Menggunakan GetRequest
val request = GetRequest.Builder(this)
    .data(imageUrl)
    .build()
GlobalScope.async {
    val result = imageLoader.execute(request)
    result.drawable?.let { image ->
       iv_imageloader_getrequest.setImageDrawable(image)
    }
}
  • this merupakan context
  • imageUrl merupakan url dari gambar yang ingin ditampilkan
  • iv_imageloader_loadrequest dan iv_imageloader_getrequest merupakan id dari ImageView
  • untuk menjalakan execute terhadap GetRequest, code harus berada di dalam CoroutineScope

Penggunaan LoadRequest diatas memiliki makna yang sama dengan code berikut ini:

iv_imageloader_loadrequest.load(imageUrl)

Target

Ketika menggunakan LoadRequest, kita akan menentukan dimana image akan dipasang dengan menggunakan target. Selain langsung menggunakan id, kita juga bisa menggunakan custom target seperti berikut ini

val request = LoadRequest.Builder(this@CoilActivity)
      .data(imageUrl)
      .placeholder(R.drawable.ic_loading)
      .error(R.drawable.ic_error)
      .target(
         onStart = { placeholder ->
                            
         },
         onSuccess = { result ->
         
         },
         onError = { error ->
         
         }
      ).build()
imageLoader.execute(request)

Note: Karena kita menggunakan .placeholder(R.drawable.ic_loading), maka value pada placeholder yang terdapat pada onStart tidak akan bernilai null. Begitu juga dengan onError


Transformation

Di coil, terdapat beberapa transformation seperti berikut ini:

iv_blur.load(imageUrl) {
    placeholder(R.drawable.ic_loading)
    transformations(BlurTransformation(this@CoilActivity))
}
iv_circlecrop.load(imageUrl) {
    placeholder(R.drawable.ic_loading)
    transformations(CircleCropTransformation())
}
iv_grayscale.load(imageUrl) {
    placeholder(R.drawable.ic_loading)
    transformations(GrayscaleTransformation())
}
iv_roundedcorner.load(imageUrl) {
    placeholder(R.drawable.ic_loading)
    transformations(RoundedCornersTransformation(24F))
    
    //apply to specific corner
    //transformations(RoundedCornersTransformation(topLeft =     
      12F,bottomLeft = 12F))
}

Berikut adalah hasil code di atas:

Hasil

Nah masih ada beberapa hal lagi yang bisa kita bahas, seperti transisi, mapper, gif, svg, singleton. Namun setelah saya sadari ternyata tulisan ini udah cukup panjang, hahah. Oleh karena itu pembahasan tersebut akan kita lanjutkan di part yang kedua ya. Kunjungi link berikut:

Sekian dulu untuk postingan ini, terimakasih 😀

Tinggalkan Balasan

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