How can I prevent images in this Android listview from shifting around when I click on other screen elements?

Question

I made another post earlier about this subject but I've since changed my code around a bit based on suggestions but the same problem exists. My images keep shifting around if I click other elements on screen.

Here is my code which I call by this:

new Thumbnailer(image_main, image_table).execute(image);

image_main is my imageView and image_table is the table that holds it.

 private class Thumbnailer extends AsyncTask<String, Void, Bitmap> {
      private ImageView imageView;
      private TableLayout imageTable;

        public Thumbnailer(ImageView imageView, TableLayout imageTable) {
            this.imageView = imageView;
            this.imageTable = imageTable;
        }

  @Override
  protected void onPostExecute(Bitmap result) {
      imageView.setImageBitmap(result);
               imageView.setVisibility(View.VISIBLE);
               imageTable.setVisibility(View.VISIBLE);
  }
  @Override
      protected void onProgressUpdate(Void... progress) {
      }

  @Override
  protected Bitmap doInBackground(String... params) {
         BitmapFactory.Options o = new BitmapFactory.Options();
          o.inJustDecodeBounds = true;
          BitmapFactory.decodeFile(params[0], o);
          final int REQUIRED_SIZE=70;

          //Find the correct scale value. It should be the power of 2.
          int width_tmp=o.outWidth, height_tmp=o.outHeight;
          int scale=1;
          while(true){
              if(width_tmp/2<REQUIRED_SIZE || height_tmp/2<REQUIRED_SIZE)
                  break;
              width_tmp/=2;
              height_tmp/=2;
              scale++;
          }
          //Decode with inSampleSize
          BitmapFactory.Options o2 = new BitmapFactory.Options();
          o2.inSampleSize=scale;       
          return BitmapFactory.decodeFile(params[0], o2);
  }
 }

score 5 · Answer 1 · edited Sep 05 '13 at 20:48

I had a similar problem. I would load images into a ListView via an AsyncTask (which might fetch the image via HTTP), and it seemed to load the wrong image for a split second before loading the correct one. It was as if Android was reusing the row before the HTTP request finished, and the AsyncTasks were kind of colliding.

The comments above confirmed that is what was happening.

I fixed it by placing the image path in the tag of the ImageView before the AsyncTask starts, and then checking that tag after the AsyncTask finishes but just before it calls setImageBitmap.

Add these lines:

final String somethingUnique = "put the image path or some other identifier here";
image_main.setTag(somethingUnique);

Before this line:

new Thumbnailer(image_main, image_table).execute(image);

Now, in onPostExecute, check the tag:

// if this does not match, then the view has probably been reused
if (((String)imageView.getTag()).equals(somethingUnique)) {
  imageView.setImageBitmap(result);
}

score 4 · Accepted Answer · answered Nov 26 '10 at 17:38

4

Sounds like you're getting bitten by view recycling. That is, when you scroll a List in Android, it doesn't create a new row and instead reuses a row taken offscreen. In this case, that can result in multiple tasks trying to load an image into a single imageview. You effectively need to somehow be able to tell which load request is the most recent for a row and cancel the earlier ones/ignore their results, or just use a library that handles this for you (like droid-fu).

You could also just turn off view recycling in your Adapter (that's the part that uses the convertView argument in the getView method), but be aware this will make list scrolling slow and jittery, especially on older devices.

answered Nov 26 '10 at 17:38

Yoni Samlan

37,905
5
60
62

Thanks for the reply. My current implementation just has the the Bitmap decoding in getView which itself works fine but is slow and laggy. I've actually been looking at this http://android-developers.blogspot.com/2010/07/multithreading-for-performance.html I take it I would need something how the concurrency portion is handled? Not really sure. My java skills are not very good lol. – Paul Nov 26 '10 at 17:56
It gets more fun than this. You have no guarantee that the view returned by the most recent call to getView for a position is the one that ends up on screen. ListView and GridView will occasionally use a scrap view for measurement purposes. A simple solution for async loading is to track where the loaded elements should go by adapter position, not by the final target view. listView.getChildAt(position - listView.getFirstVisiblePosition()) will always get you the correct current item view for a position, assuming it's in range and on screen. (Check 0 <= index < listView.getChildCount()). – adamp Nov 26 '10 at 18:49
I see what you are saying but am just not having any luck getting it to work – Paul Nov 26 '10 at 20:59
In that blog post you linked to, the relevant part is where they cancel pending downloads on an ImageView when a new download is initiated on the same View. They do this because otherwise the asynchronous tasks - which may return in any order - can end up stomping all over each other, especially with view recycling. (As an aside -- is there a reason you're rolling your own implementation here and not using the one from the developer's blog post? If you don't really understand the issues involved in view recycling and threading, you're just asking for pain and suffering.) – Yoni Samlan Nov 26 '10 at 21:56
I've updated as per the blog with same behavior. Am I missing something? Code: http://pastebin.com/7EmuWhdv – Paul Nov 27 '10 at 22:46
I'm sorry to ask that a little late, but what i have to do to turn off view recycling ? What code i need to change ? – Tsunaze Sep 07 '11 at 09:55

score 0 · Answer 3 · answered Jul 30 '12 at 21:14

0

This Android Developer's blog post provides a reference project for this. Just change the http image download code in the project to your doInBackground code.

answered Jul 30 '12 at 21:14

Jeff Axelrod

27,676
31
147
246

How can I prevent images in this Android listview from shifting around when I click on other screen elements?

3 Answers3

Linked