android List item click affects other rows in the list View

Question

I have list item like this

Unlock image

and when i click on the lock image for this list item the image will be converted into this

Locked image

it's working and changes the image of the current list item as expected but the problem is it is also change the image of other rows this is due to recycling the list view.. https://stackoverflow.com/a/14108676/5989049 so is there any thing i can do so that the item click on the image only affect the row that was clicked.

this my code for the adapter

public class WordAdapter extends ArrayAdapter<Word> {

public WordAdapter(Activity context, ArrayList<Word> words) {
    super(context, 0, words);
}

@Override
public View getView(final int position, @Nullable final View convertView, @NonNull final ViewGroup parent) {
    View listItem = convertView;
    if (listItem == null) {
        listItem = LayoutInflater.from(getContext()).inflate(
                R.layout.list_item, parent, false);
    }
    final Word word = getItem(position);
    String englishWord = null;
    if (word != null) {
        englishWord = word.getEnglishWord();
    }
    String arabicWord = null;
    if (word != null) {
        arabicWord = word.getArabicWord();
    }

    TextView englishText = listItem.findViewById(R.id.english_text_view);
    TextView arabicText = listItem.findViewById(R.id.arabic_text_view);
    ImageView mUnLocked = listItem.findViewById(R.id.unlock);
    mUnLocked.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (!word.isLocked()) {
                word.setLocked(true);
                ImageView icon = (ImageView) view;
                icon.setImageResource(R.drawable.ic_lock_outline_black_24dp);
                icon.setVisibility(View.VISIBLE);
            } else {
                ImageView icon = (ImageView) view;
                icon.setImageResource(R.drawable.ic_lock_open_black_24dp);
                icon.setVisibility(View.VISIBLE);
            }

        }
    });
    Typeface enTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/fontfamily.ttf");
    Typeface arTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/ShahdRegular.ttf");
    englishText.setTypeface(enTypeface);
    arabicText.setTypeface(arTypeface);
    englishText.setText(englishWord);
    arabicText.setText(arabicWord);
    return listItem;
}

}

Udit · Answer 1 · 2018-07-21T12:58:24.040

You will need to keep a flag 'isLocked' in your list adapter model. For example, in the adapter you should be having a list of data, let say of class A.

Add a boolean isLocked in class A.

now in the list, toggle the value of this flag in the onClick listener, and based on that choose the correct image resource.

EDIT: Based on your adapter:

    public class WordAdapter extends ArrayAdapter<Word> {

    public WordAdapter(Activity context, ArrayList<Word> words) {
        super(context, 0, words);
    }

    @Override
    public View getView(final int position, @Nullable final View convertView, @NonNull final ViewGroup parent) {
        View listItem = convertView;
        if (listItem == null) {
            listItem = LayoutInflater.from(getContext()).inflate(
                    R.layout.list_item, parent, false);
        }
        final Word word = getItem(position);
        String englishWord = null;
        if (word != null) {
            englishWord = word.getEnglishWord();
        }
        String arabicWord = null;
        if (word != null) {
            arabicWord = word.getArabicWord();
        }

        TextView englishText = listItem.findViewById(R.id.english_text_view);
        TextView arabicText = listItem.findViewById(R.id.arabic_text_view);
        ImageView mUnLocked = listItem.findViewById(R.id.unlock);

if (!word.isLocked()) {
                    word.setLocked(true);
                    ImageView icon = (ImageView) view;
                    icon.setImageResource(R.drawable.ic_lock_outline_black_24dp);
                    icon.setVisibility(View.VISIBLE);
                } else {
                    ImageView icon = (ImageView) view;
                    icon.setImageResource(R.drawable.ic_lock_open_black_24dp);
                    icon.setVisibility(View.VISIBLE);
                }

        mUnLocked.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (!word.isLocked()) {
                    word.setLocked(true);
                    ImageView icon = (ImageView) view;
                    icon.setImageResource(R.drawable.ic_lock_outline_black_24dp);
                    icon.setVisibility(View.VISIBLE);
                } else {
                    ImageView icon = (ImageView) view;
                    icon.setImageResource(R.drawable.ic_lock_open_black_24dp);
                    icon.setVisibility(View.VISIBLE);
                }

            }
        });
        Typeface enTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/fontfamily.ttf");
        Typeface arTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/ShahdRegular.ttf");
        englishText.setTypeface(enTypeface);
        arabicText.setTypeface(arTypeface);
        englishText.setText(englishWord);
        arabicText.setText(arabicWord);
        return listItem;
    }
    }

it also changes multiple rows .. if you click on item 0 > it will change 0 and 8 and 16 and 24 and so on until your list is finished — Ahmed Al Tantawy, Jul 21 '18 at 12:11
you must be missing something. share your adapter code for more insights — Udit, Jul 21 '18 at 12:17
i modified the post above this is after adding the boolean value — Ahmed Al Tantawy, Jul 21 '18 at 12:46
still not working .. i Know that's because recycling issue .. i will try something else — Ahmed Al Tantawy, Jul 21 '18 at 15:39

android List item click affects other rows in the list View

1 Answers1