How can I dynamically add images to a GridView?

Question

I have a GridView that is created based on an array of items. I need to add more images as the grid is scrolled to the bottom, but I'm not sure how to do that.

Now I do understand the following:

1. I have an adapter which parses the array and provides ImageIds to the class that will return the ImageViews
2. Somehow I have to change this array and let the adapter know about it, so my question is, how do I get a reference to this adapter?

This is my code:

package com.wm.grid;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListAdapter;
import android.widget.Toast;

public class GridActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final Integer[] mThumbIds12 = {
                R.drawable.sample_2, R.drawable.sample_3,R.drawable.s1,
                R.drawable.sample_4, R.drawable.sample_5,
                R.drawable.sample_6, R.drawable.sample_7,
                R.drawable.sample_0, R.drawable.sample_1,
                R.drawable.sample_2, R.drawable.sample_3,
                R.drawable.sample_4, R.drawable.sample_5,
                R.drawable.sample_6, R.drawable.sample_7,
                R.drawable.sample_0, R.drawable.sample_1,
                R.drawable.sample_2, R.drawable.sample_3,
                R.drawable.sample_4, R.drawable.sample_5,
                R.drawable.sample_6, R.drawable.sample_7
    };
    final Integer[] mThumbIds1 = { 
            R.drawable.sample_2, R.drawable.sample_3,R.drawable.s1,
            R.drawable.sample_2, R.drawable.sample_3,R.drawable.s1,
            R.drawable.sample_2, R.drawable.sample_3,R.drawable.s1,
            R.drawable.sample_2, R.drawable.sample_3,R.drawable.s1,
    };
    final GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this,mThumbIds12));
    gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            Toast.makeText(GridActivity.this, "" + position, Toast.LENGTH_SHORT).show();

        }
    });
    gridview.setOnScrollListener(new OnScrollListener() {
        public void onScrollStateChanged(AbsListView view, int scrollState) {
            switch (scrollState) {
            case OnScrollListener.SCROLL_STATE_IDLE:
                //List is idle
                break;
            case OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
                //Toast.makeText(GridActivity.this, "X", Toast.LENGTH_SHORT).show();
                break;
            case OnScrollListener.SCROLL_STATE_FLING:
                //Toast.makeText(GridActivity.this, "Z", Toast.LENGTH_SHORT).show();
                break;
            }   
        }

        public void onScroll(AbsListView view, int firstVisibleItem,
                int visibleItemCount, int totalItemCount) {
            if(firstVisibleItem + visibleItemCount == totalItemCount){
                Toast.makeText(GridActivity.this, "BOTTOM", Toast.LENGTH_SHORT).show();

            }
            //Toast.makeText(GridActivity.this, "TOP", Toast.LENGTH_SHORT).show();  
        }
    });

}
}

Now there is some redundant code, but this is my testing project. All I know is that the updating of the adapter has to happen when firstVisibleItem + visibleItemCount == totalItemCount (i.e. when the GridView has reached the bottom).

This is my ImageAdapter (based on the Android dev site)

package com.wm.grid;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

import com.wm.grid.R;

public class ImageAdapter extends BaseAdapter {
   private Context mContext;
   private Integer[] mThumbIds;
    public ImageAdapter(Context c,Integer[] m) {
        mContext = c;
        mThumbIds = m;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {  // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(150, 150));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }
    public Integer[] AddItems(Integer[] a){
        final Integer[] aThumbIds;
        final int i;
        aThumbIds = a;
        Integer[] a2 = new Integer[mThumbIds.length + aThumbIds.length];
        System.arraycopy(mThumbIds, 0, a2, 0, mThumbIds.length);
        System.arraycopy(aThumbIds, 0, a2, mThumbIds.length, aThumbIds.length);
        return mThumbIds;
    }
}

image.xml

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/grid_item_image"
      android:layout_width="50dp"
      android:layout_height="50dp"
      android:src="@drawable/s1"
      >
</ImageView>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/layout1"
>
<LinearLayout
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_weight="1">

<TextView
android:id="@+id/tv1"
android:layout_width="fill_parent"
android:layout_height="40pt"
android:text="row three"
android:textSize="15pt" />

</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<GridView  
android:id="@+id/gridview"
android:layout_width="fill_parent" 
android:layout_height="fill_parent"
android:columnWidth="150dp"
android:numColumns="auto_fit"
android:verticalSpacing="2dp"
android:horizontalSpacing="2dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
</LinearLayout>
</LinearLayout>

How should I approach this?

Answer 1

You can get reference to the adapter backing the GridView by .getAdapter(). When the user scrolled down, get this adapter, add the new images (I think you should use an ArrayList instead of simple arrays so you can easily append more data in the ImageAdapter class), and call .notifyDatasetChanged() on the now modified adapter, so it'll load in the new data.