💾 Data, Network & Architecture · Lesson 34
Load Images with Glide
Why an image library?
Loading images by hand means downloading on a background thread, decoding, resizing to the view size, caching, cancelling when a row scrolls away… Glide does all of it in one line.
Setup
TOML + Kotlin DSL + XML
# libs.versions.toml
glide = "4.16.0"
glide = { group = "com.github.bumptech.glide", name = "glide", version.ref = "glide" }
// app/build.gradle.kts
implementation(libs.glide)
<!-- AndroidManifest.xml -->
<uses-permission android:name="android.permission.INTERNET" />Load from a URL
Kotlin
Glide.with(this) // Activity, Fragment or View
.load("https://codingeasily.in/assets/img/tutorials/android/tip-1.png")
.into(binding.ivTip)Placeholder, error, crop
Kotlin
Glide.with(this)
.load(product.imageUrl)
.placeholder(R.drawable.ic_image) // while loading
.error(R.drawable.ic_broken_image) // if it fails
.centerCrop()
.into(binding.ivProduct)
// round avatar
Glide.with(this).load(user.photoUrl).circleCrop().into(binding.ivAvatar)
// rounded corners (16 px) after centerCrop
Glide.with(this).load(url)
.transform(CenterCrop(), RoundedCorners(16))
.into(binding.ivBanner)
// fade in
Glide.with(this).load(url).transition(DrawableTransitionOptions.withCrossFade()).into(binding.ivBanner)Images in RecyclerView
Kotlin
override fun onBindViewHolder(holder: VH, position: Int) {
val p = getItem(position)
holder.binding.tvName.text = p.name
Glide.with(holder.binding.ivThumb) // bind to the view → auto-cancel on recycle
.load(p.imageUrl)
.placeholder(R.drawable.ic_image)
.centerCrop()
.into(holder.binding.ivThumb)
}Local files and photos
Kotlin
// Student Diary – photo copied into app storage (File)
note.imagePath?.let { Glide.with(b.ivThumb).load(File(it)).centerCrop().into(b.ivThumb) }
// content:// Uri from the photo picker
Glide.with(this).load(uri).into(binding.ivPhoto)
// a drawable resource
Glide.with(this).load(R.drawable.banner).into(binding.ivBanner)Caching
Kotlin
// Glide caches in memory + on disk automatically.
// Force a fresh download (e.g. a profile photo that changed on the server):
Glide.with(this).load(url)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(binding.ivAvatar)
// Better: change the URL when the image changes – https://…/avatar.jpg?v=3Common mistakes
Glide.with(applicationContext)in a fragment → requests are not cancelled with the screen; use the fragment or the view.- Huge server images (3000px) for 80dp thumbnails → wasted data; serve smaller images from the API.
- No placeholder in lists → old images flash in recycled rows.
Summary
Glide.with(x).load(source).into(imageView)— source can be URL, File, Uri or resource.- Add placeholder/error, centerCrop/circleCrop/RoundedCorners.
- Caching and recycling are handled for you.
✅ Practice
Show the tip images from android-tips.json in a 2-column grid with rounded corners, a placeholder and a cross-fade.
Frequently Asked Questions
Glide or Coil?
Both are excellent. Glide is the long-standing standard for View-based apps and is used here. Coil is Kotlin-first and popular with Jetpack Compose.
Do I need the INTERNET permission for Glide?
Yes, to load http(s) images. Local files and resources do not need it.
Why do images in my list show the wrong picture briefly?
Recycled rows still show the previous image. Glide cancels old requests automatically when you call Glide.with(view).load(...).into(view) for every bind; also set a placeholder.
