The Art of Delegation: Image Loading in Android! 🤖 🚀

When it comes to displaying images in Android, there are a lot of ways to do it. However, with so many options, it can be tough to choose the right one and even tougher to manage it in the long run. That’s where Image Loading Delegation comes into play! 🎉

In this blog, we’ll dive into a use case of Image Loading Delegation using the popular image loading library, Glide, in Android.

But before we start, let’s take a moment to understand what Image Loading Delegation is all about.

Image Loading Delegation is a kind of delegation design pattern that separates the responsibilities of loading and displaying images. It provides a layer of abstraction between your app and the image-loading library you use. This way, you can change the library easily without affecting the rest of your code. 💻

Alright, now that we’ve got the basics out of the way, let’s get started! 🚀

Add the Dependencies 🤟

First, we need to add the Glide dependencies to our app-level build.gradle file.

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.14.2'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.14.2'
}

Define the delegate interface for Image Loading 🔥

interface ImageLoadingDelegate {
    fun load(iv: ImageView, url: String, config: ImageConfig = ImageConfig())
}

The ImageLoadingDelegate interface defines a single load method, which takes in an ImageView, a url string, and an ImageConfig object for optional configuration. 💡

Create a data class to hold the ImageConfig options 📦

data class ImageConfig(
        val placeholder: Int? = null,
        val errorDrawable: Int? = null,
        val transformation: Transformation<Bitmap>? = null
    )

The ImageConfig data class holds the options for the image loading process, including a placeholder drawable resource ID, an errorDrawable resource ID, and a transformation for the image. 🖼️

Implement delegate interface using your preferred image-loading library 🔨

class GlideImageLoadingDelegate : ImageLoadingDelegate {
    override fun load(iv: ImageView, url: String, config: ImageConfig) {
        Glide.with(iv.context)
            .load(url)
            .apply {
                config.placeholder?.let { placeholder(it) }
                config.errorDrawable?.let { error(it) }
                config.transformation?.let { transform(it) }
            }
            .into(iv)
    }
}

The GlideImageLoadingDelegate implements the ImageLoadingDelegate interface, using the Glide library for loading images. The load method sets up the request using Glide's with method, applying the ImageConfig options with the apply method, and finally loading the image into the ImageView with the into method. 💥

Create an ImageView extension that uses the delegate 💻

fun ImageView.load(
        url: String,
        delegate: ImageLoadingDelegate,
        config: ImageConfig = ImageConfig()
   ) {
        delegate.load(this, url, config)
    }

The load extension method for ImageView is a shorthand for calling the load method in the ImageLoadingDelegate interface. It takes in the same parameters and passes them directly to the delegate. 📣

Usage in an Activity or Fragment 🔥

class MainActivity : AppCompatActivity() {
    private val delegate = GlideImageLoadingDelegate()
    private val placeholder = R.drawable.placeholder
    private val errorDrawable = R.drawable.error
    private val transformation = RoundedCornersTransformation(20, 0)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        imageView.load("https://picsum.photos/200", delegate, 
                       ImageConfig(placeholder, errorDrawable, transformation))
    }
}

In this example, the MainActivity sets up a single delegate instance, and defines a set of image-loading options including placeholder, errorDrawable, and transformation. In the onCreate method, it loads an image into an ImageView .

🎉 With delegation, you can easily change the implementation of your image-loading process by swapping out the delegate class with another one that uses a different image-loading library. You can also add new features, such as image resizing or cropping, without affecting the main activity.

And that’s a wrap folks! It’s been a fascinating journey exploring the world of technology with you all. To stay ahead of the tech curve, be sure to follow me so we can connect and continue to learn together. Don’t miss out on cutting-edge tech knowledge!

LinkedIn: https://www.linkedin.com/in/sachankapil
YouTube: https://www.youtube.com/@codewithkapil
Telegram Channel: https://t.me/+QkKKJTuNY89hOGRl
GitHub: https://github.com/SachanKapil