Color background cannot be set to single cell in GridView Android

Question

I have weird problem with setting color of single cell in GridView.

Problem description : My gridview constains a lot of single cells which contains simple text. I have set ViewHolder to maintain certain position for each cell. User can click on each item and then it should change its color to other. Changing color works, but it also changes color of cells which haven't been selected. This shows only when I scroll gridview up and down. Then background colors get mixed.

Here is my HintGridAdapter :

public View getView(final int position, View convertView, ViewGroup parent) {
        final ViewHolder viewHolder;

        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.chips_hint_grid, parent, false);

            viewHolder = new ViewHolder();
            viewHolder.hintTag = (TextView) convertView.findViewById(R.id.hint_tag);
            viewHolder.hintTag.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    viewHolder.hintTag.setBackgroundColor(context.getResources().getColor(R.color.color_accent));
                    chips.setText(chips.getText() + tags[position] + ", ");
                    chips.setChips();
                }
            });

            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        viewHolder.hintTag.setText(tags[position]);

        return convertView;
    }

    private static class ViewHolder {
        TextView hintTag;
    }

As you can see, I have set background color to specific hintTag.

And XMLs :

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/hint_tag"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:padding="8dp"
        android:text="@string/tag"
        android:background="@drawable/hint_button_selector"
        android:textColor="@color/grey_white_1000"
        android:textSize="12sp" />

</RelativeLayout>

and this is hint_button_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/color_accent" android:state_activated="true" />
    <item android:drawable="@color/color_accent" android:state_selected="true" />
    <item android:drawable="@color/color_accent" android:state_pressed="true" />
    <item android:drawable="@color/color_accent" android:state_checked="true" />
    <item android:drawable="@color/black_opacity_55" />
</selector>

Color change should work in selector but it doesn't.

Answer 1

Declare a arrayList of Int type.

ArrayList<Integer> clickedPos=new ArrayList<>();

Then update your getView as

     public View getView(final int position, View convertView, ViewGroup parent) {
            final ViewHolder viewHolder;

            if (convertView == null) {
                LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = inflater.inflate(R.layout.chips_hint_grid, parent, false);

                viewHolder = new ViewHolder();
                viewHolder.hintTag = (TextView) convertView.findViewById(R.id.hint_tag);

                convertView.setTag(viewHolder);
            } else {
                viewHolder = (ViewHolder) convertView.getTag();
            }

 viewHolder.hintTag.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                        if(!clickedPos.contains(position))
                            clickedPos.add(position);

                        viewHolder.hintTag.setBackgroundColor(context.getResources().getColor(R.color.color_accent));
                        chips.setText(chips.getText() + tags[position] + ", ");
                        chips.setChips();
                    }
                });

           if(clickedPos.contains(position))
            viewHolder.hintTag.setBackgroundColor(context.getResources().getColor(R.color.color_accent));
        else
            viewHolder.hintTag.setBackgroundColor(context.getResources().getColor(R.color.default_color));

            viewHolder.hintTag.setText(tags[position]);

            return convertView;
        }

You can add else condition to set background color default if clicked again.