Skip to main content

How to cache and load images efficiently in ImageView in Kotlin Android

How to cache and load images efficiently in ImageView in Kotlin Android.

Here's a step-by-step tutorial on how to efficiently cache and load images in an ImageView in Kotlin for Android.

Step 1: Add necessary dependencies​

To begin with, you need to add the necessary dependencies to your project. Open the build.gradle file of your app module and add the following lines:

dependencies {
    implementation 'com.squareup.picasso:picasso:2.71828'
    implementation 'com.squareup.okhttp3:okhttp:4.9.1'
}

These dependencies will help us with image loading and caching.

Step 2: Set up caching mechanism​

Next, we'll set up a caching mechanism to store and retrieve images locally. We'll use the OkHttp library for this purpose. Create a new Kotlin class called OkHttpImageCache.kt and add the following code:

import android.content.Context
import okhttp3.Cache
import okhttp3.OkHttpClient
import java.io.File

class OkHttpImageCache(context: Context) {
    private val cacheSize = (10 * 1024 * 1024).toLong() // 10MB
    private val cacheDirectory = File(context.cacheDir, "image_cache")
    private val cache = Cache(cacheDirectory, cacheSize)

    val client: OkHttpClient = OkHttpClient.Builder()
        .cache(cache)
        .build()
}

This class sets up a cache directory and creates an OkHttpClient instance with the cache.

Step 3: Load image into ImageView​

Now, let's load an image into an ImageView efficiently using Picasso. In your activity or fragment, add the following code:

import com.squareup.picasso.Picasso

// Inside your activity or fragment
val imageUrl = "https://example.com/image.jpg"
val imageView = findViewById<ImageView>(R.id.imageView)

Picasso.get()
    .load(imageUrl)
    .into(imageView)

Here, we're using the Picasso library to load the image directly into the ImageView. Picasso handles image caching and efficiently loads images into the view.

Step 4: Enable memory caching​

Picasso provides in-memory caching by default, but it's a good practice to explicitly enable it. You can add the following code during application initialization (e.g., in your Application class):

import android.app.Application
import com.squareup.picasso.OkHttp3Downloader
import com.squareup.picasso.Picasso

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()

        val downloader = OkHttp3Downloader(OkHttpImageCache(this).client)
        Picasso.setSingletonInstance(
            Picasso.Builder(this)
                .downloader(downloader)
                .build()
        )
    }
}

This code initializes Picasso with a custom OkHttp3Downloader that uses our OkHttpImageCache for both memory and disk caching.

Step 5: Handling placeholder and error images​

You can display placeholder and error images while loading an image. Modify your image loading code as follows:

Picasso.get()
    .load(imageUrl)
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error)
    .into(imageView)

In this example, R.drawable.placeholder is the resource ID for the placeholder image, and R.drawable.error is the resource ID for the error image.

Step 6: Clearing the cache​

If you want to clear the image cache at any point, you can use the following code:

Picasso.get().clearCache()

This will clear both memory and disk caches.

Step 7: Disabling caching for specific requests​

In some cases, you may want to disable caching for specific image requests. You can do this using the noCache() method. Here's an example:

Picasso.get()
    .load(imageUrl)
    .noCache()
    .into(imageView)

This will bypass caching for this particular request.

That's it! You've learned how to efficiently cache and load images in an ImageView using Kotlin for Android. Remember to optimize the cache size according to your application's needs.