Web image loaded by thread in android

Question

I have an extended BaseAdapter in a ListActivity:

private static class RequestAdapter extends BaseAdapter {

and some handlers and runnables defined in it

// Need handler for callbacks to the UI thread
    final Handler mHandler = new Handler();

    // Create runnable for posting
    final Runnable mUpdateResults = new Runnable() {
        public void run() {
            loadAvatar();
        }
    };

    protected static void loadAvatar() {
        // TODO Auto-generated method stub
        //ava.setImageBitmap(getImageBitmap("URL"+pic));
        buddyIcon.setImageBitmap(avatar);
    }

In the getView function of the Adapter, I'm getting the view like this:

if (convertView == null) {
            convertView = mInflater.inflate(R.layout.messageitem, null);

            // Creates a ViewHolder and store references to the two children views
            // we want to bind data to.
            holder = new ViewHolder();
            holder.username = (TextView) convertView.findViewById(R.id.username);
            holder.date = (TextView) convertView.findViewById(R.id.dateValue);
            holder.time = (TextView) convertView.findViewById(R.id.timeValue);
            holder.notType = (TextView) convertView.findViewById(R.id.notType);
            holder.newMsg = (ImageView) convertView.findViewById(R.id.newMsg);
            holder.realUsername = (TextView) convertView.findViewById(R.id.realUsername);
            holder.replied = (ImageView) convertView.findViewById(R.id.replied);
            holder.msgID = (TextView) convertView.findViewById(R.id.msgID_fr);
            holder.avatar = (ImageView) convertView.findViewById(R.id.buddyIcon);
            holder.msgPreview = (TextView) convertView.findViewById(R.id.msgPreview);


            convertView.setTag(holder);
        } else {
            // Get the ViewHolder back to get fast access to the TextView
            // and the ImageView.
            holder = (ViewHolder) convertView.getTag();
        }

and the image is getting loaded this way:

Thread sepThread = new Thread() {
                    public void run() {
                        String ava;
                        ava = request[8].replace(".", "_micro.");
                        Log.e("ava thread",ava+", username: "+request[0]);
                        avatar = getImageBitmap(URL+ava);
                        buddyIcon = holder.avatar;
                        mHandler.post(mUpdateResults);
                        //holder.avatar.setImageBitmap(getImageBitmap(URL+ava));
                    }
                };
                sepThread.start();

Now, the problem I'm having is that if there are more items that need to display the same picture, not all of those pictures get displayed. When you scroll up and down the list maybe you end up filling all of them.

When I tried the commented out line (holder.avatar.setImageBitmap...) the app sometimes force closes with "only the thread that created the view can request...". But only sometimes.

Any idea how I can fix this? Either option.

Answer 1

So you shouldn't try and add the image to the view in another thread. My advice would be to use an AsyncTask something like this:

class GetImageTask extends AsyncTask<String, int[], Bitmap> {

    @Override
    protected Bitmap doInBackground(String... params) {
      Bitmap bitmap = null;

      // Get your image bitmap here

      return bitmap;
    }

    @Override
    protected void onPostExecute(Bitmap bitmapResult) {
      super.onPostExecute(bitmapResult);
      // Add your image to your view
      holder.avatar.setImageBitmap(bitmapResult);
    }
}

You call an AsyncTask like:

new GetImageTask().execute(param1, param2, etc);

For more info on an AsyncTask have a look at: http://developer.android.com/reference/android/os/AsyncTask.html

Answer 2

When getView is called you've got a avatar ImageView. You should pass this instance to sepThread, and sepThread should pass this instance to mUpdateResults. This way the bitmap will be displayed exactly to ImageView it was downloaded for. Otherwise bitmap is displayed to some budddyIcon instance that is incorrect. Your thread was downloading image for some time and when it's ready budddyIcon references another ImageView because another getView has already been called.

Should look something like that:

public View getView(...){
  //skip
  (new SepThread(holder.avatar)).start();
}

public class SepThread extends Thread() {
    ImageView imageView;
    public SepThread(ImageVIew iv){
      imageView=iv;
    }
    public void run() {
        //skip
        Bitmap avatar = getImageBitmap(URL+ava);
        mHandler.post(new UpdateResults(imageView, avatar));
    }
};

class UpdateResults extends Runnable() {
  ImageView imageView;
  Bitmap bitmap;
  public UpdateResults(ImageView iv, Bitmap b){
    imageView=iv;
    bitmap=b;
  }
  public void run() {
      loadAvatar(imageView, bitmap);
  }
};

protected static void loadAvatar(ImageView iv, Bitmap b) {
    iv.setImageBitmap(b);
}

And of course you should be aware of recycled convertViews as disretrospect says above.

I made a complete example of LazyList and posted the source, may also be helpful http://stackoverflow.com/questions/541966/android-how-do-i-do-a-lazy-load-of-images-in-listview/3068012#3068012.

Answer 3

Ok,

I used Fedor's way of passing parameters to the thread and disretrospect's way of checking for recycled spinners and image caching. Great help from both of you guys. Thank you.

One more thing though. In another activity (the starting one of the app), I wanted to the initializing in an asynctask.

So I made this:

class initApp extends AsyncTask<String, Integer, Long> {
    private ProgressDialog Dialog = new ProgressDialog(overview.this);  
    private int results;

     protected void onPreExecute() {  
         Dialog.setMessage(getString(R.string.initApp));  
         Dialog.show();              
     }  
     protected Long doInBackground(String... dummy) {
        results = initApplication();
        return null;
     }


     protected void onPostExecute(Long result) {
         Dialog.dismiss();
         if (results == 1) {
             //msgSent();
         } else {
             //
             showError();
         }
     }

 }

The initApplication() method basically sets all the params I need for my app. One of them being values for a spinner item. Those are set inside an initRadius(), which is called inside initApplication(). initRadius() does these amongst other things:

if (UNITS == 0) {
        Log.e("units","kms");
        rValues = ArrayAdapter.createFromResource(this, R.array.radiusValues,android.R.layout.simple_spinner_item );        
    } else {
        Log.e("units","miles");
        rValues = ArrayAdapter.createFromResource(this, R.array.radiusUSValues,android.R.layout.simple_spinner_item );  
    }
    rValues.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    radius.setAdapter(rValues);

the aSyncTask crashes on radius.setAdapter line. initApplication executes: radius = (Spinner) findViewById(R.id.radius); right before calling initRadius() and radius is declared in the main activity class as:

private Spinner radius;

The task crashes again with "only the thread that created the view can request" exception. The task is called on the "onCreate" method of the main activity class as:

new initApp().execute("dummy");

I thought that asynctask should have the same thread as the UI one? What can I do to fix this? I guess I'm not too clear on threading here. Thanks for the help again.