ListView Image Click changes other images in the list when scrolled

Question

I have a ListView which has an image and a text in the relative layout and two texts in the linear layout.. i have set the image to change to text when its clicked in the ListView.. but the problem is when the list view is scrolled the other images also changes to text view..

i read in other posts that its wrong to setOnClickListener on a GetView, we can use setOnItemClickListener instead, but i dont know how to implement it? please help..

below is my Adapter class

public class WordAdapter extends ArrayAdapter<Word>  {

/** Resource ID for the background color for this list of words */
private int mColorResourceId;

/**
 * Create a new {@link WordAdapter} object.
 *
 * @param context is the current context (i.e. Activity) that the adapter is being created in.
 * @param words is the list of {@link Word}s to be displayed.
 * @param colorResourceId is the resource ID for the background color for this list of words
 */
public WordAdapter(Context context, ArrayList<Word> words, int colorResourceId) {
    super(context, 0, words);
    mColorResourceId = colorResourceId;

}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // Check if an existing view is being reused, otherwise inflate the view
    View listItemView = convertView;
    if (listItemView == null) {
        listItemView = LayoutInflater.from(getContext()).inflate(
                R.layout.list_item, parent, false);

    }

    // Get the {@link Word} object located at this position in the list
    Word currentWord = getItem(position);

    // Find the TextView in the list_item.xml layout with the ID miwok_text_view.
    TextView miwokTextView = (TextView) listItemView.findViewById(R.id.miwok_text_view);
    // Get the Miwok translation from the currentWord object and set this text on
    // the Miwok TextView.
    miwokTextView.setText(currentWord.getMiwokTranslationId());

    // Find the TextView in the list_item.xml layout with the ID default_text_view.
    TextView defaultTextView = (TextView) listItemView.findViewById(R.id.default_text_view);
    // Get the default translation from the currentWord object and set this text on
    // the default TextView.
    defaultTextView.setText(currentWord.getDefaultTranslationId());

   final TextView onClickTextView = (TextView) listItemView.findViewById(R.id.miwok_text_view_on_click);

    onClickTextView.setText((currentWord.getTextOnClickId()));

    // Find the ImageView in the list_item.xml layout with the ID image.
    final ImageView imageView = (ImageView) listItemView.findViewById(R.id.image);
    // Check if an image is provided for this word or not
    if (currentWord.hasImage()) {
        // If an image is available, display the provided image based on the resource ID
        imageView.setImageResource(currentWord.getImageResourceId());
        // Make sure the view is visible
        imageView.setVisibility(View.VISIBLE);
    } else {
        // Otherwise hide the ImageView (set visibility to GONE)
        imageView.setVisibility(View.GONE);
    }

   // Set the theme color for the list item
    View textContainer = listItemView.findViewById(R.id.text_container);
    // Find the color that the resource ID maps to
    int color = ContextCompat.getColor(getContext(), mColorResourceId);
    // Set the background color of the text container View
    textContainer.setBackgroundColor(color);

    // Return the whole list item layout (containing 2 TextViews) so that it can be shown in
    // the ListView.

    // ImageView imageView = (ImageView) listItemView.findViewById(R.id.list_item);

    imageView.setTag(new Integer(position));
    imageView.setOnClickListener(new ImageView.OnClickListener() {

        Boolean flag =false;

        @Override
        public void onClick(View view) {

               // Toast.makeText(getContext(), "ImageView clicked for the row = "+view.getTag().toString(), Toast.LENGTH_SHORT).show();
             if(flag){

                 imageView.setAlpha(255);
                 onClickTextView.setVisibility(View.INVISIBLE);
                 flag = false;
             }else{
                 imageView.setAlpha(0);
                 onClickTextView.setVisibility(View.VISIBLE);
                 flag =true;
                }

            }

    });

    return listItemView;
}
}

Answer 1

try to change this :

imageView.setTag(new Integer(position));
imageView.setOnClickListener(new ImageView.OnClickListener() {

    Boolean flag =false;

    @Override
    public void onClick(View view) {

           // Toast.makeText(getContext(), "ImageView clicked for the row = "+view.getTag().toString(), Toast.LENGTH_SHORT).show();
         if(flag){

             imageView.setAlpha(255);
             onClickTextView.setVisibility(View.INVISIBLE);
             flag = false;
         }else{
             imageView.setAlpha(0);
             onClickTextView.setVisibility(View.VISIBLE);
             flag =true;
            }

        }

});

to:

imageView.setOnClickListener(new ImageView.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(currentWord.isFlag){
                currentWord.isFlag = false;
            }else{
                currentWord.isFlag = true;
            }
            notifyDataSetChanged();
        }

    });

    if(currentWord.isFlag)
    {

        imageView.setAlpha(0);
        onClickTextView.setVisibility(View.VISIBLE);
    }
    else
    {
        imageView.setAlpha(255);
        onClickTextView.setVisibility(View.INVISIBLE);
    }

create an isFlag variable in your Word class
public boolean isFlag = false;

and whenever you are initializing your list of Word type then set the value of setFlag(false);

and this one is happening with you because listview getting refresh items always during scrolling , so you have to use flag also in your list