Loading different images in the listview item for custom Adapter

Question

Hi please forgive me if I am mistaking when explaining the problem . I have a Custom Base adapter in which there is two imageView and two TextView and I am usning an Async task to set the image from the URL. it sets the image but changes the image again automatically.

below is the code for the adapter .

public class SharedPhotosAdapter extends BaseAdapter{

Context context;
LayoutInflater inflater;
public static ArrayList<HashMap<String, String>> data;
ImageLoader imageLoader;
private static final String BRANCH="Branch";
private static final String DATE="DateTime";
private static final String STARS="Stars";
private static final String IMAGE_URL="URL";
private static final String USER_NAME="UserName";
 TextView name,date,comment;
 ImageView pro_image,shared_image;

 public SharedPhotosAdapter(Context con,ArrayList<HashMap<String, String>> result) {
    // TODO Auto-generated constructor stub

     context=con;
     data=result;
     inflater = (LayoutInflater)context.getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     imageLoader=new ImageLoader(context);

}



@Override
public int getCount() {
    // TODO Auto-generated method stub
    return data.size();
}

@Override
public Object getItem(int arg0) {
    // TODO Auto-generated method stub
    return null;
}

@Override
public long getItemId(int arg0) {
    // TODO Auto-generated method stub
    return 0;
}

@Override
public View getView(int position, View rowView, ViewGroup parent) {
    // TODO Auto-generated method stub

     ViewHolder holder;
     Bitmap bitmap=null;
     ImageView image = null;
     HashMap<String, String> result=data.get(position);
    if(rowView==null)
    {
        rowView=inflater.inflate(R.layout.shared_photos_item, null);
        holder=new ViewHolder();


    holder.name=(TextView)rowView.findViewById(R.id.textView1);
    holder.date=(TextView)rowView.findViewById(R.id.textView4);
    holder.comment=(TextView)rowView.findViewById(R.id.textView3);

    holder.pro_image=(ImageView)rowView.findViewById(R.id.imageView1);
    holder.shared_image=(ImageView)rowView.findViewById(R.id.imageView2);






    rowView.setTag(holder);


    }
    else
    {
        holder = (ViewHolder)rowView.getTag();

    }

    new DownloadImageTask(holder.shared_image).execute(result.get(IMAGE_URL));
    holder.name.setText(result.get(USER_NAME));
    holder.date.setText(result.get(DATE));
    holder.comment.setText(result.get(BRANCH));





    return rowView;
}



public class ViewHolder
{
     TextView name,date,comment;
     ImageView pro_image,shared_image;


}


}

Here is the Async task that i am using for setting the image from the url

public class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
ImageView bmImage;

public DownloadImageTask(ImageView bmImage) {
    this.bmImage = bmImage;
}

@Override
protected void onPreExecute() {
    // TODO Auto-generated method stub
    super.onPreExecute();

}

protected Bitmap doInBackground(String... urls) {
    String urldisplay = urls[0];
    Bitmap mIcon11 = null;
    try {
      InputStream in = new java.net.URL(urldisplay).openStream();
      mIcon11 = BitmapFactory.decodeStream(in);
    } catch (Exception e) {

    }
    return mIcon11;
}

@Override 
protected void onPostExecute(Bitmap result) {
    super.onPostExecute(result);

    bmImage.setImageBitmap(result);
 }
}

it setting randomly any image to the image view just cant figure out where i am going wrong. A little help will be appreciable.

thanks

Answer 1

I would suggest you to try Picasso to remove the hassle of downloading images/caching etc. Once you have the jar in your workspace, all you need to do in the getView() method of the adapter class is this.

Picasso.with(context).load(result.get(IMAGE_URL)).into(holder.shared_image);

No need of the DownloadAsyncTask. As @zapl also suggested in the comment, there are other libraries like Volley and UniversalImageLoader, but I liked Picasso. You can also easily apply transformations like rounded-image using the Transformation interface provided by Picasso.