Dynamically change the image color layout in a row in a GridView

Question

How to change the color of the image (not the background!) When I select item in the layout of a GridView? I overloaded method onItemClick(), but does not quite know how to refer to the address concrete element (the one selected).

Your existing code, row.xml:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="5dp" >

        <ImageView
            android:id="@+id/rowImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:src="@drawable/ic_launcher" >
        </ImageView>

        <TextView
            android:id="@+id/rowText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:textStyle="bold" >
        </TextView>
</LinearLayout>

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="150dp"
    android:gravity="center"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth" >

</GridView>

ImageAdapter.class:

package com.example.exchangemanager;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class ImageAdapter extends ArrayAdapter<Item> {

    Context context;
    int layoutResourceId;
    ArrayList<Item> data = new ArrayList<Item>();

    public ImageAdapter(Context context, int layoutResourceId,
            ArrayList<Item> data) {
        super(context, layoutResourceId, data);

        this.context = context;
        this.layoutResourceId = layoutResourceId;
        this.data = data;
    }

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

        if (row == null) {
            LayoutInflater inflater = ((Activity) context).getLayoutInflater();
            row = inflater.inflate(layoutResourceId, parent, false);

            holder = new RecordHolder();
            holder.textView = (TextView) row.findViewById(R.id.rowText);
            holder.imageView = (ImageView) row.findViewById(R.id.rowImage);
            row.setTag(holder);
        } else {
            holder = (RecordHolder) row.getTag();
        }

        Item item = data.get(position);
        holder.textView.setText(item.getTitle());
        holder.imageView.setImageBitmap(item.getImage());
            // My previous attempts
        holder.imageView.setColorFilter(Color.GRAY);
        return row;
    }

    static class RecordHolder {
        TextView textView;
        ImageView imageView;
    }
}

MainActivity.class, overloaded onItemClick() method:

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

As you can see in the file ImageAdapter.class, I can do painting over the image on the color, but I can not change the color back, when selected.

Answer 1

UPDATE ANSWER (AGAIN):

First, you need to create an interface: right click on your package project -> New -> Interface (for ex. name it as OnMyGridTouchListener)
Second, add a public method on our Interface:

public interface OnMyGridTouchListener {
    public void onMyGridTouch(ImageView imgView, int action);
}

Third, use the interface inside your adapter. It should like this:

private OnMyGridTouchListener myGridTouchListener;
...
public ImageAdapter(Context context, int layoutResourceId, ArrayList<Item> data) {
    ...
    myGridTouchListener = (OnMyGridTouchListener) context;
    ...
}

...
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ...
    holder.imageView.setImageBitmap(item.getImage());

    // here is our interface should be used
    final ImageView finalImageView = holder.imageView;
    row.setOnTouchListener( new OnTouchListener(){

        @Override
        public boolean onTouch(View v, MotionEvent event){
            myGridTouchListener.onMyGridTouch(finalImageView, event.getAction());
            return true;
        }

    }

    return row;
}

Next, go to your activity and implement to OnMyGridTouchListener, should like this:

public class MyActivity extends Activity implements OnMyGridTouchListener {
    ...
    ...

    @Override
    public void onMyGridTouch(ImageView imgView, int action){

        if(action==MotionEvent.ACTION_DOWN){
            imgView.setColorFilter(Color.WHAT_COLOR_YOU_WANT);
        }
        else if(action==MotionEvent.ACTION_UP){
            imgView.setColorFilter(Color.WHAT_COLOR_YOU_WANT);
        }

    }

Last, its DONE!