Loading image from URL in custom adapter for ListView (Android Studio)

Question

While the bitmap seems to be fetched right, the variable 'userBitmap' will remain null. When scrolling up or down on my tablet, though, new list rows will contain the pictures, but they're all the same and wrong. Really, really confused. I've tried a number of different methods getting an image from the web. Any help is greatly appreciated.

My custom adapter:

public class MessagesArrayAdapter extends ArrayAdapter<ChatData>
{
    Bitmap userBitmap;

public MessageArrayAdapter(Context context, List<ChatData> objects)
{
    super(context, 0, objects);
}

public View getView(int position, View convertView, ViewGroup parent)
{
    ChatCell chatCell = new ChatCell();

    LayoutInflater inflater = LayoutInflater.from(getContext());
    convertView = inflater.inflate(R.layout.cell_chat, parent, false);

    chatCell.usernameTextView = (TextView) convertView.findViewById(R.id.usernameTextView);
    chatCell.messageTextView = (TextView) convertView.findViewById(R.id.messageTextView);
    chatCell.userImageView = (ImageView) convertView.findViewById(R.id.userImageView);

    ChatData chatData = getItem(position);

    // Get user image from web
    new loadImageAsync().execute(chatData.avatarURL);

    chatCell.userImageView.setImageBitmap(userBitmap);
    chatCell.usernameTextView.setText(chatData.username);
    chatCell.messageTextView.setText(chatData.message);

    return convertView;
}



private static class ChatCell
{
    TextView usernameTextView;
    TextView messageTextView;
    ImageView userImageView;
}

private class loadImageAsync extends AsyncTask<String, Void, Double>{
    @Override
    protected Double doInBackground(String... params) {

        userBitmap = loadImage(params[0]);


        return null;
    }
}


public Bitmap loadImage(String str) {

    InputStream instream = null;
    try {
        HttpGet httpRequest = new HttpGet(URI.create(str));
        HttpClient httpclient = new DefaultHttpClient();
        HttpResponse response = (HttpResponse) httpclient.execute(httpRequest);
        HttpEntity entity = response.getEntity();
        BufferedHttpEntity bufHttpEntity = new BufferedHttpEntity(entity);
        instream = bufHttpEntity.getContent();
        Bitmap myBitmap = BitmapFactory.decodeStream(instream);

        return myBitmap;
    } catch (Exception e) {
        e.printStackTrace();
        return null;
    } finally {
        //close input
        if (instream != null) {
            try {
                instream.close();
            } catch (IOException ioex) {
                // Handle error
            }
        }
    }

}

}

Answer 1

The easiest way to solve your problem is using some library, for example Picasso. It is not only easier to use and make your code easier to read, but also prevents you from OutOfMemory Exceptions, when images are too big. Loading image is then matter of one line:

Picasso.with(context)
.load(urlOfYourImage)
.resize(50, 50) // here you resize your image to whatever width and height you like
.into(imageView)

Answer 2

I think you're running into two issues here:

1) View Recycling - I'm new to Android myself, and this comes up pretty frequently when using listviews, when parts of the listview move off screen, they can be wrong when scrolling back. I personally had an issue with button states changing for the wrong rows when scrolling up and down in one. This tutorial goes over what Recycling is in a bit more detail, and provides a solution in a View Holder private class that worked for me. I'm sure other parts of SO talk about this too.

2) Image Null - Is this definitely coming through as null, or just not appearing in the listview? If the former, some step in LoadImage() must not be working correctly. If the latter, you may want to try calling notifyDataSetChanged() after setting the image, to tell the main thread the image is ready to be drawn. Something like below (in your AsyncTask):

@Override
protected void onPostExecute() {
       notifyDataSetChanged();
    }
}