Create a clickable image in a GridView in Android

Question

I have images displayed in a GridView as in this tutorial. I want to be able to click on a single image and do other events and I need to know what image was clicked.

Do I have to add imageView.onKeyDown(keyCode, event) in the ImageAdapter class? Here is the code as it currently exists:

@Override
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(85, 85));
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    imageView.setPadding(8, 8, 8, 8);
    //does this need imageView.onKeyDown(keyCode, event)?
  } 
  else {
    imageView = (ImageView) convertView;
  }

  imageView.setImageResource(mThumbIds[position]);
  return imageView;
}

How will it indicate what image was clicked? How do I create the proper handler?

Rozier

Answer 1

For a GridView you can use the setOnItemClickListener method to have an OnItemClickListener listener. That listener will give you a method that you must override with the signature

onItemClick(AdapterView<?> parent, View v, int position, long id)

where you get the position of the item in the grid that was clicked and the View that is inside the cell of the grid. Is that what you need?

Edieedification

See Jianhong's answer for more detailed code for this approach. – Wrens

Answer 2

I was able to get the position of the clicked image by making the position final and adding an onClick listener to the imageView. This logs the position of the image that was clicked.

@Override
public View getView(final 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(85, 85));
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    imageView.setPadding(8, 8, 8, 8);


    imageView.setOnClickListener(new View.OnClickListener() {

      @Override
      public void onClick(View view) {
        Log.d("onClick","position ["+position+"]");
      }

    });

  } 
  else {
    imageView = (ImageView) convertView;
  }

  imageView.setImageResource(mThumbIds[position]);
  return imageView;
}

Rozier

This is not the way you want to do things. Instead use Alejandros method. It's much cleaner and doesn't involve you changing the methods signature. – Joettejoey

Instead of this, See Jianhong's answer, which shows code for using gridView.setOnItemClickListener as described by Alejandro. (And mentions a bug if attempt to use the solution in this answer.) – Wrens

Answer 3

i tried the above mentioned method getView(final int position . . .) realized that the position got "reset" after 28 items and the position when back to 0 after the 28th item in the gridview.

i suspected the final keyword is creating problem and after removing it i was able to get the positions as expected.

Below is a sample code with the click event being called in the activity that is showcasing the gridview.

public class MainActivity extends Activity {

ArrayList<Integer> item_ids = new ArrayList<Integer>();

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    item_ids = //get your item ids method

    GridView gridview = (GridView) findViewById(R.id.grid_featured);
    gridview.setAdapter(new ImageAdapter(this));
    gridview.setOnItemClickListener(itemClickListener);

    footer = (Footer)findViewById(R.id.layoutFooter);
    footer.setActivity(this);
}

private OnItemClickListener itemClickListener = new OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
    Log.d(TAG,"Position Clicked ["+position+"] with item id ["+item_ids.get(position)+"]");
    }
};

}

Specialize