Bu makalemizin konusu Jetpack Compose üzerinde resimleri internet üzerinden çekip, Image nesnesi üzerinde nasıl gösterebileceğimiz ile alakalıdır.
Accompanist Glide ve Accompanist Coil kütüphanelerinin deprecated olması ile birlikte Accompanist yeni kullanıcıları https://coil-kt.github.io/coil/compose/ adresindeki kütüphaneye yönlendiriyor.
Peki nedir bu Coil library ?
Android için Kotlin Coroutines tarafından desteklenen bir görüntü yükleme kütüphanesi. Coil:
- Hızlıdır: Coil bellek ve disk önbellekleme, bellekteki görüntüyü alt-örnekleme, biteşlemlerin tekrar kullanımı, isteklerin otomatik olarak durdurulması/iptali ve daha fazlasını içeren pek çok sayıda optimizasyon gerçekleştirir.
- Hafiftir: Coil, APK’nıza Picasso ile benzer ve Glide ve Fresco’dan önemli ölçüde daha az sayıda, 2000 civarında metod ekler.(Halihazırda OkHttp ve Coroutines kullanan uygulamalar için)
- Kullanımı kolaydır: Coil’in API’si basitlik ve mininum basmakalıp için Kotlin’in dil özelliklerini sonuna kadar kullanır.
- Moderndir: Coil Kotlin-önceliklidir ve Coroutines, OkHttp, Okio ve AndroidX Lifecycles gibi modern kütüphaneleri kullanır.
Coil şunların baş harflerinden oluşur: Coroutine Image Loader.
Coil‘i mavenCentral() repository’sinden indirebilirsiniz;
implementation("io.coil-kt:coil:2.1.0")
Coil’i klasik yöntem ile ImageView nesnesinde de kullanabilirsiniz.
// URL
imageView.load("https://www.example.com/image.jpg")
// Resource
imageView.load(R.drawable.image)
// File
imageView.load(File("/path/to/image.jpg"))
// Ve daha fazlası...
Jetpack Compose projemizde Coil‘i kullanabilmek için, ilgili kütüphaneyi projemize dahil edelim;
implementation("io.coil-kt:coil-compose:2.1.0")
Örnek kodumuz;
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data("https://play-lh.googleusercontent.com/rRCR6DrB78lHc996FSHzjdh9Xt3cMaZEWc-sAKwE0_9bkF3kCrCCupEoKDmlr1W0nAch")
.crossfade(true)
.build(),
placeholder = painterResource(R.drawable.ic_launcher_background),
contentDescription = "",
contentScale = ContentScale.Crop,
modifier = Modifier
.clip(CircleShape)
.width(250.dp)
.height(250.dp)
)
}

AsyncImage haricinde SubcomposeAsyncImage sınıfı da bulunmaktadır. Bu sınıf sayesinde resim yüklenirken loading animasyonu döndürebilirsiniz.
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
SubcomposeAsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data("https://github.com/google/accompanist/raw/main/docs/header.png")
.crossfade(true)
.build(),
loading = {
CircularProgressIndicator()
},
contentDescription = "",
contentScale = ContentScale.Crop,
modifier = Modifier
.clip(CircleShape)
.width(250.dp)
.height(250.dp)
)
}
SubcomposeAsyncImage, daha önce cache edilmiş image url’in contentini göstereceğinden dolayı loading animasyonunu göstermeyecektir.

İyi çalışmalar dilerim.