ListView with images in Android. Tutorial - http://maxivak.com/listview-with-images-android/

Activity_json_data

// populate data from JSON array

public class MyActivity extends Activity {
    List products;
    ListView lvProducts;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // populate data
        products = new ArrayList();
    
        /*       
        
        products.add(new Product("Orange","http://farm5.staticflickr.com/4142/4787427683_3672f1db9a_s.jpg"));
        products.add(new Product("Apple","http://farm4.staticflickr.com/3139/2780642603_8d2c90e364_s.jpg"));
        products.add(new Product("Pineapple","http://farm2.staticflickr.com/1008/1420343003_13eeb0f9f3_s.jpg"));
        
        */

        //
        
        JSONArray rows = ... // data parsed from server
    
        try{
                    for(int i=0;i < rows.length();i++){
                        JSONObject e = rows.getJSONObject(i);
        
                        products.add(new Product(e.optString("name"), e.optString("img_url")));
                    }
                }
                catch (JSONException e) {
                    //Log.e("Error", "json "+e.toString());
        }


        //
        lvProducts = (ListView) findViewById( R.id.list_products);
        lvProducts.setAdapter(new ProductListAdapterWithCache(this, products) );
    }
}

data_classes

package com.example.mysamples;


public class Product{

  public String id;
  public String title;
  public String img_url;
	
	
  public Product(String p_title, String p_img_url) {
      title = p_title;
      img_url = p_img_url;
  }
	

}

list_item_layout

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" 
	>

	<ImageView
		android:id="@+id/image"
		android:layout_width="40dp"
		android:layout_height="40dp"
		android:layout_margin="5dp" 
		android:contentDescription="icon"
		/>
	
	<TextView
		android:id="@+id/title"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:textAppearance="?android:attr/textAppearanceMedium" 
		/>

</LinearLayout>

main_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

     <ListView
        android:id="@+id/list_products"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
     </ListView>
     
</LinearLayout>

MyActivity

package com.example.mysamples;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

public class MyActivity extends Activity {
    List products;
    ListView lvProducts;

    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // populate data
        products = new ArrayList();
        products.add(new Product("Orange","http://farm5.staticflickr.com/4142/4787427683_3672f1db9a_s.jpg"));
        products.add(new Product("Apple","http://farm4.staticflickr.com/3139/2780642603_8d2c90e364_s.jpg"));
        products.add(new Product("Pineapple","http://farm2.staticflickr.com/1008/1420343003_13eeb0f9f3_s.jpg"));

        //
        lvProducts = (ListView) findViewById( R.id.list_products);
        lvProducts.setAdapter(new ProductListAdapterSimple(this, products) );

    }
}

MyActivity_with_OnScrollListener

package com.example.mysamples;

import android.app.Activity;
import android.os.Bundle;
import android.os.StrictMode;
import android.widget.AbsListView;
import android.widget.ListView;
import org.apache.http.NameValuePair;
import org.apache.http.message.BasicNameValuePair;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.List;

/*
final version of MyActivity class.
*/
public class MyActivity extends Activity implements AbsListView.OnScrollListener {
    List products;
    ListView lvProducts;
    ProductListAdapterWithCache adapterProducts;


    private boolean lvBusy = false;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // populate data
        products = new ArrayList();
        products.add(new Product("Orange","http://farm5.staticflickr.com/4142/4787427683_3672f1db9a_s.jpg"));
        products.add(new Product("Apple","http://farm4.staticflickr.com/3139/2780642603_8d2c90e364_s.jpg"));
        products.add(new Product("Pineapple","http://farm2.staticflickr.com/1008/1420343003_13eeb0f9f3_s.jpg"));

        //
        lvProducts = (ListView) findViewById( R.id.list_products);
        adapterProducts = new ProductListAdapterWithCache(this, products);
        lvProducts.setAdapter(adapterProducts);

    }

    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
    }

    public void onScrollStateChanged(AbsListView view, int scrollState) {
        switch (scrollState) {
            case AbsListView.OnScrollListener.SCROLL_STATE_IDLE:
                lvBusy = false;
                adapterProducts.notifyDataSetChanged();
                break;
            case AbsListView.OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
                lvBusy = true;
                break;
            case AbsListView.OnScrollListener.SCROLL_STATE_FLING:
                lvBusy = true;
                break;
        }
    }


    public boolean isLvBusy(){
        return lvBusy;
    }



}

ProductListAdapterSimple

package com.example.mysamples;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.*;
import java.util.List;


public class ProductListAdapterSimple extends ArrayAdapter<Product>{

    List<Product> mylist;

    public ProductListAdapterSimple(Context _context, List<Product> _mylist) {
        super(_context, R.layout.list_item, _mylist);

        this.mylist = _mylist;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = new LinearLayout(getContext());
        String inflater = Context.LAYOUT_INFLATER_SERVICE;
        LayoutInflater vi = (LayoutInflater)getContext().getSystemService(inflater);
        convertView = vi.inflate(R.layout.list_item, parent, false);


        // Product object
        Product product = getItem(position);


        //
        TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
        txtTitle.setText(product.title);

        // show image
        ImageView img = (ImageView)convertView.findViewById(R.id.image);

        // download image
        ImageDownloader imageDownloader = new ImageDownloader();
        imageDownloader.download(product.img_url, img);

        return convertView;
    }


}

ProductListAdapterWithCache

package com.example.mysamples;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.List;


/*

read more: http://developer.android.com/training/improving-layouts/smooth-scrolling.html
 */
public class ProductListAdapterWithCache extends ArrayAdapter<Product> {

    List<Product> mylist;

    public ProductListAdapterWithCache(Context _context, List<Product> _mylist) {
       super(_context, R.layout.list_item, _mylist);

       this.mylist = _mylist;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        Product row = getItem(position);


        ProductViewHolder holder;

        if (convertView == null) {
            convertView = new LinearLayout(getContext());
            String inflater = Context.LAYOUT_INFLATER_SERVICE;
            LayoutInflater vi = (LayoutInflater)getContext().getSystemService(inflater);
            convertView = vi.inflate(R.layout.list_item, parent, false);

            //
            holder = new ProductViewHolder();
            holder.img = (ImageView)convertView.findViewById(R.id.image);
            holder.title = (TextView)convertView.findViewById(R.id.title);



            //
            convertView.setTag(holder);
        }
        else{
            holder = (ProductViewHolder) convertView.getTag();
        }


        //
        holder.populateFrom(row);

        //
        return convertView;
    }


    static class ProductViewHolder {
        public ImageView img;
        public TextView title;

        void populateFrom(Product p) {
            title.setText(p.title);
            
            //
            ImageDownloader imageDownloader = new ImageDownloader();
            imageDownloader.download(p.img_url, img);

        }
    }

}

ProductListAdapterWithCache_withScroll

package com.example.mysamples;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.List;

/*
final version of adapter.
*/
public class ProductListAdapterWithCache extends ArrayAdapter<Product> {
    private Context mContext;
    List<Product> mylist;

    public ProductListAdapterWithCache(Context _context, List<Product> _mylist) {
        super(_context, R.layout.list_item, _mylist);

        mContext = _context;
        this.mylist = _mylist;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        Product product = getItem(position);

        ProductViewHolder holder;

        if (convertView == null) {
            convertView = new LinearLayout(getContext());
            String inflater = Context.LAYOUT_INFLATER_SERVICE;
            LayoutInflater vi = (LayoutInflater)getContext().getSystemService(inflater);
            convertView = vi.inflate(R.layout.list_item, parent, false);

            //
            holder = new ProductViewHolder();
            holder.img = (ImageView)convertView.findViewById(R.id.image);
            holder.title = (TextView)convertView.findViewById(R.id.title);

            //
            convertView.setTag(holder);
        }
        else{
            holder = (ProductViewHolder) convertView.getTag();
        }


        //
        holder.populate(product, ((MyActivity)mContext).isLvBusy());

        //
        return convertView;
    }


    static class ProductViewHolder {
        public ImageView img;
        public TextView title;

        void populate(Product p) {
            title.setText(p.title);

            //
            ImageDownloader imageDownloader = new ImageDownloader();
            imageDownloader.download(p.img_url, img);
        }

        void populate(Product p, boolean isBusy) {
            title.setText(p.title);

            if (!isBusy){
                // download from internet
                ImageDownloader imageDownloader = new ImageDownloader();
                imageDownloader.download(p.img_url, img);
            }
            else{
                // set default image
                img.setImageResource(R.drawable.ic_launcher);
            }
        }
    }

}