Question

I have a gridview I created using this tutorial GridView Android, which works just fine. Now I’d like to overlay an image onto the item of the gridview if say the item is clicked. I’m not sure how to do this, whether I use another gridview and merge them or just have lots of image views :s. Just to clarify the question: How do I overlay onto gridview items? Thanks in advance!

Answer 1

So there are a few ways you might achieve this but possibly the most flexible would be to use a custom view in the getView method.

Add a LayoutInflater to your ImageAdapter class:

private LayoutInflater mInflater;

Initialize it in the constructor:

public ImageAdapter(Context c) {
    mContext = c;

    // Initialise the inflater
    mInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

This is used to inflate an xml view such as this:

<RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <ImageView
      android:id="@+id/mainImage"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
    />
    <ImageView
      android:id="@+id/overlayImage"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:visibility="gone"
    />
</RelativeLayout>

Inflate this view in the ImageAdapter class getView method

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

    // RelativeLayout as used in the xml view
    RelativeLayout customView;

    if (convertView == null) {  // if it's not recycled, inflate
        customView = (RelativeLayout) mInflater.inflate(R.layout.customview, null);
    } else {
        imageView = (RelativeLayout) convertView;
    }

    // Get the mainImageView from the parent
    ImageView mainImage = (ImageView) customView.findViewById(R.id.mainImage);
    imageView.setImageResource(mThumbIds[position]);

    // Overlay view
    ImageView overlayImage = (ImageView) customView.findViewById(R.id.overlayImage);
    overlayImage.setImageResource(mOverlayThumbIds[position]); // new array containing overlay references

    return customView;
}

Then show the overlay image on click

gridview.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View v, int position, long id) {

        ImageView overlayImage = (ImageView) v.findViewById(R.id.overlayImage);
        overlayImage.setVisibility(View.VISIBLE);

    }
});

This is a very basic example but hopefully you will find the approach useful.