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)