How to Load Multiple Images From URL in Android Using Picasso Kotlin

In this article, we will learn how to Load Multiple Images from URLs in Android Studio using Picasso Kotlin. We can import images in the form of URLs and display them in the RecyclerView. At the end of this tutorial, you will see the following screen will be designed.

Load Multiple Images

Dependencies

After creating a new project, Add the following dependencies in your build.gradle.

implementation 'com.squareup.picasso:picasso:2.5.2'

Make sure you Sync your project after adding the Picasso.

Add Internet Permission

We are using the URLs to load images from the internet, that why we need to include the permission of the INTERNET in our AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />

Note add the above permission when you are loading images from the internet. If you are only loading images locally on the device then this is not required.

URL for Images

We have the Images URLs and the path where we have to display the images

 Picasso.with(context).load(ImgUrls[i]).resize(600, 600).into(viewHolder.img_android)

Create the Layout

Create the RecyclerView inside the activity_main.xml file. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Creating the Custom Item Layout

Now create the row_layout.xml file that contains the ImageView within the RecyclerView

<RelativeLayout
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    card_view:cardCornerRadius="5dp">

    <RelativeLayout
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:id="@+id/img_android"
            android:scaleType="centerInside"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="20dp"/>

    </RelativeLayout>

</RelativeLayout>

For populating data we have to create an Adapter for our application.

Create a DataAdapter

We have to create an DataAdapter class by doing this we can populate data to our RecyclerView.

package com.example.handyopinionpicasso

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.recyclerview.widget.RecyclerView
import com.squareup.picasso.Picasso
import java.util.*


class DataAdapter(
    private val context: Context,
    private val ImgUrls: ArrayList<String>
) :
    RecyclerView.Adapter<DataAdapter.ViewHolder>() {
    override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): ViewHolder {
        val view = LayoutInflater.from(viewGroup.context)
            .inflate(R.layout.row_layout, viewGroup, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(viewHolder: ViewHolder, i: Int) {
//        Log.e("URLS: ", ImgUrls[i])
        Picasso.with(context).load(ImgUrls[i]).resize(600, 600).into(viewHolder.img_android)
    }

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

    inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {

        var img_android: ImageView

        init {
            img_android =
                view.findViewById<View>(R.id.img_android) as ImageView
        }
    }

}

MainActivity Code

package com.example.handyopinionpicasso


import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import java.util.*


class MainActivity : AppCompatActivity() {
    var ImgUrls: ArrayList<String> = ArrayList()
    var recyclerView: RecyclerView? = null
    var Manager: LinearLayoutManager? = null
    var adapter: DataAdapter? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        ImgUrls.add("https://images.pexels.com/photos/2220401/pexels-photo-2220401.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350")
        ImgUrls.add("https://images.pexels.com/photos/2765586/pexels-photo-2765586.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350")
        ImgUrls.add("https://i.imgur.com/DulGEc5_d.jpg")
        ImgUrls.add("https://i.imgur.com/rXkffMg_d.jpg")

        recyclerView = findViewById<View>(R.id.card_recycler_view) as RecyclerView
        Manager = LinearLayoutManager(this)
        recyclerView!!.layoutManager = Manager
        adapter = DataAdapter(this,ImgUrls)
        recyclerView!!.adapter = adapter
    }
}

In this tutorial, we learn how to Load Multiple Images from URL with Picasso, and we have learned how the library works and how we can integrate it into your project. 

If you have any questions or suggestions, feel free to ask in the comments section below.

Next Article

How to Save And Retrieve Class Object From Shared Preferences Using Gson Library in Kotlin Android Studio

Please share this post:
Posts created 35

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: