Tutorial Jetpack compose: Image

Pada kesempatan kali ini, saya akan membagikan tutorial menampilkan gambar di Jetpack Compose. Langsung saja kita ke pembahasannya.

Introduction

Gambar menjadi hal penting dalam pengembangan aplikasi android. 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, picasso, coil, dan masih banyak lagi.

Jetpack Compose menyediakan API composable Image(), untuk menampilkan gambar bitmap, vektor, atau painter. Ada banyak perubahan sejak versi preview pada API ini. Jadi kalian harus rajin - rajin buka dokumentasinya agar ketika menggunakan API pada jetpack compose tidak deprecated.

Note: artikel ini dibuat, menggunakan versi jetpack compose beta08.

📱 Menampilkan gambar resource

Menampilkan gambar dari drawable sangatlah mudah. Sebelumnya kalian harus punya file gambarnya di drawable seperti berikut.

Setelah itu kalian buat tampilan gambar nya menggunakan Image(). Ada 2 parameter yang wajib diisi yaitu painter dan contentDescription. Pada parameter painter, isi dengan painterResource(R.drawable.foto) ini menunjukan painter mengambil gambar dari resource.

@Composable
fun ImageResource() {
    val image: Painter = painterResource(id = R.drawable.food)
    Image(painter = image,contentDescription = "")
}

🎨 Styling Gambar

Image() menyediakan juga beberapa parameter untuk styling gambar. Kalian bisa mengatur color filter, size atau content scale.

Styling dengan Modifier

Kalian bisa memanfaatkan Modifier untuk menentukan size, border, atau shape dari gambar.

Crop gambar

Metode ini digunakan menentukan skala pada gambar entah itu fit, crop, fillHeight, atau fillWidth. Gambar discale agar menyesuaikan ukuran.

Contoh diatas merupakan ContentScale.Fit. Ini hanya akan menampilkan gambar sesuai ukuran gambar bukan ukuran dari parent nya.

Filter Warna

Efek yang digunakan untuk mengubah warna setiap piksel yang digambar. Ini menggunakan parameter colorFilter.

🌐 Menampilkan gambar network

Lalu bagaimana menampilkan gambar dari network atau URL. Nah jetpack compose sendiri tidak menyediakan, tapi ada library dari Accompanist menyediakannya. Library ini merupakan pengembangan dari Glide dan Coil agar bisa digunakan di Jetpack Compose.

Note: Accompanist sendiri merupakan kumpulan library milik google untuk Jetpack Compose.

Saya akan menggunakan accompanist-coil bukan glide karena coil lebih direkomendasikan karena lebih kompatibel dengan coroutine. Seperti biasa tambahkan library nya di app/build.gradle.

dependencies {
    implementation "com.google.accompanist:accompanist-coil:<version>"
}

Yang berbeda dengan menampilkan gambar dari resource adalah di bagian painter-nya. Kalau menggunakan accompanist-coil kalian harus menggunakan painter rememberCoilPainter(). Painter ini memuat data yang di passing, menggunakan Coil , dan kemudian menggambar gambar yang dihasilkan.

@Composable
fun ImageResource() {
    Image(
        painter = rememberCoilPainter("https://picsum.photos/300/300"),
        contentDescription = null,
        modifier = Modifier.size(100.dp)
    )
}

Penutup

Itu dia tutorial memuat image di Jetpack Compose. Jika kalian masih belum mengerti atau pengen tahu lebih banyak silahkan kunjungi dikumentasi resminya di https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary

Sekian 😁