Display One more Image on top of that clicked grid item

Question

I have grid view with 4 items,now onlclick of each grid item i need to display one more image on top of that clicked grid item.

How to acheive this?

This is my adapter class get View:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder view;
    LayoutInflater inflator = activity.getLayoutInflater();

    GridView.LayoutParams params = null;
    if (convertView == null) {
    view = new ViewHolder();
    convertView = inflator.inflate(R.layout.tile_row, null);

    view.textView = (TextView) convertView.findViewById(R.id.title);
    view.imageView = (ImageView) convertView.findViewById(R.id.icons);
    convertView.setTag(view);

    params = new GridView.LayoutParams(Width, Height);
    convertView.setLayoutParams(params);
    } else {
    view = (ViewHolder) convertView.getTag();
    }
    // set image view parameters
    setImageParamaeters(view.imageView);

    view.textView.setText(adapterNames.get(position));
    view.imageView.setImageResource(adapterIcondIds.get(position));

    if (params != null) {
    convertView.setLayoutParams(params);
    }

    convertView.setId(position);
    convertView.setOnClickListener(onClickListeners.get(position));

    return convertView;
}

Answer 1

You can do this by positioning a popup window on top of the grid item. In order to find the exact on screen position of the grid Item you can use the following code

Rect loc = new Rect();
int[] location = new int[2];
view.getLocationOnScreen(location);
loc.left = location[0];
loc.top = location[1];
loc.right = loc.left + view.getWidth();
loc.bottom = loc.top + view.getHeight();

The variable loc holds the exact on screen location of the view that was clicked, this is nothing but the 2nd paramter of the method

@Override
public void onItemClick(AdapterView<?> parent, View view,
        int position, long id) {
    // TODO Auto-generated method stub  
}

With this information you can easily achieve what you need. Best is to calculate the center of the view and align the center of the popup to the center of the clicked view.

Note:You will need adjustments for showing the pop up in case part of the view is visible.

Edited: Since i did not get your question, i am adding an image to bring more clarity.

I have already provided the code for case 1. For case 2 you will need a modified layout where you can show the overlay images on click of the grid item

Edited: Implementing case 2

Modified adapter code, moved around some variables for optimization

public CustomAdapter(Activity activity, ...){
    inflator = activity.getLayoutInflater();
...
}
LayoutInflater inflator;

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder view;

    if (convertView == null) {
        view = new ViewHolder();
        convertView = inflator.inflate(R.layout.tile_row, null);

        view.textView = (TextView) convertView.findViewById(R.id.title);
        view.imageView = (ImageView) convertView.findViewById(R.id.icons);
        view.clickedImage = (ImageView) convertView.findViewById(R.id.clickedImage);
        convertView.setTag(view);
    } else {
        view = (ViewHolder) convertView.getTag();
    }
    // set image view parameters
    view.textView.setText(adapterNames.get(position));
    view.imageView.setImageResource(adapterIcondIds.get(position));
    //add a int variable to the view holder
    view.position = position;
    if(position != clickedPosition){
        view.clickedImage.setVisibility(View.GONE);
    }
    convertView.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            ViewHolder holder = (ViewHolder)v.getTag();
            clickedPosition = holder.position;
            holder.clickedImage.setVisibility(View.VISIBLE);
            //you can also set the resource of the imageview here.
            notifyDataSetChanged();
        }
    });

    return convertView;
}
//this is used for resetting the previous view when a new view is clicked
int clickedPosition = -1;

To preserve the clicked state of an item in the grid view, i store the clicked item position of the grid. Now in onClick i change visibility of the clicked image(which was in GONE state), update the variable clickedPosition and simply call notifyDataSetChanged. This tells that the adapter that the dataset has changed and getView for all the visible grid items will be called. So, if you click item 1 initially, and then click item 3 then you will notice that item 1 has been reset when item 3 was clicked.

XML title_row.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="200dp" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/droid_logo_black"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/clickedImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/login_help_logo" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Title"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Answer 2

int id = getResources().getIdentifier("yourpackagename:drawable/" + StringGenerated, null,     null);

Try something of this sort and you'll get the id. Try changing the image using

imageview.setImageResource(id);

Good Luck!

Answer 3

onlclick of each grid item i need to display one more image on top of that clicked grid item.

I think you have to create custom Gird View. and append ImageView Dynamically as per the needs.

setVisibilty(View.Visible) when you want to show and setVisibilty(View.Hide) when you don't want to show.

Answer 4

In the onClickListener of the element, call the imageView and load the image dynamically. Or predefine the image resource, and call the Imageview with the id of the new image.