Recycler view using Picasso in Android Kotlin.

Day to day life the use of recycler view is increased in android Kotlin. Sometimes we need images from URLs in our recyclerview. At that time we need to use Picasso or glide library. So today we will learn how to use Picasso in recycler view.

In build.Gradle(: app) we need to add a dependency for recycler view and picasso.

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

In this project, I am using view binding so we need to add the view bind feature in the build.Gradle(: app)file.

android {
 buildFeatures {
        viewBinding = true
    }
}

I am using Picasso library that's why we need to add internet permission in the manifest file.

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

So, let us start with XML design in activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_design"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="15dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:listitem="@layout/item_recycler" />

</androidx.constraintlayout.widget.ConstraintLayout>

Now we need to create a recycler item so here I used item_recycler.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iv_picasso"
   android:layout_width="match_parent"
    android:layout_marginTop="15dp"
    android:layout_height="120dp"
    android:layout_marginStart="15dp"
    android:scaleType="fitXY">

</ImageView>

I need rounded Transformation for my image view that's why I create RoundedTransformation.kt file.

package com.example.picassorecyclerview

import android.graphics.*
import com.squareup.picasso.Transformation

class RoundedTransformation(private val radius: Int, private val margin: Int) : Transformation {
    override fun transform(source: Bitmap): Bitmap {
        val paint = Paint()
        paint.setAntiAlias(true)
        paint.setShader(
            BitmapShader(
                source, Shader.TileMode.CLAMP,
                Shader.TileMode.CLAMP
            )
        )
        val output: Bitmap = Bitmap.createBitmap(
            source.getWidth(), source.getHeight(),
            Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(output)
        canvas.drawRoundRect(
            RectF(
                margin.toFloat(), margin.toFloat(), (source.getWidth() - margin).toFloat(),
                (source.getHeight() - margin).toFloat()
            ), radius.toFloat(), radius.toFloat(), paint
        )
        if (source !== output) {
            source.recycle()
        }
        return output
    }

    override fun key(): String {
        return "rounded(r=$radius, m=$margin)"
    }
}

Now we need to code for the adapter class so here I create RecyclerAdapter.kt

package com.example.picassorecyclerview

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.NetworkPolicy
import com.squareup.picasso.Picasso

class RecyclerAdapter(private val context: Context):RecyclerView.Adapter<RecyclerAdapter.ViewHolder>() {
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): RecyclerAdapter.ViewHolder {
        val view = LayoutInflater.from(viewGroup.context)
            .inflate(R.layout.item_recycler, viewGroup, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(viewHolder: RecyclerAdapter.ViewHolder, position: Int) {

         Picasso.get()
             .load("https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Independence-Lake-Clean-Drinking-Water_4000x2200.jpg?crop=1175,0,1650,2200&wid=600&hei=800&scl=2.75")
             .transform( RoundedTransformation(30, 0))
             .placeholder(context.resources.getDrawable(R.drawable.ic_launcher_foreground))//it will show placeholder image when url is not valid.
             .networkPolicy(NetworkPolicy.OFFLINE) //for caching the image url in case phone is offline
             .into(viewHolder.img_android)
    }

    override fun getItemCount(): Int {
        return 12
    }

    class ViewHolder(view: View):RecyclerView.ViewHolder(view){
        var img_android: ImageView

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

Now we code for MainActivity.kt

package com.example.picassorecyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.example.picassorecyclerview.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    var recyclerView: RecyclerView? = null
    var Manager: GridLayoutManager? = null
    var adapter: RecyclerAdapter? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)


        recyclerView = findViewById<View>(R.id.rv_design) as RecyclerView
        Manager = GridLayoutManager(this,2)
        recyclerView!!.layoutManager = Manager
        adapter = RecyclerAdapter(this@MainActivity)
        recyclerView!!.adapter = adapter
    }
}

recycler view using Picasso.

That's it.