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.

Build.Gradle
  • The app level build.gradle where we add our dependencies.
apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.tutorials.hp.picassoimagesrecyclerview"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.android.support:design:23.3.0'
    compile 'com.android.support:cardview-v7:23.3.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
}

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

  1. 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

1. 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

  1. 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

1. Our recyclerView viewholder class.
2. Derives from RecyclerView.ViewHolder.


package com.tutorials.hp.picassoimagesrecyclerview.mRecycler;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.tutorials.hp.picassoimagesrecyclerview.R;

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

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


package com.tutorials.hp.picassoimagesrecyclerview.mRecycler;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.tutorials.hp.picassoimagesrecyclerview.R;
import com.tutorials.hp.picassoimagesrecyclerview.mData.TVShow;
import com.tutorials.hp.picassoimagesrecyclerview.mPicasso.PicassoClient;

import java.util.ArrayList;

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

1. Derives from AppCompatActivity.
2. Sets our adapter to RecyclerView.


package com.tutorials.hp.picassoimagesrecyclerview;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

import com.tutorials.hp.picassoimagesrecyclerview.mData.TVShowsCollection;
import com.tutorials.hp.picassoimagesrecyclerview.mRecycler.MyAdapter;

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);
            }
        });
    }

}
` 

#### Video/Demo

Watch the video version of this example.



#### How To Run

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



Share an Example

Share an Example

Browse
What is the capital of Egypt? ( Cairo )