Android Academy · Pelajaran

Memuat Gambar dengan Coil

Muat dan simpan cache gambar jaringan secara efisien dengan Coil. Terapkan transformasi (CircleCrop, RoundedCorners), lalu tangani placeholder dan error.

Memuat Gambar dengan Coil adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 6. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 6 pelajaran total.

Mengapa Menggunakan Pustaka Gambar?

Memuat gambar dari internet ternyata cukup rumit:

Unduh di utas latar belakang
Simpan dalam tembolok di disk dan memori
Dekode secara efisien (hindari kerusakan akibat OOM)
Tampilkan gambar pengganti selama pemuatan
Tangani kesalahan (tautan rusak, tidak ada jaringan)

Coil menangani semuanya hanya dalam satu baris kode.

Apa Itu Coil?

Coil (Pemuat Gambar Korutin) adalah pustaka pemuatan gambar Android modern yang dibuat untuk Kotlin dan Korutin.

Ringan—lebih kecil daripada Glide atau Picasso
Berbasis Kotlin dengan dukungan korutin
Sadar akan siklus hidup—membatalkan pemuatan secara otomatis
Mendukung GIF, SVG, dan bingkai video

Menambahkan Coil

Tambahkan dependensi di app/build.gradle:

// app/build.gradle
dependencies {
    implementation 'io.coil-kt:coil:2.6.0'
}

// Also make sure internet permission is in AndroidManifest.xml:
// <uses-permission android:name="android.permission.INTERNET" />

Pemuatan Gambar Dasar

Muat gambar ke dalam ImageView dengan satu baris:

import coil.load

// In your Activity or Adapter:
binding.ivAvatar.load("https://picsum.photos/200")

// With a placeholder and error image:
binding.ivAvatar.load("https://picsum.photos/200") {
    placeholder(R.drawable.ic_placeholder)
    error(R.drawable.ic_error)
    crossfade(true)  // smooth fade-in animation
}

Pemuatan di RecyclerView

Coil secara otomatis membatalkan pemuatan yang tertunda ketika ViewHolder digunakan kembali—sehingga gambar yang salah tidak muncul pada baris yang salah:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val post = getItem(position)

    holder.tvTitle.text = post.title

    holder.ivCover.load(post.imageUrl) {
        placeholder(R.drawable.ic_image_placeholder)
        error(R.drawable.ic_broken_image)
        crossfade(300)  // 300ms fade-in
        size(200, 200)  // resize to 200×200 pixels
    }
}

Transformasi

Terapkan transformasi pada gambar yang dimuat:

CircleCropTransformation() — gambar berbentuk lingkaran (cocok untuk avatar)
RoundedCornersTransformation(radius) — sudut membulat
BlurTransformation(context, radius) — efek buram

Contoh Transformasi

Tampilkan avatar pengguna berbentuk lingkaran:

import coil.load
import coil.transform.CircleCropTransformation
import coil.transform.RoundedCornersTransformation

// Circular avatar
binding.ivAvatar.load(user.profileImageUrl) {
    transformations(CircleCropTransformation())
    placeholder(R.drawable.ic_default_avatar)
    error(R.drawable.ic_default_avatar)
}

// Rounded corners on a card image
binding.ivCover.load(post.coverUrl) {
    transformations(RoundedCornersTransformation(16f))
    crossfade(true)
}

Perilaku Caching

Coil secara otomatis menyimpan gambar dalam cache pada dua tingkat:

Cache memori — paling cepat, dihapus saat aplikasi dihentikan
Cache disk — tetap tersimpan saat aplikasi dijalankan kembali, secara bawaan 250 MB

Jika URL yang sama dimuat dua kali, pemuatan kedua berasal dari cache — tidak ada permintaan jaringan.

Memuat dari Berbagai Sumber

Coil dapat memuat gambar dari berbagai sumber, bukan hanya URL:

// From a URL (most common)
imageView.load("https://example.com/image.jpg")

// From a URI (e.g., gallery image)
imageView.load(uri)

// From a drawable resource
imageView.load(R.drawable.my_image)

// From a File
imageView.load(File("/sdcard/photo.jpg"))

// From a bitmap
imageView.load(bitmap)

Pemeriksaan Singkat

Transformasi Coil mana yang akan Anda gunakan untuk menampilkan foto profil pengguna sebagai lingkaran?

Ringkasan: Memuat Gambar dengan Coil

Sekarang Anda dapat menampilkan gambar jaringan secara efisien:

Tambahkan Coil dengan satu dependensi Gradle
imageView.load(url) { } — memuat dengan satu baris
Gambar pengganti saat memuat dan saat terjadi kesalahan
Transformasi: CircleCrop, RoundedCorners, Blur
Cache otomatis pada tingkat memori dan disk
Dapat digunakan dengan URL, URI, File, drawable, dan bitmap

Berikutnya: tangani kesalahan dengan baik dan berikan umpan balik yang bermanfaat bagi pengguna.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memuat Gambar dengan Coil” gratis?

Ya — teks lengkap “Memuat Gambar dengan Coil” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 6 pelajaran total.

Apa yang akan aku pelajari di “Memuat Gambar dengan Coil”?

Muat dan simpan cache gambar jaringan secara efisien dengan Coil. Terapkan transformasi (CircleCrop, RoundedCorners), lalu tangani placeholder dan error. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 6.

Berapa lama pelajaran “Memuat Gambar dengan Coil” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy