GridView with CustomLayout Items and State

Question

I'm working on a layout that needs to display a dynamic list of items. Each item has a defined UUID, a Name(banner text), an Image URL and a boolean to indicate if it's selected - I've also created a POJO to hold these. I created a custom layout to put the items in a grid view, two icons with banner text on it. It looks like this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
  <RelativeLayout
    android:id="@+id/ItemLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <ImageView
        android:id="@+id/ItemImage"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:background="@android:color/transparent" />
    <ImageView
        android:id="@+id/ItemOverlayImage"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:background="@android:color/transparent" />
    <TextView
        android:id="@+id/ItemTextBanner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="#BF000000"
        android:gravity="center"
        android:textStyle="bold" />
  </RelativeLayout>
</FrameLayout>

I've created the Custom Adapter and the activity as well and I'm having no issue getting all items read in, the image's downloaded and encoded to bitmaps and the text banner being set. The problem is I want the "selected" state and image to change if the item is clicked.

I know I can add the GridView.setOnItemOnClickListener and inside I know which item as been selected as well as the parent view it comes from, but I'm not sure how to get it's "selected" state. This link uses state from a static list in the Adapter and is what I've modeled after. I added the following method and called it from the GridView.setOnItemOnClickListener.

public void itemSelected(View parent, int position)
{
    if(items.get(position).isSelected())
    {
        ImageView interestSelected = (ImageView)parent.findViewById(R.id.ItemOverlayImage);
        interestSelected.setImageResource(0);
    }
    else
    {
        ImageView interestSelected = (ImageView)parent.findViewById(R.id.ItemOverlayImage);
        interestSelected.setImageResource(R.drawable.overlay);          
    }
}

The first problem is obvious, I'm not saving the state to my items array, but that is an easy fix. The real problem is only the first item is getting the overlay. So how do I alter the R.id.ItemOverlayImage for the item in the GridView selected and not just the first one? Or am I going about this totally wrong?

score 1 · Accepted Answer · answered Aug 23 '12 at 05:44

Just some points regarding your code:

You're probably getting only the first item with an overlay because you search with findViewById on the parent, the GridView and not the row view view, so findViewById will return the first ImageView that it finds(which is on the first visible row). In order to show that overlay you have some options on how to do it depending on the code that you used in the adapter's getView methodif you want to only show one item with an overlay at the time(for example, when you click one item, the previous one that was clicked(if any) will deselect) or if you have the options to toggle the item(click-> overlay, another click -> without overlay). Without knowing the information above this is how I would do it:

public void onItemClick (AdapterView<?> parent, View view, int position, long id) {
     ImageView overlay = (ImageView) view.findViewById(R.id.ItemOverlayImage);
     if (!items.get(position).isSelected()) { // the item doesn't have an overlay
         overlay.setImageResource(R.drawable.overlay); // set the overlay
         items.setSelected(true); // set to true so the adapter knows it
     } else { // the item has the overlay so we remove it
         overlay.setImageResource(0);
         items.setSelected(false); set to false so the adapter knows it
     }
}

So long as you use in the getView method the isSelected to set or not set the overlay you'll be ok.

Also you should remove the FrameLayout that wraps the RelativeLayout, as you don't do anything with it(?!?).

Thanks, as soon as I started using the view and not the parent it worked just fine. I also removed the FrameLayout and the overlay looked find as well. I thought a FrameLayout was going to be necessary to stack the images on top of each other. — Vinny K, Aug 23 '12 at 13:54
@Luksprog hey can you help me. i want to click event of image view and tow button of grid item . but don't know how ? — Chintan Khetiya, Dec 17 '12 at 07:04

GridView with CustomLayout Items and State

1 Answers1