title: Load asynchronous images in listView
body: <p>I want to load images from a server, AFTER loading the data in a list view.
  I know that a lot of topics existing for this problem but I haven't found the solution...</p>
  
  <p>So this is my code :</p>
  
  <pre><code>//asyncTackClass for loadingpictures
  public class LoadImagesThread extends AsyncTask&lt;Bundle, Void, Bitmap&gt; {
      private ImageView view;
      private Bitmap bm;
      private Context context;
      private final WeakReference&lt;ImageView&gt; imageViewReference;
  
      private final String BUNDLE_URL = "url";
      private final String BUNDLE_NAME = "name";
      private final String BUNDLE_BM = "bm";
  
      public LoadImagesThread(Context context, ImageView view) {
          this.context=context;
          imageViewReference = new WeakReference&lt;ImageView&gt;(view);
      }
  
      @Override
      protected Bitmap doInBackground(Bundle... b) {
  
          Bitmap bm =null;
          if (StorageHelper.getBitmap(b[0].getString(BUNDLE_NAME)) != null) { // Check the sdcard
              bm = StorageHelper.getBitmap(b[0].getString(BUNDLE_NAME));
              Log.w("LoadImagesThread", "Get image from sdcard : "+b[0].getString(BUNDLE_NAME));
          } else { // Check the server
              bm = ServiceHelper.getBitmapFromURL(b[0].getString(BUNDLE_URL));
              StorageHelper.saveBitmap(bm, b[0].getString(BUNDLE_NAME)); // Save image on sdcard   
              Log.w("LoadImagesThread", "Get image from server : "+b[0].getString(BUNDLE_NAME));
          }
  
          return bm;
      }
  
      @Override
      protected void onPostExecute(final Bitmap bm) {
          super.onPostExecute(bm);        
          if (bm != null){ //if bitmap exists...
              view = imageViewReference.get();
              // Fade out
              Animation fadeOutAnimation = AnimationUtils.loadAnimation(context, R.anim.fadeoutimage);
              fadeOutAnimation.setAnimationListener(new AnimationListener() {
  
              public void onAnimationStart(Animation animation) {
  
              }
  
              public void onAnimationRepeat(Animation animation) {
  
              }
  
              public void onAnimationEnd(Animation animation) {
                  // Fade in
                  view.setImageBitmap(bm);
                  Animation fadeInAnimation = AnimationUtils.loadAnimation(context, R.anim.fadeinimage);
                  view.startAnimation(fadeInAnimation);
              }
          });
  
              // Launch the fadeout
              view.startAnimation(fadeOutAnimation);
  
  
          }else{ //if not picture, display the default ressource
              view.setImageResource(R.drawable.productcarre);
          }
  
      }
  
  }
  </code></pre>
  
  <p>The code is used to display a Bitmap in a ImageView</p>
  
  <p>And this is the adapter: </p>
  
  <pre><code>public class ListViewShoplistStoresAdapter extends BaseAdapter {
  
  private ArrayList&lt;Shop&gt; shopList;
  private Activity activity;
  
  private HashMap&lt;Integer, ImageView&gt; views;
  private final String BUNDLE_URL = "url";
  private final String BUNDLE_NAME = "name";
  private final String BUNDLE_POS = "pos";
  private final String BUNDLE_ID = "id";
  
  
  public ListViewShoplistStoresAdapter(Activity activity, ArrayList&lt;Shop&gt; shopList) {
      super();
      this.activity = activity;
      this.shopList = shopList;
      this.views = new HashMap&lt;Integer, ImageView&gt;();
  }
  
  public int getCount() {
      return shopList.size();
  }
  
  public Object getItem(int position) {
      return shopList.get(position);
  }
  
  public long getItemId(int position) {
      return shopList.get(position).getId();
  }
  
  private class ViewHolder {
      public TextView store;
      public TextView name;
      public ImageView ImageStore;
  }
  
  public View getView(int position, View convertView, ViewGroup parent) {
      ViewHolder view;
      LayoutInflater inflator = activity.getLayoutInflater();
  
      if(convertView == null) {
          view = new ViewHolder();
          convertView = inflator.inflate(R.layout.listviewshops, null);
  
          view.store = (TextView) convertView.findViewById(R.id.store);
          view.name = (TextView) convertView.findViewById(R.id.name);
          view.ImageStore = (ImageView) convertView.findViewById(R.id.imgstore);
  
          convertView.setTag(view);
      }else {
          view = (ViewHolder) convertView.getTag();
      }
  
      Typeface regular=Typeface.createFromAsset(activity.getAssets(), "fonts/RobotoRegular.ttf");
      view.store.setTypeface(regular);
  
      Typeface light=Typeface.createFromAsset(activity.getAssets(), "fonts/RobotoLight.ttf");
      view.store.setTypeface(light);
      Brand brand = StorageHelper.getBrand(activity, shopList.get(position).getBrandId());
      if (brand == null) {
          Log.e("SetShopInAdapter","Brand null");
          Toast.makeText(activity, "Impossible d'afficher la liste de magasins", Toast.LENGTH_LONG).show();
      } else {
          view.store.setText(brand.getName());
          view.name.setText(shopList.get(position).getName());
          view.ImageStore.setImageResource(R.drawable.productcarre);
      }
  
      Bundle b = new Bundle();
  
      //url of the pict
      b.putString(BUNDLE_URL, ServiceHelper.getImageUrl("brand", brand.getName()));
  
      // name of image
      b.putString(BUNDLE_NAME, ServiceHelper.getCleanImageName(brand.getName()));
  
      //position in the listView
      b.putInt(BUNDLE_POS, position);
  
      //id of the current object
      b.putInt(BUNDLE_ID, brand.getId());
  
      //put info in the map in order to display in the onPostExecute
      if(views.get(position)==null){
          views.put(position, view.ImageStore);
          // launch thread
          new LoadImagesThread(activity.getApplicationContext(), view.ImageStore).execute(b);
      }
  
      return convertView;
  
  }
  
  }
  </code></pre>
  
  <p>So, when I used a GridView, there were no problems, but when I use a ListView the image is changed only in the first item !</p>
  
  <p><strong>Example</strong>:
  I want to display product images for "car", "house" and "apple" items.
  The code will launch the thread and all images (car then house and finally apple) will be displayed in the first item (the car item)...
  And the house and the apple while not have images !!</p>
  
  <p>Do you know what I should do ? </p>
  
  <p>Thanks</p>