Populating a GridView with ImageViews dynamically/programmatically using a ImageAdapter

Question

I try to develop an Android App which allows the user to fetch data from flickr and show it in a GridView (with some nice 3D-Animation). After some adventures i got it almost running, but now I'm stuck.

---

Here's the problem:

I got a UI Thread "LoadPhotosTask" which gets the pictures from flickr, just like the open source application photostream. In the method onProgressUpdate(LoadedPhoto... value) of that subclass I call addPhoto(). Until now everythings fine - I got some nice Bitmap and Flickr.photo data with all the information I need.

        @Override
    public void onProgressUpdate(LoadedPhoto... value) {

        addPhoto(value);
    }

On the other hand I have got a GridView. Now I want to fill it with the Photos. It has got an adapter called ImageAdapter (which extends BaseAdapter, see this tutorial). If I use an array inside the ImageAdapter class I can populate the GridView with some sample images. But if I want to populate it at runtime, I don't know what to do.

How do I have to set up the getView method in the ImageAdapter? I was trying to fill the array inside the ImageAdapter class with my values in addPhoto, but it doesn't display anything.

So first of all I was setting up the array with the amount of Photos i wanted to display in the grid like that (code is inside the ImageAdapter class):

// class variable
private ImageView[] mThumbIds;

    [...] 

    public void setupArray(int count) {
            this.mThumbIds = new ImageView[count];
        }

Then I call this method with the lenght of my photolist:

    final Flickr.PhotoList list = params[0];
        final int count = list.getCount();
        int helper = 0;
    imagead.setupArray(count);

Afterwards I call the getView method manually inside the addPhoto method:

private void addPhoto(LoadedPhoto... value) {

    ImageView image = (ImageView) mInflater.inflate(
    R.layout.grid_item_photo, null);
    image.setImageBitmap(value[0].mBitmap);
    image.setTag(value[0].mPhoto);

    imagead.setmThumbIds(image, value[0].mPosition);
    imagead.getView(value[0].mPosition, null, mpicturesGrid);

}

That is the getView method inside ImageAdapter:

    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(EDGE_LENGTH,
        EDGE_LENGTH));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setPadding(0, 0, 0, 0);
        imageView.setVisibility(View.VISIBLE);

    } else {

        imageView = (ImageView) convertView;
    }
    imageView.setImageDrawable(mThumbIds[position].getDrawable());
    imageView.setTag(mThumbIds[position].getTag());

    return imageView;

}

Answer 1

You are missing a key part.

When you use an Adapter you have a method called notifyDataSetChanged(). The logic you are missing there is the following:

When creating the Adapter for the GridView stay with a reference for the list that the adapter will use. Something like:

private ArrayList<Photo> mPhotos;
private BaseAdapter mAdapter;
private GridView mGridView;

onCreate:

/* other things here */

mAdapter = new MyAdapter(mPhotos);
mGridView.setAdapter(mAdapter);

What you addPhoto should do is the following:

mPhotos.add(photo);
mAdapter.notifyDataSetChanged();

That's it.