Skip to main content

How to implement image loading in a RecyclerView in Kotlin Android

How to implement image loading in a RecyclerView in Kotlin Android.

Here is a step-by-step tutorial on how to implement image loading in a RecyclerView in Kotlin Android.

Step 1: Set up the project​

  1. Create a new Android project in Android Studio.
  2. Add the necessary dependencies in the app-level build.gradle file:
dependencies {
    // RecyclerView dependency
    implementation 'androidx.recyclerview:recyclerview:1.2.1'
    // Picasso library for image loading
    implementation 'com.squareup.picasso:picasso:2.71828'
}

Step 2: Prepare the RecyclerView layout​

  1. Open the activity_main.xml layout file and add a RecyclerView:
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Step 3: Create the RecyclerView adapter​

  1. Create a new Kotlin class named "ImageAdapter" and extend it from RecyclerView.Adapter:
class ImageAdapter(private val context: Context, private val imageUrls: List<String>) :
    RecyclerView.Adapter<ImageAdapter.ImageViewHolder>() {

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

    override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
        val imageUrl = imageUrls[position]
        Picasso.get().load(imageUrl).into(holder.imageView)
    }

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

    inner class ImageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.imageView)
    }
}

Step 4: Create the item layout for the RecyclerView​

  1. Create a new layout file named "item_image.xml" and define the layout for each item in the RecyclerView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp" />

</LinearLayout>

Step 5: Set up the RecyclerView in MainActivity​

  1. Open MainActivity.kt and initialize the RecyclerView in the onCreate() method:
class MainActivity : AppCompatActivity() {

    private lateinit var recyclerView: RecyclerView

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

        recyclerView = findViewById(R.id.recyclerView)
        recyclerView.layoutManager = LinearLayoutManager(this)

        val imageUrls = listOf(
            "https://example.com/image1.jpg",
            "https://example.com/image2.jpg",
            "https://example.com/image3.jpg"
        )

        val adapter = ImageAdapter(this, imageUrls)
        recyclerView.adapter = adapter
    }
}

Step 6: Add Internet permission​

  1. Open the AndroidManifest.xml file and add the following permission:
<uses-permission android:name="android.permission.INTERNET" />

That's it! You have successfully implemented image loading in a RecyclerView in Kotlin Android. Run the app and you should see the images loaded in the RecyclerView.