How to show images in imageview in simple adapter?

Question

I am getting data from JSON Array and I can show the text in textviews but having problems with showing the images.

here's the main activity:

public class test extends ListActivity {

// url to make request
private static String url = "http://test/json.php";

// JSON Node names
private static final String CONTACTS = "contacts";
private static final String NAME = "name";
private static final String IMAGE = "image";

// contacts JSONArray
JSONArray contacts = null;

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

    // Hashmap for ListView
    ArrayList<HashMap<String, String>> contactList = new ArrayList<HashMap<String, String>>();

    // Creating JSON Parser instance
    JSONParser jParser = new JSONParser();

    // getting JSON string from URL
    JSONObject json = jParser.getJSONFromUrl(url);

    try {
        // Getting Array of Contacts
        contacts = json.getJSONArray(CONTACTS);

        // looping through All Contacts
        for(int i = 0; i < contacts.length(); i++){
            JSONObject c = contacts.getJSONObject(i);

            // Storing each json item in variable
            String name = c.getString(NAME);
            String image = c.getString(IMAGE);

            // creating new HashMap
            HashMap<String, String> map = new HashMap<String, String>();

            // adding each child node to HashMap key => value
            map.put(NAME, name);
            map.put(IMAGE, image);

            // adding HashList to ArrayList
            contactList.add(map);
        }
    } catch (JSONException e) {
        e.printStackTrace();
    }

    testAdapter adapter =  new testAdapter(
            test.this, contactList,
            R.layout.list_item, new String[] {},
            new int[] {});
    // updating listview
    setListAdapter(adapter);

}

and here's my adapter class:

public class testAdapter extends SimpleAdapter {

    private Context mContext;
    public ImageLoader imageLoader;
    public LayoutInflater inflater=null;
    public testAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to) {
        super(context, data, resource, from, to);
        mContext = context;
        inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        imageLoader=new ImageLoader(mContext.getApplicationContext());
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View vi=convertView;
        if(convertView==null)
            vi = inflater.inflate(R.layout.list_item, null);

        HashMap<String, Object> data = (HashMap<String, Object>) getItem(position);
        TextView text = (TextView)vi.findViewById(R.id.name);
        String name = (String) data.get(NAME);
        text.setText(name);
        ImageView image=(ImageView)vi.findViewById(R.id.imageView1);
        imageLoader.DisplayImage(IMAGE, (Activity)mContext, image);
        return vi;
    }
}
}

and here's the imageLoader:

public class ImageLoader {

MemoryCache memoryCache=new MemoryCache();
FileCache fileCache;
private Map<ImageView, String> imageViews=Collections.synchronizedMap(new WeakHashMap<ImageView, String>());

public ImageLoader(Context context){

    photoLoaderThread.setPriority(Thread.NORM_PRIORITY-1);

    fileCache=new FileCache(context);
}

final int stub_id=R.drawable.ic_launcher;
public void DisplayImage(String url, Activity activity, ImageView imageView)
{
    imageViews.put(imageView, url);
    Bitmap bitmap=memoryCache.get(url);
    if(bitmap!=null)
        imageView.setImageBitmap(bitmap);
    else
    {
        queuePhoto(url, activity, imageView);
        imageView.setImageResource(stub_id);
    }    
}

private void queuePhoto(String url, Activity activity, ImageView imageView)
{

    photosQueue.Clean(imageView);
    PhotoToLoad p=new PhotoToLoad(url, imageView);
    synchronized(photosQueue.photosToLoad){
        photosQueue.photosToLoad.push(p);
        photosQueue.photosToLoad.notifyAll();
    }


    if(photoLoaderThread.getState()==Thread.State.NEW)
        photoLoaderThread.start();
}

private Bitmap getBitmap(String url) 
{
    File f=fileCache.getFile(url);


    Bitmap b = decodeFile(f);
    if(b!=null)
        return b;


    try {
        Bitmap bitmap=null;
        URL imageUrl = new URL(url);
        HttpURLConnection conn = (HttpURLConnection)imageUrl.openConnection();
        conn.setConnectTimeout(30000);
        conn.setReadTimeout(30000);
        InputStream is=conn.getInputStream();
        OutputStream os = new FileOutputStream(f);
        Utils.CopyStream(is, os);
        os.close();
        bitmap = decodeFile(f);
        return bitmap;
    } catch (Exception ex){
        ex.printStackTrace();
        return null;
    }
}


private Bitmap decodeFile(File f){
    try {

        BitmapFactory.Options o = new BitmapFactory.Options();
        o.inJustDecodeBounds = true;
        BitmapFactory.decodeStream(new FileInputStream(f),null,o);


        final int REQUIRED_SIZE=70;
        int width_tmp=o.outWidth, height_tmp=o.outHeight;
        int scale=1;
        while(true){
            if(width_tmp/2<REQUIRED_SIZE || height_tmp/2<REQUIRED_SIZE)
                break;
            width_tmp/=2;
            height_tmp/=2;
            scale*=2;
        }


        BitmapFactory.Options o2 = new BitmapFactory.Options();
        o2.inSampleSize=scale;
        return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);
    } catch (FileNotFoundException e) {}
    return null;
}


private class PhotoToLoad
{
    public String url;
    public ImageView imageView;
    public PhotoToLoad(String u, ImageView i){
        url=u; 
        imageView=i;
    }
}

PhotosQueue photosQueue=new PhotosQueue();

public void stopThread()
{
    photoLoaderThread.interrupt();
}


class PhotosQueue
{
    private Stack<PhotoToLoad> photosToLoad=new Stack<PhotoToLoad>();


    public void Clean(ImageView image)
    {
        for(int j=0 ;j<photosToLoad.size();){
            if(photosToLoad.get(j).imageView==image)
                photosToLoad.remove(j);
            else
                ++j;
        }
    }
}

class PhotosLoader extends Thread {
    public void run() {
        try {
            while(true)
            {

                if(photosQueue.photosToLoad.size()==0)
                    synchronized(photosQueue.photosToLoad){
                        photosQueue.photosToLoad.wait();
                    }
                if(photosQueue.photosToLoad.size()!=0)
                {
                    PhotoToLoad photoToLoad;
                    synchronized(photosQueue.photosToLoad){
                        photoToLoad=photosQueue.photosToLoad.pop();
                    }
                    Bitmap bmp=getBitmap(photoToLoad.url);
                    memoryCache.put(photoToLoad.url, bmp);
                    String tag=imageViews.get(photoToLoad.imageView);
                    if(tag!=null && tag.equals(photoToLoad.url)){
                        BitmapDisplayer bd=new BitmapDisplayer(bmp, photoToLoad.imageView);
                        Activity a=(Activity)photoToLoad.imageView.getContext();
                        a.runOnUiThread(bd);
                    }
                }
                if(Thread.interrupted())
                    break;
            }
        } catch (InterruptedException e) {

        }
    }
}

PhotosLoader photoLoaderThread=new PhotosLoader();


class BitmapDisplayer implements Runnable
{
    Bitmap bitmap;
    ImageView imageView;
    public BitmapDisplayer(Bitmap b, ImageView i){bitmap=b;imageView=i;}
    public void run()
    {
        if(bitmap!=null)
            imageView.setImageBitmap(bitmap);
        else
            imageView.setImageResource(stub_id);
    }
}

public void clearCache() {
    memoryCache.clear();
    fileCache.clear();
}

}

Help is MUCH appreciated.

Answer 1

Nowadays you can use Picasso instead of writing your own custom image loader. Otherwise, your code helped a ton. Thanks bro.

Heres my adapter using your code with Picasso.

public class CustomList extends SimpleAdapter {

private Context mContext;
public LayoutInflater inflater=null;
public CustomList(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to) {
    super(context, data, resource, from, to);
    mContext = context;
    inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View vi=convertView;
    if(convertView==null)
        vi = inflater.inflate(R.layout.list_view_row, null);

    HashMap<String, Object> data = (HashMap<String, Object>) getItem(position);
    TextView text = (TextView)vi.findViewById(R.id.name);
    String name = (String) data.get("name");
    text.setText(name);
    ImageView image=(ImageView)vi.findViewById(R.id.img);
    String image_url = (String) data.get("image_url");
    Picasso.with(mContext).load(image_url).into(image);
    return vi;
  }
}

Answer 2

problem solved,the URL coming from the image had "& amp;" inside it which was not understood.

Answer 3

The solution with Picasso works great, just remember to change the parameters you are sending in the 'puts' of the original class!

In order to import Picasso add it to the dependencies as

compile group:'com.squareup.picasso', name:'picasso', version:'2.5.2'

In build.gradle (app) Then View-->Tools Windows --> Gradle and then press the refresh button