Picasso ImageLoader Examples

If you've ever built an Android application that requires loading images from the internet, you know how challenging it can be to optimize the process. That's where Picasso comes in. Picasso is a powerful image loading library that simplifies the process of loading images into your Android app. In this article, we'll explore how to use Picasso in your Android app.

What is Picasso?

Picasso is an open-source image loading library for Android. It was developed by Square and is widely used by Android developers worldwide. With Picasso, you can easily load images from the internet, cache them, and display them in your Android app.

How to use Picasso

Using Picasso in your Android app is easy. Here's how you can get started:

Add Picasso dependency to your build.gradle file:

dependencies {
  implementation 'com.squareup.picasso:picasso:2.71828'
}

Load an image into an ImageView:

Picasso.get().load("http://i.imgur.com/DvpvklR.png").into(imageView);

In this example, we're loading an image from the internet and displaying it in an ImageView. Picasso takes care of downloading the image, caching it, and displaying it in the ImageView.

Customizing Picasso

Picasso provides several customization options that you can use to optimize the image loading process. Here are a few examples:

Resize images:

Picasso.get()
    .load("http://i.imgur.com/DvpvklR.png")
    .resize(50, 50)
    .into(imageView);

In this example, we're resizing the image to 50x50 before displaying it in the ImageView.

Placeholder images:

Picasso.get()
    .load("http://i.imgur.com/DvpvklR.png")
    .placeholder(R.drawable.placeholder)
    .into(imageView);

In this example, we're displaying a placeholder image while the actual image is being loaded.

Error images:

Picasso.get()
    .load("http://i.imgur.com/DvpvklR.png")
    .error(R.drawable.error)
    .into(imageView);

In this example, we're displaying an error image if the actual image fails to load.

Caching with Picasso

Picasso comes with built-in caching support. By default, Picasso caches images both in memory and on disk. This means that once an image is downloaded, it will be stored in memory and on disk, so subsequent requests for the same image will be much faster.

Example 1: Kotlin Android Simple Gallery with Picasso

In this example we will look at how to use Picasso to create a simple gallery based on recyclerview. The user opens the app and images are loaded onto the recyclerview using Picasso.

If the user clicks a single image, a full screen activity is opened and the image is still rendered onto the imageview via Picasso.

Here is the demos of what is created. First a recyclerview lists the images:

Kotlin ANdroid RecyclerView Picasso

And here is the full screen activity rendering the image: Kotlin Android Picasso Full Screen

Step 1: Install Picasso

You start by adding dependencies. We need a recyclerview as well as Picasso. Picasso is a third party library. Add these in your build.gradle file:

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

Step 2: Add Internet Permission

You need internet permission to be able to download images from online. Thus add the following permission in yur android manifest file:

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

Step 3: Create a Full Screen Style

Because this is a basic gallery app, it is more appropriate to show the detail image in a full screen, a screen without appbar. Thus we will create a style for that, and add it alongside our default style:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme2" parent="Theme.AppCompat.Light.NoActionBar">
    </style>

You then need to assign the AppTheme2 theme to the full screen activity inside the android manifest:

activity android:name=".FullScreen"
            android:theme="@style/AppTheme2">

        </activity>

Step 4: Create Layouts

Layouts define the user interface for components and pages in android. Here are the layouts used in this project:

custom.xml
activity_full.xml
activity_main.xml

custom.xml

This is the layout for a single row or image in the recyclerview. It can also be called a model or item layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="150dp"
    android:layout_height="250dp"
    android:padding="5dp"
    android:layout_margin="5dp"
    android:id="@+id/custom_layout">

    <ImageView
        android:id="@+id/custom_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>

</LinearLayout>

activity_fullscreen.xml

This is the layout for the full screen activity. It will basically render the image in the full screen:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".FullScreen">

    <ImageView
        android:id="@+id/full_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>

</LinearLayout>

activity_main.xml

This is the layout for the main activity. It will contain a recyclerview to render images in a grid:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_gravity="center|top"
    android:gravity="center|top">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center|top" />

</LinearLayout>

Step 5: Create a Reyclerview Adapter

The adapter will inflate the custom.xml layouts into view objects that will be rendered in the recyclerview, then recycle them appropriately:

import android.content.Context
import android.content.Intent
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.LinearLayout
import androidx.recyclerview.widget.RecyclerView
import com.squareup.picasso.Picasso

class RecyclerAdapter(private val data:List<String>, private val context:Context): RecyclerView.Adapter<arb.test.recyclerview.v2.and.picasso.RecyclerAdapter.CustomViewHolder>() {
    private val picasso = Picasso.get()

    inner class CustomViewHolder(parent:View):RecyclerView.ViewHolder(parent){
        val img = parent.findViewById<ImageView>(R.id.custom_img)
        val layout = parent.findViewById<LinearLayout>(R.id.custom_layout)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomViewHolder {
        return CustomViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.custom,parent,false))
    }

    override fun getItemCount(): Int = data.size

    override fun onBindViewHolder(holder: CustomViewHolder, position: Int) {

        picasso.load(data[position]).into(holder.img)

        holder.layout.setOnClickListener {
            val intent = Intent(context,FullScreen::class.java)
            intent.putExtra("imgID",data[position])
            context.startActivity(intent)
        }

    }
}

Step 6: Create FullScreen Activity

This is the activity that will be responsible for rending the passed image in the full scrren of the device. The image is loaded via Picasso

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.WindowManager
import com.squareup.picasso.Picasso
import kotlinx.android.synthetic.main.activity_full_screen.*

class FullScreen : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN)
        setContentView(R.layout.activity_full_screen)

            val picasso = Picasso.get()
        picasso.load(intent.getStringExtra("imgID")).into(full_img)
    }
}

Step 7: Create MainActivity

The launcher activity is the main activity. This activity will have a recyclerview onto which an adapter will be attached. A list of images will first be bound to the adapter:

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.LinearLayout
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    val data = listOf(
            "https://wallpaperplay.com/walls/full/c/5/3/34778.jpg" ,
            "https://wallpaperplay.com/walls/full/a/e/4/34784.jpg" ,
            "https://wallpaperplay.com/walls/full/6/8/8/294.jpg" ,
            "https://wallpaperplay.com/walls/full/9/c/8/291.jpg" ,
            "https://wallpaperplay.com/board/mandalorian-hd-wallpapers" ,
            "https://wallpaperplay.com/walls/full/c/5/3/34778.jpg" ,
            "https://wallpaperplay.com/walls/full/a/e/4/34784.jpg" ,
            "https://wallpaperplay.com/walls/full/6/8/8/294.jpg" ,
            "https://wallpaperplay.com/walls/full/9/c/8/291.jpg" ,
            "https://wallpaperplay.com/board/mandalorian-hd-wallpapers" ,
            "https://wallpaperplay.com/walls/full/c/5/3/34778.jpg" ,
            "https://wallpaperplay.com/walls/full/a/e/4/34784.jpg" ,
            "https://wallpaperplay.com/walls/full/6/8/8/294.jpg" ,
            "https://wallpaperplay.com/walls/full/9/c/8/291.jpg" ,
            "https://wallpaperplay.com/board/mandalorian-hd-wallpapers" ,
            "https://wallpaperplay.com/walls/full/c/5/3/34778.jpg" ,
            "https://wallpaperplay.com/walls/full/a/e/4/34784.jpg" ,
            "https://wallpaperplay.com/walls/full/6/8/8/294.jpg" ,
            "https://wallpaperplay.com/walls/full/9/c/8/291.jpg" ,
            "https://wallpaperplay.com/board/mandalorian-hd-wallpapers"
    )

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

        recyclerView.layoutManager = GridLayoutManager(this,2,LinearLayout.VERTICAL,false)
        recyclerView.adapter = RecyclerAdapter(data,this)
    }
}

Run

Finally run the project.

Reference

Find the download links below:

No.	Link
1.	Download code
2.	Follow code author

Example 2: Create an Image Slider with Picasso

This tutorial teaches you how to create an imageslider with some third parties involved, but with Picasso being the imaege loader. In this way you see how to use Picasso in another context, inside an image slider with viewpager indicators.

Here are the demo images of what is built:

Kotlin Android Picasso imageSlider

Kotlin android picasso image slider example

Step 1: Install Dependencies

Picasso will be the image loader but to easen the process of creating this slider some other third party libraries will be included:

    implementation 'com.squareup.picasso:picasso:2.3.2'
    implementation 'com.nineoldandroids:library:2.4.0'
    implementation 'com.daimajia.slider:library:1.1.5@aar'

Step 2: Add Permissions

Yeah some permissions may be required. For example images are serverd from online or can be read from external storage, so you need these permissions:

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

Step 3: Create Layout

In your activity layout add a slider as follows:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <com.daimajia.slider.library.SliderLayout
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="350dp"/>

</LinearLayout>

Step 4: Write Code

First start by creating your main activity by extending the AppCompatActivity and implementing the following interfaces relevant to our slider:

class MainActivity : AppCompatActivity() ,BaseSliderView.OnSliderClickListener,ViewPagerEx.OnPageChangeListener {

Now define a list of images to be flipped in our slider:

    val img = listOf(
            "https://wallpaperplay.com/walls/full/c/5/3/34778.jpg" ,
            "https://wallpaperplay.com/walls/full/a/e/4/34784.jpg" ,
            "https://wallpaperplay.com/walls/full/6/8/8/294.jpg" ,
            "https://wallpaperplay.com/walls/full/9/c/8/291.jpg"
    )

Create a function that initializes the slider and attaches images and text onto it:

    private fun getSlider() {
        for (item in 0 until img.count()){

            val textSliderView = TextSliderView(this).apply {
                description("Test")
                image(img[item])
                setOnSliderClickListener(this@MainActivity)
                scaleType = BaseSliderView.ScaleType.FitCenterCrop
            }

            slider.addSlider(textSliderView)
        }
    }

Override slider callbacks:

    override fun onSliderClick(slider: BaseSliderView?) {
       Toast.makeText(this,"test",Toast.LENGTH_SHORT).show()
    }

    override fun onPageScrollStateChanged(state: Int) {
        }

    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
    }

    override fun onPageSelected(position: Int) {

    }

When the activity is stopped, release the slider from memory:

    override fun onStop() {
        slider.stopAutoCycle()
        super.onStop()
    }

Here is the full code:

MainActivity.kt

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.daimajia.slider.library.SliderTypes.BaseSliderView
import com.daimajia.slider.library.SliderTypes.TextSliderView
import com.daimajia.slider.library.Tricks.ViewPagerEx
import kotlinx.android.synthetic.main.activity_main.*
import kotlin.contracts.Returns

class MainActivity : AppCompatActivity() ,BaseSliderView.OnSliderClickListener,ViewPagerEx.OnPageChangeListener {

    val img = listOf(
            "https://wallpaperplay.com/walls/full/c/5/3/34778.jpg" ,
            "https://wallpaperplay.com/walls/full/a/e/4/34784.jpg" ,
            "https://wallpaperplay.com/walls/full/6/8/8/294.jpg" ,
            "https://wallpaperplay.com/walls/full/9/c/8/291.jpg"
    )

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

        getSlider()

    }

    private fun getSlider() {
        for (item in 0 until img.count()){

            val textSliderView = TextSliderView(this).apply {
                description("Test")
                image(img[item])
                setOnSliderClickListener(this@MainActivity)
                scaleType = BaseSliderView.ScaleType.FitCenterCrop
            }

            slider.addSlider(textSliderView)
        }
    }

    override fun onStop() {
        slider.stopAutoCycle()
        super.onStop()
    }

    override fun onSliderClick(slider: BaseSliderView?) {
       Toast.makeText(this,"test",Toast.LENGTH_SHORT).show()
    }

    override fun onPageScrollStateChanged(state: Int) {
        }

    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
    }

    override fun onPageSelected(position: Int) {

    }
}

Run

After following the above steps run the project.

Reference

Find download links below:

No.	Link
1.	Download code
2.	Follow code author

Example 3: Android Picasso – ListView – Load Images From Online

Hello.Lets see how to load images from online to our android application.

The adapterview we use is ListView. We are further going to be using Picasso imageloader to load our images asynchronously and cache them.Our ListView shall display images and text. Here's the deal :

We are fetching our images from Cloudinary.com.
The site is something of an image and video hosting site, and they have a free package thats more than enough for use.
Anyway your images can come from anywhere,the only thing we need is a url.
We fetch them using Picasso library.
While its being downloaded,we display to the user a placeholder image.
We are using ListView with BaseAdapter as our base adapter class.

Direct Download

STEP 1 : Our TVShow class

This is our data object, our model class. It Represents a TV Show with properties like name;

public class TVShow {

    String name;
    String url;

    public TVShow() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

STEP 2 : Our TVShowsCollection class

This will return us the collection of all tvshows.It Acts as our data source.

import java.util.ArrayList;

public class TVShowsCollection {

    public static ArrayList<TVShow> getTVShows()
    {
        ArrayList<TVShow> tvshows=new ArrayList<>();

        TVShow tv=new TVShow();

        //ADDING DATA
        tv.setName("BlackList");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355636/red_s9jrzj.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Breaking Bad");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355582/breaking_wbxtzb.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Fruits");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355636/fruits_xapn76.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Crisis");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355640/crisis_m1btcv.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Ghost Rider");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355639/rider_ehhjol.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Game of Thrones");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355638/thrones_noxbhq.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Shuttle Carrier");
        tv.setUrl(" http://res.cloudinary.com/oclemy/image/upload/v1460355638/shuttle_carrier_nwvr5v.jpg");
        tvshows.add(tv);

        return tvshows;
    }

}

STEP 3 : Our PicassoClient class

Simply loads an image into an imageview from any given image url. We use Picasso library.

public class PicassoClient {

    public static void downloadImage(Context c,String url,ImageView img)
    {
        if(url != null && url.length()>0)
        {
            Picasso.with(c).load(url).placeholder(R.drawable.placeholder).into(img);
        }else
        {
            Picasso.with(c).load(R.drawable.placeholder).into(img);
        }
    }

}

STEP 4 : Our MyHolder class

To hold our textviews and imageviews for recycling.

public class MyHolder {

    TextView nameTxt;
    ImageView img;

    public MyHolder(View v) {

        nameTxt= (TextView) v.findViewById(R.id.nameTxt);
        img= (ImageView) v.findViewById(R.id.movieImage);

    }
}

STEP 5 : Our CustomAdapter class

Inflates our model layout into a listview viewitem. Binds our dataset into our listview.

public class CustomAdapter extends BaseAdapter {

    Context c;
    ArrayList<TVShow> tvShows;
    LayoutInflater inflater;

    public CustomAdapter(Context c, ArrayList<TVShow> tvShows) {
        this.c = c;
        this.tvShows = tvShows;
    }

    @Override
    public int getCount() {
        return tvShows.size();
    }

    @Override
    public Object getItem(int position) {
        return tvShows.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if(inflater==null)
        {
            inflater= (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        if(convertView==null)
        {
            convertView=inflater.inflate(R.layout.model,parent,false);

        }

        //BIND DATA
        MyHolder holder=new MyHolder(convertView);
        holder.nameTxt.setText(tvShows.get(position).getName());
        PicassoClient.downloadImage(c,tvShows.get(position).getUrl(),holder.img);

        return convertView;
    }
}

STEP 6 : Our MainActivity

Instantiates our adapter and sets it to our listview.
Initializes our views.

public class MainActivity extends AppCompatActivity {

    ListView lv;
    CustomAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        lv= (ListView) findViewById(R.id.lv);
        adapter=new CustomAdapter(this, TVShowsCollection.getTVShows());

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               lv.setAdapter(adapter);
            }
        });
    }

}

STEP 7 : Our AndroidManifest.xml

Add internet permission as we shall be fetching our images from online.

<uses-permission android_name="android.permission.INTERNET"/>

Example 4: Android Picasso – RecyclerView – Load Images From Online

Displaying images in adapterviews is quite common. Especially ListView, GridView and RecyclerView. In this example we see how to fetch images from the web and into a RecyclerView.

What We Do

Fetch images from Cloudinary.
Use Picasso ImageLoader library to load the images.
Load these images into a RecyclerView.
Use CardViews in our RecyclerView to display the images and text.
We use android studio and java programming language.

Common Questions this example answers

How do we fetch images from the web?
How do we use Picasso to load and display images from internet.
How do we show images in a RecyclerView.
How do we show images in cardviews.
How do we fetch images from cloudinary.com

Technologies Used include:

Java
Android Studio

Source Code

Below is the full source code for this project.

AndroidManifest.xml

This is where we add any permissions if necessary.
In this case we add the permission for internet connectivity.

<?xml version="1.0" encoding="utf-8"?>
<manifest
    package="com.tutorials.hp.picassoimagesrecyclerview">

    <uses-permission android_name="android.permission.INTERNET"/>

    <application
        android_allowBackup="true"
        android_icon="@mipmap/ic_launcher"
        android_label="@string/app_name"
        android_supportsRtl="true"
        android_theme="@style/AppTheme">
        <activity
            android_name=".MainActivity"
            android_label="@string/app_name"
            android_theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />

                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

ActivityMain.xml

This is our container layout.
We include contentmain.xml here.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_fitsSystemWindows="true"
    tools_context="com.tutorials.hp.picassoimagesrecyclerview.MainActivity">

    <android.support.design.widget.AppBarLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android_id="@+id/toolbar"
            android_layout_width="match_parent"
            android_layout_height="?attr/actionBarSize"
            android_background="?attr/colorPrimary"
            app_popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android_id="@+id/fab"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_gravity="bottom|end"
        android_layout_margin="@dimen/fab_margin"
        android_src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

ContentMain.xml

This is the layout where we specify our widgets and views to be inflated in our MainActivity.
We add our RecyclerView here.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    app_layout_behavior="@string/appbar_scrolling_view_behavior"
    tools_context="com.tutorials.hp.picassoimagesrecyclerview.MainActivity"
    tools_showIn="@layout/activity_main">

   <android.support.v7.widget.RecyclerView
       android_id="@+id/rv"
       android_layout_width="match_parent"
       android_layout_height="wrap_content">
   </android.support.v7.widget.RecyclerView>

</RelativeLayout>

TVShow.java

This is our data object representing a single TVShow object with its properties.

package com.tutorials.hp.picassoimagesrecyclerview.mData;

public class TVShow {

    String name;
    String url;

    public TVShow() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

TVShowsCollection.java

Contains a static method that returns all our TVShows.

package com.tutorials.hp.picassoimagesrecyclerview.mData;

import java.util.ArrayList;

public class TVShowsCollection {

    public static ArrayList<TVShow> getTVShows()
    {
        ArrayList<TVShow> tvshows=new ArrayList<>();
        TVShow tv=new TVShow();

        //ADD DATA
        tv.setName("BlackList");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355636/red_s9jrzj.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Breaking Bad");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355582/breaking_wbxtzb.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Fruits");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355636/fruits_xapn76.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Crisis");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355640/crisis_m1btcv.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Ghost Rider");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355639/rider_ehhjol.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Game of Thrones");
        tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355638/thrones_noxbhq.jpg");
        tvshows.add(tv);

        tv=new TVShow();
        tv.setName("Shuttle Carrier");
        tv.setUrl(" http://res.cloudinary.com/oclemy/image/upload/v1460355638/shuttle_carrier_nwvr5v.jpg");
        tvshows.add(tv);

        return tvshows;

    }

}

PicassoClient.java

Contains a method that validates a URL before downloading an image into an imageview using Picasso.

package com.tutorials.hp.picassoimagesrecyclerview.mPicasso;

import android.content.Context;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;
import com.tutorials.hp.picassoimagesrecyclerview.R;

public class PicassoClient {

    public static void downloadImage(Context c,String url,ImageView img)
    {
        if(url != null && url.length()>0)
        {
            Picasso.with(c).load(url).placeholder(R.drawable.placeholder).into(img);

        }else {
            Picasso.with(c).load(R.drawable.placeholder).into(img);
        }
    }

}

MyHolder.java

Our recyclerView viewholder class.
Derives from RecyclerView.ViewHolder.

package com.tutorials.hp.picassoimagesrecyclerview.mRecycler;

public class MyHolder extends RecyclerView.ViewHolder {

    TextView nameTxt;
    ImageView img;

    public MyHolder(View itemView) {
        super(itemView);

        nameTxt= (TextView) itemView.findViewById(R.id.nameTxt);
        img= (ImageView) itemView.findViewById(R.id.movieImage);
    }
}

MyAdapter.java

This class inherits from RecyclerView.Adapter class.
It adapts data to our views.

package com.tutorials.hp.picassoimagesrecyclerview.mRecycler;

public class MyAdapter extends RecyclerView.Adapter<MyHolder> {

    Context c;
    ArrayList<TVShow> tvShows;

    public MyAdapter(Context c, ArrayList<TVShow> tvShows) {
        this.c = c;
        this.tvShows = tvShows;
    }

    @Override
    public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v= LayoutInflater.from(parent.getContext()).inflate(R.layout.model,parent,false);
        MyHolder holder=new MyHolder(v);
        return holder;
    }

    @Override
    public void onBindViewHolder(MyHolder holder, int position) {
         //BIND DATA
        holder.nameTxt.setText(tvShows.get(position).getName());

        //IMAGE
        PicassoClient.downloadImage(c,tvShows.get(position).getUrl(),holder.img);
    }

    @Override
    public int getItemCount() {
        return tvShows.size();
    }
}

MainActivity.java

Derives from AppCompatActivity.
Sets our adapter to RecyclerView.

package com.tutorials.hp.picassoimagesrecyclerview;

public class MainActivity extends AppCompatActivity {

    RecyclerView rv;
    MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

       rv= (RecyclerView) findViewById(R.id.rv);
        rv.setLayoutManager(new LinearLayoutManager(this));

        adapter=new MyAdapter(this, TVShowsCollection.getTVShows());

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                     rv.setAdapter(adapter);
            }
        });
    }

}

How To Run

Download the project above.
You'll get a zipped file,extract it.
Open the Android Studio.
Now close, already open project
From the Menu bar click on File >New> Import Project
Now Choose a Destination Folder, from where you want to import project.
Choose an Android Project.
Now Click on “OK“.
Done, your done importing the project,now edit it.

Conclusion

Picasso is a powerful image loading library that simplifies the process of loading images into your Android app. With Picasso, you can easily load images from the internet, cache them, and display them in your Android app. By using Picasso, you can optimize the image loading process and provide a better user experience for your app's users.

What is Picasso?​

How to use Picasso​

Example 1: Kotlin Android Simple Gallery with Picasso​

Step 1: Install Picasso​

Step 2: Add Internet Permission​

Step 3: Create a Full Screen Style​

Step 4: Create Layouts​

Step 5: Create a Reyclerview Adapter​

Step 6: Create FullScreen Activity​

Step 7: Create MainActivity​

Run​

Reference​

Example 2: Create an Image Slider with Picasso​

Step 1: Install Dependencies​

Step 2: Add Permissions​

Step 3: Create Layout​

Step 4: Write Code​

Run​

Reference​

Example 3: Android Picasso – ListView – Load Images From Online​

STEP 1 : Our TVShow class​

STEP 2 : Our TVShowsCollection class​

STEP 3 : Our PicassoClient class​

STEP 4 : Our MyHolder class​

STEP 5 : Our CustomAdapter class​

STEP 6 : Our MainActivity​

STEP 7 : Our AndroidManifest.xml​

Example 4: Android Picasso – RecyclerView – Load Images From Online​

What We Do​

Common Questions this example answers​

Source Code​

AndroidManifest.xml​

ActivityMain.xml​

ContentMain.xml​

TVShow.java​

TVShowsCollection.java​

PicassoClient.java​

MyHolder.java​

MyAdapter.java​

MainActivity.java​

How To Run​

Conclusion​

What is Picasso?

How to use Picasso

Example 1: Kotlin Android Simple Gallery with Picasso

Step 1: Install Picasso

Step 2: Add Internet Permission

Step 3: Create a Full Screen Style

Step 4: Create Layouts

Step 5: Create a Reyclerview Adapter

Step 6: Create FullScreen Activity

Step 7: Create MainActivity

Run

Reference

Example 2: Create an Image Slider with Picasso

Step 1: Install Dependencies

Step 2: Add Permissions

Step 3: Create Layout

Step 4: Write Code

Run

Reference

Example 3: Android Picasso – ListView – Load Images From Online

STEP 1 : Our TVShow class

STEP 2 : Our TVShowsCollection class

STEP 3 : Our PicassoClient class

STEP 4 : Our MyHolder class

STEP 5 : Our CustomAdapter class

STEP 6 : Our MainActivity

STEP 7 : Our AndroidManifest.xml

Example 4: Android Picasso – RecyclerView – Load Images From Online

What We Do

Common Questions this example answers

Source Code

AndroidManifest.xml

ActivityMain.xml

ContentMain.xml

TVShow.java

TVShowsCollection.java

PicassoClient.java

MyHolder.java

MyAdapter.java

MainActivity.java

How To Run

Conclusion