How do you display 2 overlapping view in a gridview?

Question

I'm working on displaying images to the screen in a Gridview and currently am using an ImageAdapter to load the downloadeded images into the Gridview. If tapped, I'm drawing another image on top of the selected image to signify selection, the problem is I have to add them as children via the RelaytiveLayout, so when I scroll the images stay where they were created and don't follow along with the scroll. So I then tried creating a custom view with 2 imageviews overlapping, setting one hidden and the other was filled by the Adapter. When selected, the plan was to unhide the overlapping image. When loading from the adapter, my custom view(which actually had to extend ViewGroup in order to contain the two imageviews, as Views can't add children) would load a frame that was selectable, but completely transparent with neither image displaying. I know it was selectable, because a blue box would appear in the dimensions I set when I touched the screen. To display the custom view, I was loading my it in the publc getView() function. Am I going about this the wrong way? I've attempted quite a bit to see if anyone else had done something like this, but all I could find was tutorials for drawing overlapping images on a RelativeLayout or loading images into a GridView, but not both. My apologies, I'm new to Android.

Answer 1

If I am not wrong, what you need is selected state for a view in gridView when you tap. I don't think drawing another image on top of existing is necessary. You can change the existing view background itself using viewHolder pattern as you are using custom adapter. Have a look at following link. You may get some idea how to do.

Dynamically hiding Views in Custom Listview in Android

Answer 2

ListViews do not retain a visual indication of focus (or selection) while in touch mode. You will only see this when you use the hardware keyboard or controls to navigate your UI.

See the Google Touch Mode Android Blog article for more details.

So, if you are only using touch mode, you will never see focus or selection on ListViews.

What you are doing will work fine with few modifications.

• Place the ImageView(child) inside a container(parent like RelativeLayout,etc).
• Set some padding to the parent so that it's background is visible.
• When clicked change the parents background of the clicked item(in the onClick() method of the OnClickListener of the GridView).
• call notifyDataSetChanged() on the adapter (to redraw the currently visible items)

here is a sample code for this:

    grid.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick (AdapterView<?> parent,
                    View v, int position, long Id)
            {
                    highlighted = position;    //highlighted is a global variable
                    //container is the root view of the list row layout
                    LinearLayout container = (LinearLayout)v.findViewById(R.id.container);
                    container.setBackgroundResource(R.drawable.highlighted_backg);
                    mGridAdapter.notifyDataSetChanged();

            }
   });

Code for getView() method:

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

    if(convertView == null) {
        convertView = inflater.inflate(R.layout.row_item, null);
        holder = new ViewHolder();
        holder.itemName1 = (TextView)convertView.findViewById(R.id.text1);
        ...
        holder.container = (LineaLayout)convertView.findViewById(R.id.container);
        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }

    if(MainActivity.highlighted == position) {
        holder.container.setBackgroundResource(R.drawable.highlighted_backg);
    }else {
        holder.foodItemCol1.setBackgroundResource(R.drawable.normal_back);
    }

    return convertView;
}

Answer 3

ImageView iv = (ImageView)v.findViewById(R.id.grid_item_image);
iv.setBackgroundResource(imageIDs[4]);
iv.setImageResource(imageIDs[2]); 

Answer 4

You can set color filter for the selected imageview, for example imageView.setColorFilter(Color.parse("#77000000"));(add it in your onClick method of the ImageView's onClickListener), this will add a semitransparent gray layer over the selected ImageView to identified it was selected.