Android Academy · Pelajaran

Memuat Gambar dengan Coil

Pemuatan gambar asinkron di Compose.

Memuat Gambar dengan Coil adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. 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 4 pelajaran total.

Mengapa Anda Membutuhkan Pemuat Gambar

Sebagian besar aplikasi modern menampilkan gambar dari internet: foto profil, gambar produk, dan gambar mini artikel. Mengunduh dan mendekode gambar tersebut dengan benar ternyata lebih sulit daripada yang terlihat.

Anda harus mengambil byte melalui jaringan di thread latar belakang, mendekodenya menjadi bitmap, menyimpannya dalam cache agar tidak perlu diambil ulang, serta membatalkan permintaan jika pengguna menggulir menjauh. Melakukan semua ini secara manual rentan terhadap kesalahan.

Coil (Coroutine Image Loader) menangani semuanya untuk Anda dengan API yang ringkas dan ramah Compose. Dalam pelajaran ini, Anda akan memuat gambar jarak jauh pertama Anda.

Menambahkan Coil ke Proyek Anda

Coil tersedia sebagai dependensi Gradle. Untuk Jetpack Compose, Anda memerlukan artefak coil-compose, yang menyediakan composable AsyncImage.

Tambahkan artefak tersebut ke modul build.gradle.kts. Coil 3 adalah versi utama terbaru dan berfungsi lintas platform; integrasi Compose itulah yang digunakan di sini.

// build.gradle.kts (module level)
dependencies {
    implementation("io.coil-kt.coil3:coil-compose:3.0.4")
    implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.4")
}

Izin Internet

Untuk mengunduh gambar dari URL, aplikasi Anda memerlukan izin INTERNET. Ini adalah izin normal (saat pemasangan), jadi Anda hanya perlu mendeklarasikannya di manifest. Tidak ada dialog permintaan saat runtime.

Tanpa izin tersebut, setiap permintaan jaringan akan gagal dengan pengecualian keamanan.

<!-- AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <application ...>
        ...
    </application>
</manifest>

AsyncImage Pertama Anda

Cara paling sederhana untuk menampilkan gambar jarak jauh di Compose adalah AsyncImage. Berikan model (biasanya berupa string URL) dan contentDescription, lalu Coil akan menangani sisanya: pengambilan di latar belakang, dekode, dan penampilan gambar.

Secara otomatis, Coil menggunakan coroutine yang terikat pada komposisi, sehingga permintaan dibatalkan jika composable meninggalkan layar.

import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun Avatar() {
    AsyncImage(
        model = "https://example.com/avatar.png",
        contentDescription = "User avatar",
        modifier = Modifier.size(96.dp)
    )
}

contentScale: Cara Gambar Menyesuaikan Diri

Gambar jarang memiliki ukuran yang sama persis dengan ruang tata letak Anda. ContentScale mengatur cara bitmap diskalakan di dalam batasnya.

ContentScale.Crop memenuhi kotak dan memotong bagian yang meluap (cocok untuk avatar dan gambar mini).
ContentScale.Fit mempertahankan seluruh gambar agar terlihat, tetapi mungkin menyisakan ruang kosong.
ContentScale.FillBounds meregangkan gambar hingga memenuhi ruang (dapat menyebabkan distorsi).

Crop adalah pilihan yang paling umum untuk ruang berukuran tetap.

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun CircleAvatar(url: String) {
    AsyncImage(
        model = url,
        contentDescription = "Avatar",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(80.dp)
            .clip(CircleShape)
    )
}

Membuat Permintaan dengan ImageRequest

Meneruskan string URL adalah cara cepat. Untuk kontrol lebih besar, buatlah ImageRequest. Dengan ini, Anda dapat mengatur opsi seperti crossfade, header, transformasi, dan kunci cache.

Anda memerlukan Context, yang disediakan Compose melalui LocalContext.current.

import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ProductImage(url: String) {
    val context = LocalContext.current
    val request = ImageRequest.Builder(context)
        .data(url)
        .crossfade(true)
        .build()

    AsyncImage(
        model = request,
        contentDescription = "Product photo"
    )
}

Crossfade untuk Pemuatan yang Halus

Secara default, gambar muncul seketika setelah selesai dimuat, sehingga terasa tiba-tiba. crossfade(true) menampilkan gambar secara bertahap melalui animasi singkat.

Anda juga dapat memberikan durasi dalam milidetik untuk membuat efek muncul bertahap yang lebih lambat atau lebih cepat. Sentuhan kecil ini membuat daftar terasa jauh lebih rapi.

import coil3.request.ImageRequest
import coil3.request.crossfade
import android.content.Context

fun smoothRequest(context: Context, url: String) =
    ImageRequest.Builder(context)
        .data(url)
        .crossfade(durationMillis = 300)
        .build()

Memuat dari Berbagai Sumber

model pada AsyncImage bersifat fleksibel. Coil dapat memuat gambar dari berbagai jenis sumber, bukan hanya URL jarak jauh:

String atau Uri untuk file jaringan atau lokal.
ID resource drawable (R.drawable.logo).
File dari perangkat.
Uri konten dari pemilih foto.

Artinya, composable yang sama dapat menangani gambar jarak jauh dan lokal dengan lancar.

import android.net.Uri
import androidx.compose.runtime.Composable
import coil3.compose.AsyncImage

@Composable
fun FlexibleImage(source: Any) {
    // source can be a URL String, a Uri, a File, or a resource id
    AsyncImage(
        model = source,
        contentDescription = null
    )
}

// Examples:
// FlexibleImage("https://example.com/pic.jpg")
// FlexibleImage(Uri.parse("content://media/external/images/1"))

Merespons Status Pemuatan

Terkadang Anda perlu mengetahui apakah gambar sedang dimuat, berhasil dimuat, atau gagal agar dapat menampilkan UI yang berbeda. AsyncImagePainter menyediakan status tersebut, tetapi cara paling sederhana adalah SubcomposeAsyncImage, yang memungkinkan Anda menyediakan konten untuk setiap status.

Kita akan membahas placeholder lebih mendalam pada pelajaran berikutnya; di sini Anda melihat bentuk dasar pemuatan yang peka terhadap status.

import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import coil3.compose.SubcomposeAsyncImage

@Composable
fun StatefulImage(url: String) {
    SubcomposeAsyncImage(
        model = url,
        contentDescription = "Photo",
        loading = { CircularProgressIndicator() }
    )
}

Pembatalan Otomatis

Salah satu keunggulan terbesar Coil adalah pembatalan otomatis. Karena AsyncImage menjalankan permintaannya di dalam komposisi, ketika composable meninggalkan layar (misalnya sebuah baris tergulir keluar dari LazyColumn), permintaan yang sedang berlangsung akan dibatalkan.

Hal ini menghemat bandwidth dan CPU serta mencegah pekerjaan yang sia-sia. Anda tidak perlu menulis kode pembatalan sendiri, sehingga Coil dapat digunakan dengan baik pada daftar yang panjang.

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage

@Composable
fun PhotoFeed(urls: List<String>) {
    LazyColumn {
        items(urls) { url ->
            AsyncImage(
                model = url,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
            )
        }
    }
}

Kartu Gambar Lengkap

Mari gabungkan hal-hal yang telah dipelajari: kartu dengan gambar jarak jauh yang memenuhi bagian atas, menggunakan crossfade, dan dipotong hingga ketinggian tetap. Ini adalah pola dasar yang akan sering Anda gunakan kembali.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade

@Composable
fun ImageCard(title: String, imageUrl: String) {
    val context = LocalContext.current
    Card(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        Column {
            AsyncImage(
                model = ImageRequest.Builder(context)
                    .data(imageUrl)
                    .crossfade(true)
                    .build(),
                contentDescription = title,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxWidth().height(180.dp)
            )
            Text(text = title, modifier = Modifier.padding(16.dp))
        }
    }
}

Pemeriksaan Singkat

Composabale manakah dari coil-compose yang merupakan cara paling sederhana untuk menampilkan gambar jarak jauh berdasarkan URL di Jetpack Compose?

Rangkuman

Anda telah memuat gambar jarak jauh pertama dengan Coil. Hal-hal penting:

Tambahkan coil-compose dan dependensi jaringan OkHttp, serta izin INTERNET.
AsyncImage(model = url, contentDescription = ...) adalah cara cepat.
Gunakan ContentScale.Crop dengan ukuran tetap untuk avatar dan gambar mini.
Buat ImageRequest untuk crossfade dan kontrol yang lebih besar.
Coil secara otomatis membatalkan permintaan yang sedang berlangsung saat composable meninggalkan layar.

Berikutnya: membuat proses pemuatan lebih baik dengan placeholder dan status kesalahan.

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 4 pelajaran total.

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

Pemuatan gambar asinkron di Compose. 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 1 dari 4.

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