GridView OnItemClickListener - how to grayscale other items

Question

I have grid view where I am displaying some pictures which were download using Picasso library. My aim is: When I click on some picture the others should get grayscale. But I don't know how to achieve this.

My GridViewAdapter:

public class GridViewAvatarAdapter extends ArrayAdapter<AvatarItem> {

    private Context mContext;
    private int layoutResourceId;
    private ArrayList<AvatarItem> mGridData = new ArrayList<AvatarItem>();

    public GridViewAvatarAdapter(Context mContext, int layoutResourceId, ArrayList<AvatarItem> mGridData) {
        super(mContext, layoutResourceId, mGridData);
        this.layoutResourceId = layoutResourceId;
        this.mContext = mContext;
        this.mGridData = mGridData;
    }



    public void setGridData(ArrayList<AvatarItem> mGridData) {
        this.mGridData = mGridData;
        notifyDataSetChanged();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = convertView;
        final ViewHolder holder;

        if (row == null) {
            LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
            row = inflater.inflate(layoutResourceId, parent, false);
            holder = new ViewHolder();
            holder.imageView = (ImageView) row.findViewById(R.id.grid_item_avatar_image);
            row.setTag(holder);
        } else {
            holder = (ViewHolder) row.getTag();
        }

        AvatarItem item = mGridData.get(position);
        Picasso.with(mContext).load(item.getAvatarURL()).transform(new CircleTransform()).into(holder.imageView);

        return row;
    }

    static class ViewHolder {
        ImageView imageView;
    }


}

And I know I should use:

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

            //Get item at position
            AvatarItem item = (AvatarItem) parent.getItemAtPosition(position);


        }
    });

in my GridView fragment. I also know how to make imageView grayscale, but I don't know to change ImageView inside mGridView.setOnItemClickListener() (which is in gridView fragment)

Answer 1

Another option where that logic isn't baked into the adapter is this:

mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            int numberOfViews = parent.getCount();
            for(int i = 0; i < numberOfViews; i++) {
                //If i is not the image you clicked
                if(i != position) { 
                    AvatarItem item = (AvatarItem) parent.getItemAtPosition(i);
                    //Run whatever function that converts to greyscale
                    item.toGreyScale(); 
                }
            }
            //Get item at position
            AvatarItem item = (AvatarItem) parent.getItemAtPosition(position);

            //Run whatever function you want to on the clicked item
            item.doSomething(); 

        }
});

Answer 2

If your trying to set eveything but the one you clicked i would do something like this

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

            //Get item at position
            gridViewadapter.itemClicked(position);

        }
    });

then your adapter would be this

public class GridViewAvatarAdapter extends ArrayAdapter<AvatarItem> {

    private Context mContext;
    private int layoutResourceId;
    private int currentSelectedItem = -1;
    private ArrayList<AvatarItem> mGridData = new ArrayList<AvatarItem>();

    public GridViewAvatarAdapter(Context mContext, int layoutResourceId, ArrayList<AvatarItem> mGridData) {
        super(mContext, layoutResourceId, mGridData);
        this.layoutResourceId = layoutResourceId;
        this.mContext = mContext;
        this.mGridData = mGridData;
    }

    public void itemClicked(int position)
    {
         currentSelectedItem = position;
         notifyDataSetChanged();
    }


    public void setGridData(ArrayList<AvatarItem> mGridData) {
        this.mGridData = mGridData;
        notifyDataSetChanged();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = convertView;
        final ViewHolder holder;

        if (row == null) {
            LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
            row = inflater.inflate(layoutResourceId, parent, false);
            holder = new ViewHolder();
            holder.imageView = (ImageView) row.findViewById(R.id.grid_item_avatar_image);
            row.setTag(holder);
        } else {
            holder = (ViewHolder) row.getTag();
        }

        AvatarItem item = mGridData.get(position);
        Picasso.with(mContext).load(item.getAvatarURL()).transform(new CircleTransform()).into(holder.imageView);

        if(currentSelectedItem != -1 && currentSelectedItem != position)
        {
          //MAKE IMAGE GRAYSCALE HERE
        }
        else
        {
          //MAKE IMAGE COLOR HERE
        }
        return row;
    }

    static class ViewHolder {
        ImageView imageView;
    }


}

Then you can call itemClicked with -1 when ever you want to reset them all back to color