Images change position on scrolling in Android

Question

In my android application, I am fetching the images from the url and displaying it in Grid View. But when I scroll down, the images change the position randomly. I am using Async thread to fetch the image and update the Image View object. Any suggestions how to solve this ...

I have refered to the question Images in gridview change their position on scrolling in android but it didin't help me

My code for getView and loading the image
@Override
        public View getView(final int position, View convertView, ViewGroup parent) {
                final HashMap<String, String> song = songsList.get(position);
                imageURL = song.get(VariablesList.TAG_ALBUM_IMAGE);
                View v = null;
                if (convertView != null)
                        v = convertView;
                else
                        v = inflater.inflate(R.layout.gridlayout_item, parent, false);
                final ImageView imageView = (ImageView) v.findViewById(R.id.icon_image);


                       new LoadImage().execute(imageURL,imageView);

                imageView.setOnClickListener(new View.OnClickListener() {
                        // @Override
                        public void onClick(View v) {
                                albumUrl = new StringBuffer(resources.getString(R.string.songsListURL));
                                String albumIndex = song.get("id");
                                albumName = (song.get("name"));
                                imageURL = song.get(VariablesList.TAG_ALBUM_IMAGE);
                                SongsList albumList = new SongsList(imageURL, albumUrl,
                                                albumName,albumIndex,resources);
                                Thread threadAlbumList = new Thread(albumList);
                                threadAlbumList.start();

                                synchronized (albumList) {
                                        try {
                                                albumList.wait();
                                        } catch (InterruptedException e) {
                                                e.printStackTrace();
                                        }
                                }
                                if (!NewMediaPlayer.mediaPlayer.isPlaying()) {
                                        HashMap<String, String> playingSong = NewMediaPlayer.selectedSongs
                                                        .get(0);
                                        if (playingSong != null) {
                                                String url = playingSong.get("songUrl");
                                                String songName = playingSong.get("songName");
                                                if (songName != null)
                                                        {
                                                         NewMediaPlayer.songTitleLabel.setText(albumName
                                                                        + " - " + songName);
                                                         NewMediaPlayer.songTitle.setText(albumName+"-"+songName);
                                                        }
                                                NewMediaPlayer.playSong(url);
                                        }
                                }
                        }
                });

                TextView itemAlbumName = (TextView) v.findViewById(R.id.icon_text);
                itemAlbumName.setText(song.get("name"));
                itemAlbumName.setOnClickListener(new View.OnClickListener() {
                        public void onClick(View v) {
                                HashMap<String, String> song = songsList.get(position);
                                String songIndex = song.get("id");
                                String albumName = (song.get("name"));
                                Intent in = new Intent(context, SongListActivity.class);
                                in.putExtra("albumIndex", songIndex);
                                in.putExtra("albumName", albumName);
                                in.putExtra("AlbumImage", song.get(VariablesList.TAG_ALBUM_IMAGE));
                                context.startActivity(in);
                        }
                });

                return v;
        }


public void LoadImage extends AsyncTask<Object, Void, Bitmap>{

ImageView imageView;
   @Override
    protected BitMap doInBackground(Object... urls) {
    String imageURL = (String)urls[0];
    imageView = (ImageView)urls[0];
    BitMap image = AlbumList.LoadImagetoGridView(imageURL)
    return image
}

@Override
    protected void onPostExecute(BitMap result) {
    imageView.setImageBitmap(result);
}
}

Likely your views get recycled before the async loader completes. — laalto, Aug 08 '13 at 18:05
The imageView gets updated after the Bitmap image is fetched from URL. I am passing the imageView as on object to the async thread. The initial display is fine, but the images change the position as I start scrolling down. How to solve this — Kanika Maheshwari, Aug 08 '13 at 18:10
Yes and when the view gets recycled, the ImageView reference you passed to async task belongs to another grid item. To get specific help you'll need to make the question more specific. For example, post relevant parts of your adapter (getView()) and the image loader. — laalto, Aug 08 '13 at 18:12

score 0 · Answer 1 · answered Aug 08 '13 at 18:09

0

When you scroll your dosen't cancel your previous image load.
First, read android tutorial for understand this case.
Second, look to use image libraries Android-Universal-Image-Loader, or Volley, etc.

answered Aug 08 '13 at 18:09

silentnuke

2,622
1
18
17

yes, I have read the tutorial as I was implementing, I have posted my code samples. – Kanika Maheshwari Aug 08 '13 at 18:55

score 0 · Answer 2 · answered Aug 09 '13 at 12:50

0

Try to inflate your layout as below:

   if (convertView == null) 
 {
convertView = l_Inflater.inflate(R.layout.gridlayout_item, null);
holder = new ViewHolder();
holder.imageView = (ImageView) convertView
    .findViewById(R.id.iv_item_image);
convertView.setTag(holder);
 } 
  else {
         holder = (ViewHolder) convertView.getTag();
    }   
 static class ViewHolder{
        ImageView imageView; 
     }

This is the best solution to resolve the scrolling issue.

I hope this will help you.

answered Aug 09 '13 at 12:50

GrIsHu

29,068
10
64
102

I have already tried this solution, it is the View Holder pattern but it didin't help – Kanika Maheshwari Aug 09 '13 at 17:36
First thing is in adapter views you only change data. So you need yo have a list of bitmaps from which you update yourimageview inside get view function. Every time an image is downloaded create a small version of bitmap add this to bitmap list. And call notify data set changed. – Pulkit Sethi Aug 09 '13 at 21:37

Images change position on scrolling in Android

2 Answers2