Gallery ImageAdapter convertView is always null

Question

I am using a Gallery with an ImageAdapter to load it with ImageViews that pull images out of my resources. My problem is that the convertView that gets passed to the getView() method in my adapter is always null. This means that a new ImageView is created each and every time getView() is called. This leads to horrible preformance because the GC is constantly running to wipe away all of these created and no longer used ImageView's.

This is apparently a known bug: Gallery's view cache is broken; never converts views..

My two preferred solutions are either 1. handle a cache of views in the adapter itself and take care of all the logic required to re-use them properly. or 2. include a my own copy of the Gallery widget and try to fix it so it properly returns recycled views.

I've started implementing option one but am quickly realizing I don't exactly know how to make all of the logic behind that operation. I am begining to think that option two might be easier.

I've found the code for the Gallery widget here: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.1_r2/android/widget/Gallery.java

I don't fully understand it, but I can see that it is calling

child = mAdapter.getView(position, null, this);

on line 745. My (shot in the dark) guess that this is the root of the problem.

Does anyone have experience with this bug. Or can anyone point me in the right direction for figuring out how the recycler situation works so that I can tweak this widget to work correctly? Or even suggest some alternate option that I may be overlooking.

EDIT: The best solution that I ever found was an implementation called EcoGallery. The only place I can find reference to it online anymore is here. To get it working you have to put each chunk from there in the correct place within your project.

Athapaskan

May It helps #10770489 – Payment

Answer 1

No experience with that bug particularly, but I have done custom caching before with a 3rd party view pager (before the support lib).

It's really not too difficult honestly. In my case, I knew there would be, at most, one item on the screen. But I also wanted the item to the left and right to be preloaded (these were webviews pulling data off the net). So I have a simple array of 3 views.

[V1, V2, V3]

Now the only thing you need to do is correlate a position in your adapter to a position in your cache. There's a variety of ways you could tackle this. When I first spiked it out, I just made whatever my current view was to be V2 and the rotated the items of the array around when flipping the pager. So flipping to the next view would alter my array

[V2, V3, V1]

Was simple to keep up with. Or you could just do the math and calculate a position to a relative position of the cache.

Another approach is to create a last in, first out queue. Recycle views by pushing them into the queue, and when you need a view, just pop one from it.

Yoicks

I tried for a while with the Queue object to hold the views for me. Never got it working, but I do agree it can be done that way =) – Athapaskan

use an view array to cache your view, and cachePos = position % VIEW_CACHE_SIZE – Term

Answer 2

I do not have experience with Gallery widget, but I'am using a lot ListView with images. According to your problem, and link to Google issue, they still haven't fix this problem.

So, there is solutio with nice library (and examples within it), which solve cache/ajax problems, and much more.

Link to library

or, more concrete, link to image examples

If you download their examples, you will find how they implemented gallery with Gallery widget, using their AQuery utility class in

com.androidquery.test.image.ImageLoadingGalleryActivity class.

Snippet from code:

    final List<Photo> entries;// here only to show what enteries are...

    listAq = new AQuery(this); //define as Action class member, here only to show what it is

    ArrayAdapter<Photo> aa = new ArrayAdapter<Photo>(this, R.layout.gallery_item, entries){

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

            if(convertView == null){
                convertView = getLayoutInflater().inflate(R.layout.gallery_item, parent, false);
            }

            Photo photo = getItem(position);

            AQuery aq = listAq.recycle(convertView);

            aq.id(R.id.name).text(photo.title);

            String tbUrl = photo.tb;

            if(!aq.shouldDelay(position, convertView, parent, tbUrl)){
                aq.id(R.id.tb).image(tbUrl);
                aq.id(R.id.text).text(photo.title).gone();
            }else{
                aq.id(R.id.tb).clear();
                aq.id(R.id.text).text(photo.title).visible();
            }


            return convertView;

        }


    };

    aq.id(R.id.gallery).adapter(aa);

Where Photo is just POJO object (fetched from remote):

class Photo {
    String tb;
    String url;
    String title;
    String author;
}

R.id.gallery refers to

 <Gallery
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="200dip" />

And R.layout.gallery_item refers to:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="100dip"
        android:layout_height="75dip" >

        <ProgressBar
            android:id="@+id/progress"
            android:layout_width="15dip"
            android:layout_height="15dip"
            android:layout_centerInParent="true" />

        <ImageView
            android:id="@+id/tb"
            style="@style/GalleryItem"
            android:layout_width="100dip"
            android:layout_height="75dip" />

        <TextView
            android:id="@+id/text"
            android:layout_width="100dip"
            android:layout_height="75dip"
            android:gravity="center"
            android:maxLines="4"
            android:padding="15dip"
            android:text="Dummy TextDummy TextDummy TextDummy TextDummy Text"
            android:textColor="#FFFFFFFF"
            android:textSize="8sp" />

    </RelativeLayout>

Hope you'll find this library useful in solving your problem.

Macfarlane

Answer 3

I've gotten around this by using a custom cache as dskinner suggests.

I pre-calculate (screenwidth/minwidth of item) the max # of items that can be show in the gallery on the screen at one time and add a few more (the gallery will need extra to show items on the left and right as you scroll thru it). I create an array of this size - the views get created as requested and placed in the cache. Use position % cachesize to figure out which cached view to return when getView is called.

Mcinnis

a little code sample, or a link to some code/gist would help a lot here. – Partisan