0

I have coded to display few images in gridview. The images are getting displayed from urls. The problem i am facing is that the images get replaced when i scroll.. and the order of images keeps on changing once started.. this leads to delay in display of full image if i click on any image in grid.. Please help !

code :

public class ImageAdapter extends BaseAdapter {

    private Context mContext;
    private TextView txtUrl;
    private String response;
    public ImageView imageView;
    public static String[] mThumbIds;
    public ImageAdapter(Context c,String resp) {
        mContext = c;
        response = resp.trim();
        mThumbIds = resp.split(",");
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {

        if (convertView == null) {  // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(95, 95));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(6, 6, 6, 6);
        } else {
            imageView = (ImageView) convertView;
        }


        try {
             new LoadImageGrid(imageView).execute(mThumbIds[position]);

        } catch(Exception e) {
            txtUrl.setText("Error: Exception");
        }

        return imageView;

    }



class LoadImageGrid extends AsyncTask<String, Void, Drawable>
{

    ImageView imageView;
    public LoadImageGrid(ImageView im){
        imageView = im;
    }
    @Override
    protected Drawable doInBackground(String... args) {
        String url = args[0];
        Drawable d = null;
        try {
            d = Drawable.createFromStream((InputStream) new URL(url).getContent(), "src");
        } catch (MalformedURLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return d;

    }


    @Override
    protected void onPostExecute(Drawable d) {
        imageView.setImageDrawable(d);
    }
Pragnani
  • 20,075
  • 6
  • 49
  • 74
Shubham Arora
  • 167
  • 13
  • It will happen like that you need to cache the images. Try using Any image downloading library available for android, like universal image downloader, one you'll find Lazy list – Pragnani Mar 08 '13 at 16:31

2 Answers2

1

When you scroll your grid view, image views that are not visible returns to getView() as convertView parameter. But your asyncTask doesn't stop, and call

imageView.setImageDrawable(d);

leads to applying downloaded image to the view on wrong position. Because now you reuse the same imageView. Quick fix is not to use convertView. But it'll slow down your app a bit.

Sergey Zhabinskii
  • 478
  • 3
  • 12
  • can you please tell me any way by which app dont gets slow because in future i will increase the number of images being displayed in the grid.. and how can i do it without using convertview ? – Shubham Arora Mar 08 '13 at 17:08
  • I don't think, that the perfomance will decrease significantly. You don't use complex layouts, and creation of single ImageView is pretty fast. By the way, loading the image every time, when it appears on the screen is a bad practice. You should cache downloaded images. Here is a related thread: http://stackoverflow.com/questions/541966/how-do-i-do-a-lazy-load-of-images-in-listview. – Sergey Zhabinskii Mar 08 '13 at 19:19
  • No i don't want to cache the images. Can you please tell me what changes should i made in the existing code so that i can get rid from this problem.. how to do it without using covertview ? – Shubham Arora Mar 09 '13 at 12:54
  • just remove `if (convertView == null) {` and `} else { imageView = (ImageView) convertView; }` – Sergey Zhabinskii Mar 09 '13 at 17:21
  • i have adopted your method but the moment i scroll down and then scroll up, the images gets vanished. which were displayed in the starting of the grid. :/ – Shubham Arora Mar 09 '13 at 19:34
  • They are vanished, because views, that are not visible are destroyed. Only visible views exists. That's done for better memory managment. When you scroll up again, views are being recreated and images are downloaded again. That's why I strongly recommend to cache the images. – Sergey Zhabinskii Mar 09 '13 at 20:54
  • Problem solved. Finally i have cached downloaded images. Now it is working fine. Thanks for the help. – Shubham Arora Apr 20 '13 at 19:05
  • works fine for me if I remove the convert view. Anyone has solution with convert view reuse ? – Zhar Jan 25 '14 at 20:53
0

This seems to be related to convert view. When you reuse the space for an image using convert view then you should use the Imageview within that scope. I would suggest to find the imageview by its id within your current class code and then popultae it.

manishpro
  • 141
  • 8