Android Picasso - ListView - Load Images From Online

November 23, 2017 Oclemy Android ImageLoader, Android ListView 5 minutes, 7 seconds

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

  • Is our data object, our model class.
  • Represents a TV Show with properties like name;

 

package com.tutorials.hp.picassoimageslistview.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;
    }
}

   

STEP 2 : Our TVShowsCollection class

  • returns us the collection of all tvshows.
  • Acts as our data source.

 

package com.tutorials.hp.picassoimageslistview.mData;

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.

 

package com.tutorials.hp.picassoimageslistview.mPicasso;

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

import com.squareup.picasso.Picasso;
import com.tutorials.hp.picassoimageslistview.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);
        }
    }

}

     

STEP 4 : Our MyHolder class

  • To hold our textviews and imageviews for recycling.

 

package com.tutorials.hp.picassoimageslistview.mListView;

import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.tutorials.hp.picassoimageslistview.R;

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.

 

package com.tutorials.hp.picassoimageslistview.mListView;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

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

import java.util.ArrayList;

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.

 

package com.tutorials.hp.picassoimageslistview;

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.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ListView;

import com.tutorials.hp.picassoimageslistview.mData.TVShowsCollection;
import com.tutorials.hp.picassoimageslistview.mListView.CustomAdapter;

import java.util.ArrayList;

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"/>    

STEP 8 : Our Build.Gradle

  • Add Picasso depedency in your build.gradle.  
apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.tutorials.hp.picassoimageslistview"
        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'
}

     

STEP 9 : Our layouts

  • Yes view our layouts in the source reference above.

STEP 10 : Result

 

Conclusion

Please the full source code for this project is available above. We also normally have video versions of our tutorials for more explanations. Visit our channel for more examples like these. Also Lets share tips and ideas in our Facebook Page.

Comments