Weird animation on Gallery when a invalidate is requested from it's children

Question

This is the adapter of my Gallery on which I display ImageViews (thumb of a page)

I want to load the images ASync (some times this can come from Network), so I did that code:

    public View getView(int position, View convertView, ViewGroup parent) {
        final ImageView image = convertView != null ? convertView : new ImageView(getContext());

        final PageInfo page = getItem(position);

        image.setBackgroundColor(Color.WHITE);

        image.setLayoutParams(new Gallery.LayoutParams(96, 170));

        new AsyncTask<Void, Void, Bitmap>() {
            @Override
            protected Bitmap doInBackground(Void... arg0) {
                try {
                    File thumbnail = page.thumbnail();//Thumbnail download the image if not available
                    return BitmapFactory.decodeStream(new FileInputStream(thumbnail));
                } catch (ApplicationException e) {
                    return null;
                } catch (NetworkException e) {
                    return null;
                }
            }

            protected void onPostExecute(Bitmap result) {
                if (result == null)
                    return;

                image.setImageBitmap(result);
            };
        }.executeOnExecutor(executor);

        return image;
    }

This works, but if I'm dragging the Gallery the views (when switching to the real Bitmap) do a "jump" to another position inside the galley, making it weird.

How can I avoid that? Or can I change the image of a ImageView without requesting layout of the ViewGroup?

EDIT: A similar question on Google dev groups http://code.google.com/p/android/issues/detail?id=15526

score 4 · Answer 1 · answered Dec 15 '11 at 21:44

4

The Gallery widget has a known bug that causes it to always return a null convertView. This means that every time getView is called you are creating a new ImageView which might be causing the issue you're seeing.

There is a 3rd party created Gallery that Fixes the recycling bug, search around online for EcoGallery and you can find how to implement it. It will noticeably increase the graphics performance while you are scrolling the gallery.

answered Dec 15 '11 at 21:44

FoamyGuy

46,603
18
125
156

The issue is not about having the Views recycled, the problem is the ASync load, and call to methods that cause the Views inside the Gallery to be invalidated. – Marcos Vasconcelos Dec 19 '11 at 18:48

score 3 · Answer 2 · answered Dec 20 '11 at 13:26

If you don't get it to work properly, I once made a hack that might help.

At the end of your doInBackground(), just before you return, do:

int viewsOnScreen = 3;
while(viewsOnScreen >= 1){ //adapt the numbers so that they work with your gallery, this is for a gallery with one visible child.
    viewsOnScreen = getLastVisiblePosition() - getFirstVisiblePosition();
    SystemClock.sleep(100);
}

This will wait with updating your image until you only display one view (or whatever number you specify, the point is you don't have any partial views on screen), causing the 'jump' to go by unnoticed. If your problems also involve jumps to a completely different position in the gallery, I recommend that you check which object you have selected before loading, and after loading you find what position this object is at, and call setSelection() to that position.

But try all the other solutions first...

Well, as long I reach a solution similar to this (and this is the only answer that doesn't tell me to do cache) I'll reward my reputation to you. — Marcos Vasconcelos, Dec 26 '11 at 14:37

score 2 · Answer 3 · edited Dec 05 '12 at 19:59

If you still haven't found a solution here is mine.

You need CustomGallery, which is almost 1:1 default Android Gallery. But you can't extend Gallery, you have to copy whole source code to your class. You will need to do the same with CustomAbsSpinner and CustomAdapterView classes. All this to change only one line of code... In your CustomGallery class change onLayout() method to this:

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);

    /*
     * Remember that we are in layout to prevent more layout request from
     * being generated.
     */

    mInLayout = true;

    /*
     * Add if condition to avoid calling layout()  unnecessarily:
     * -when children calls onLayout after loading imageview
     */
    if(changed || mDataChanged)
        layout(0, false);
    mInLayout = false;
}

This will cause that layout() is called only when actually needed.

There was also another known bug in gallery behaviour, which causes gallery jumps on notifyDataSetChanged(). If you are having this bug as well just comment out one line in CustomAdapterView class:

    @Override
    public void onChanged() {
        mDataChanged = true;
        mOldItemCount = mItemCount;
        mItemCount = getAdapter().getCount();

        // Detect the case where a cursor that was previously invalidated has
        // been repopulated with new data.
        if (CustomAdapterView.this.getAdapter().hasStableIds() && mInstanceState != null
                && mOldItemCount == 0 && mItemCount > 0) {
            CustomAdapterView.this.onRestoreInstanceState(mInstanceState);
            mInstanceState = null;
        } else {
            rememberSyncState();
        }
        checkFocus();
        //comment this line to avoid gallery snap on notyfiDataSetChanged 
        //requestLayout();
    }

Anyway, good topic Marcos! Thank you for leading me to the solution. If you need source of the custom classes let me know.

EDIT (by Marcos Vasconcelos):

There's a bunch of styleables things that need to be copy in order to get the R fix for those classes.

For those who are searching the Android 2.2 source code (without res folder, if anyone found it please notify us), this can be found here: http://en.newinstance.it/2010/12/01/android-sdk-2-2_r2-sources/

For more recent versions of the API this can be done trough SDK Manager and will be located into /sources/android-

Thanks for your answer, but I solved it creating my own Gallery from scratch (a lot of translate and some math also). But thanks for the solution this will be usefull some time. — Marcos Vasconcelos, Feb 06 '12 at 13:19
Can you send me that code? I solved it for showing only fullscreen cells, I need the behaviour of gallery for items too. Thank you — Marcos Vasconcelos, Mar 21 '12 at 22:38

score 1 · Answer 4 · answered Dec 20 '11 at 11:29

1

Does it by any chance work if you (a) scroll really slowly, or (b) don't recycle the convertView?

I'll go out on a limb and guess that it does...

The reason being that when you recycle an ImageView from a previous call to getItem(), you are not cancelling the associated AsyncTask. You will have multiple tasks updating the same ImageView, which could be the behaviour you describe.

answered Dec 20 '11 at 11:29

Reuben Scratton

38,595
9
77
86

b) convertView is always null and a) if I do it really slow the views that are being loaded, when it complete and change the ImageBitmap this call an invalidate that cause it's to jump to the last position available. – Marcos Vasconcelos Dec 20 '11 at 18:26
I just checked ImageView's code at http://www.google.com/codesearch#uX1GffpyOZk/core/java/android/widget/ImageView.java&q=ImageView%20android&type=cs. I see the problem... try using a subclass of ImageView which overrides setImageDrawable() and *doesn't* call requestLayout(). – Reuben Scratton Dec 20 '11 at 19:58

score 1 · Answer 5 · answered Dec 21 '11 at 15:35

1

you can use the concept of LazyList which fetches image from internet and temporary put in local cache which indirectly leads to smooth navigation in Gallery as image saved locally

here is the link https://github.com/thest1/LazyList or http://androidsnips.blogspot.com/2010/08/lazy-loading-of-images-in-list-view-in.html

answered Dec 21 '11 at 15:35

Mohammed Azharuddin Shaikh

41,633
14
96
115

The problem ins't about having the images pre-loadeds, is about changing it while scrolling (some time after getview was called) – Marcos Vasconcelos Dec 21 '11 at 20:06
The same error occurs, the fault is the Gallery and it onLayout() method – Marcos Vasconcelos Mar 21 '12 at 22:39

score 0 · Answer 6 · edited Jul 02 '23 at 10:18

0

You can set a default bitmap before starting download of the actual image. This will make sure that the empty views don't get set with the wrong bitmaps.

// load defaultBmp in constructor.

image.setBackgroundColor(Color.WHITE);

image.setLayoutParams(new Gallery.LayoutParams(96, 170));

image.setImageBitmap(defaultBmp); // set the default bitmap (could be white). 
// execute AsyncTask here.

edited Jul 02 '23 at 10:18

halfer

19,824
17
99
186

answered Dec 24 '11 at 08:00

Ron

24,175
8
56
97

Even with this, when you change the bitmap the invalidate() occurs, the onLayout of Gallery get called and the weird animation still happens. – Marcos Vasconcelos Dec 26 '11 at 13:02

Weird animation on Gallery when a invalidate is requested from it's children

6 Answers6

Linked