Belajar jetpack compose: Memuat gambar online

Menampilkan gambar dari url (network image) di toolkit UI jetpack compose

cover

Emm, hai guys, udah kenal dengan Jetpack Compose. Baik, bagi kalian yang belum kenal aku kenalin dulu. Jadi jetpack compose adalah toolkit UI yang disediakan oleh tim android untuk membangun tampilan di Android. Kalau sebelumnya kalian pakai xml untuk membuat UI sekarang sudah ada API yang bisa membuat tampilan langsung dengan bahasa kotlin.

What’s new in jetpack compose ?

Hingga saat artikel ini ditulis, jetpack compose sudah mencapai versi beta07. Menurut tim android pada google io kemarin, juli tahun ini jetpack compose versi stabil akan dirilis. Dengan jetpack compose kalian bisa membuat tampilan secara deskriptif seperti flutter atau swiftUI.

Introduction

Ketika mengembangkan suatu aplikasi, pastinya kalian butuh menampilkan gambar, entah itu gambar dari lokal atau dari url (network image). Pada android, ada beberapa library yang berfungsi untuk menampilkan gambar dari url, seperti :

• Glide

Glide

Glide library buatan bumptech yang bisa digunakan untuk memuat gambar dari lokal dan network.

// For a simple view:
@Override public void onCreate(Bundle savedInstanceState) {
  ...
  ImageView imageView = (ImageView) findViewById(R.id.my_image_view);

  Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);
}

kalian bisa mengunjungi github nya di https://github.com/bumptech/glide

• Picasso

Hampir sama dengan glide, picasso juga merupakan library image loading. Bedanya tidak ada context yang diperlukan untuk penggunaannya.

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

Official site => https://square.github.io/picasso/

• Coil

Jika kedua library sebelumnya dibuat dengan bahasa java, Coil dibuat dengan bahasa kotlin.Dan memiliki dukungan penuh dengan Coroutine.

// URL
imageView.load("https://www.example.com/image.jpg")

// Resource
imageView.load(R.drawable.image)

Github -> https://github.com/coil-kt/coil

Semua library tersebut masih menggunakan xml, terus bagaimana kalau dengan Jetpack Compose. OK, saya akan bahas beberapa library image loading yang bisa dipakai di Jetpack Compose.

Accompanist

Sebelum itu, aku kenalin dulu dengan Accompanist. Jadi Accompanist adalah sekelompok library yang bertujuan untuk melengkapi Jetpack Compose dengan fitur-fitur yang biasanya dibutuhkan oleh pengembang, tetapi belum tersedia, seperti image loading.

Accompanist

Image loading sendiri disediakan oleh Accompanist, yaitu Glide dan Coil. Kedua dikembangkan oleh tim Accompanist agar kompatible dengan Jetpack Compose. Oh ya Accompanist dibuat oleh google dan menyediakan masih banyak lagi library — library yang bisa kalian gunakan.

Saat ini Accompanist memiliki versi 0.11.1. Kalian bisa mengunjungi dokumentasinya di https://google.github.io/accompanist

Glide

Untuk menggunakannya seperti biasa tambahkan librarynya dulu

// setting.gradle
repositories {
    mavenCentral()
}
// app/build.gradle
dependencies {
    implementation "com.google.accompanist:accompanist-glide:<version>"
}

Cara penggunaanya cukup gunakan painter khusus yang sudah disediakan oleh glide yaitu rememberGlidePainter()

Accompanist Glide

Coil

Sama seperti sebelumnya tambahkan dulu library-nya. Pastikan menggunakan versi terbaru, bisa kalian lihat didokumentasi resminya disini

// setting.gradle
repositories {
    mavenCentral()
}
// app/build.gradle
dependencies {
    implementation "com.google.accompanist:accompanist-coil:<version>"
}

Cara penggunaanya cukup gunakan painter khusus yang sudah disediakan oleh glide yaitu rememberCoilPainter()

Consclusion

Nah itu dia tentang bagaimana menampilkan sebuah gambar di jetpack compose menggunakan library — libary yang sudah disediakan official oleh google sendiri. ada sedikit catatan mengenai penggunaan kedua libary tersebut.

Jik Anda memiliki persyaratan khusus untuk menggunakan Glide, pertimbangkan untuk menggunakan Coil sebagai gantinya. Coil dibangun di atas Kotlin Coroutine yang artinya terintegrasi lebih baik dengan Jetpack Compose, yang juga banyak menggunakan Coroutine.