android - ViewHolder ImageView Load Randomly

Question

I'm beginner in Android Development. I try to create ListView using JSON. I have a problem with ImageView that loaded randomly. This is my MoviesAdapter.java:

    package com.dianagung.json;

    import java.io.InputStream;
    import java.util.ArrayList;

    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.os.AsyncTask;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ArrayAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;

public class MoviesAdapter extends ArrayAdapter<Movies> {

    ArrayList<Movies> ArrayListMovies;
    int Resource;
    Context context;
    LayoutInflater vi;
    ViewHolder holder;


    public MoviesAdapter(Context context, int resource,
            ArrayList<Movies> objects) {
        super(context, resource, objects);
        ArrayListMovies = objects;
        Resource = resource;
        this.context = context;

        vi = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View v = convertView;
        if (v == null) {
            holder = new ViewHolder();

            v = vi.inflate(Resource, null);
            holder.mImage = (ImageView) v.findViewById(R.id.mImage);
            holder.mTitle = (TextView) v.findViewById(R.id.mTitle);
            holder.mDate = (TextView) v.findViewById(R.id.mDate);
            v.setTag(holder);
        } else {
            holder = (ViewHolder) v.getTag();
        }

        holder.mImage.setImageResource(R.drawable.ic_launcher);
        new DownloadImage(holder.mImage).execute(ArrayListMovies.get(position)
                .getImage());
        holder.mTitle.setText(ArrayListMovies.get(position).getTitle());
        holder.mDate.setText(ArrayListMovies.get(position).getDate());
        return v;
    }

    static class ViewHolder  {
        public ImageView mImage;
        public TextView mTitle;
        public TextView mDate;
    }

    // Download Image Task
    private class DownloadImage extends AsyncTask<String, Void, Bitmap> {
        ImageView bmImage;

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

        protected Bitmap doInBackground(String... urls) {
            String urldisplay = urls[0];
            Bitmap mIcon = null;
            try {
                InputStream in = new java.net.URL(urldisplay).openStream();
                mIcon = BitmapFactory.decodeStream(in);
            } catch (Exception e) {
                Log.e("Error", e.getMessage());
                e.printStackTrace();
            }
            return mIcon;
        }

        protected void onPostExecute(Bitmap result) {
            if (result != null) {
                Bitmap bmp2 = Bitmap.createScaledBitmap(result, 80, 80, true);
                bmImage.setImageBitmap(bmp2);
            }
        }

    }

}

Any help would be appreciated. Thanks in advance.

The reason your ImageViews load random images is, when your user scrolls through the list, not all images will have finished loading and you're recycling views. That means you have tasks executing that are attached to ImageViews that are no longer showing the same image. You'll want to make sure you're canceling your tasks as the user scrolls so that tasks don't finish or even execute unless they're still needed. You can see an example of this here: http://stackoverflow.com/questions/12414648/large-listview-containing-images-in-android/12532386#12532386 — Michael Celey, Aug 31 '14 at 04:26

score 0 · Answer 1 · answered Aug 31 '14 at 01:49

Add this line holder.mImage.setImageBitmap(null); before call to new DownloadImage(holder.mImage).execute(ArrayListMovies.get(position) .getImage()); it'll do the work.

BTW you're not using correct way to decode bitmap you may ran into OutOfMemory Exceptions if there are large number of bitmaps, you may use NOSTRA13's library for asyn image loading.

android - ViewHolder ImageView Load Randomly

1 Answers1