How to implement lazy loading of images in a RecyclerView in Kotlin Android

How to implement lazy loading of images in a RecyclerView in Kotlin Android.

Here's a detailed step-by-step tutorial on how to implement lazy loading of images in a RecyclerView in Kotlin for Android:

1. Add the necessary dependencies:
   • Open your project's build.gradle file.
   • Add the following dependencies under the dependencies block:

implementation 'androidx.recyclerview:recyclerview:1.2.1'
implementation 'com.squareup.picasso:picasso:2.71828'

2. Create a new layout file for the RecyclerView item:

   • Right-click on the res directory in your project structure and select "New -> Layout resource file".
   • Give it a name, for example, item_image.xml.
   • In the layout file, add an ImageView to display the image.
   • Customize the layout as per your needs.

3. Create a data class to represent your image object:

   • Create a new Kotlin file, for example, Image.kt.
   • Define a data class with properties that represent the image data you want to display, such as url, title, etc.

data class Image(val url: String, val title: String)

4. Create an adapter for the RecyclerView:
   • Create a new Kotlin file, for example, ImageAdapter.kt.
   • Create a class that extends RecyclerView.Adapter<ViewHolder>.
   • Implement the necessary methods: onCreateViewHolder, onBindViewHolder, getItemCount.

class ImageAdapter(private val images: List<Image>) : RecyclerView.Adapter<ImageAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_image, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val image = images[position]
        Picasso.get().load(image.url).into(holder.imageView)
        holder.titleTextView.text = image.title
    }

    override fun getItemCount(): Int {
        return images.size
    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.image_view)
        val titleTextView: TextView = itemView.findViewById(R.id.title_text_view)
    }
}

5. Set up the RecyclerView in your activity/fragment layout:
   • Open the layout file where you want to display the RecyclerView.
   • Add a RecyclerView element with an appropriate id, for example, recycler_view.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

6. Initialize the RecyclerView in your activity/fragment:
   • Open your activity/fragment file.
   • Find the RecyclerView by its id and initialize it.

private lateinit var recyclerView: RecyclerView
private lateinit var adapter: ImageAdapter

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

    recyclerView = findViewById(R.id.recycler_view)
    recyclerView.layoutManager = LinearLayoutManager(this)
    
    // Create a list of images (replace with your own data)
    val images = listOf(
        Image("https://example.com/image1.jpg", "Image 1"),
        Image("https://example.com/image2.jpg", "Image 2"),
        // Add more images as needed
    )

    adapter = ImageAdapter(images)
    recyclerView.adapter = adapter
}

7. Add lazy loading functionality:
   • Install the Glide library by adding the following dependency in your build.gradle file:

implementation 'com.github.bumptech.glide:glide:4.12.0'
kapt 'com.github.bumptech.glide:compiler:4.12.0'

• Update the onBindViewHolder method in the ImageAdapter to use Glide instead of Picasso:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val image = images[position]
    Glide.with(holder.itemView)
        .load(image.url)
        .placeholder(R.drawable.placeholder_image) // optional placeholder image
        .into(holder.imageView)
    holder.titleTextView.text = image.title
}

That's it! You have successfully implemented lazy loading of images in a RecyclerView using Kotlin for Android.