Change Image of image button in list view

Question

I checked on Stackoverflow, some people asked about changing the image, but non of the solutions helped me.

I have an ImageButton in listItem of list view. I want to change the image of ImageButton on clicking the ImageButton . It is displaying the toast but not changing the image.

Any help would be appreciated. Thanks in advance.

Below is my code...

public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View rowView = inflater.inflate(R.layout.fragment_contacts_item_list, null);
    contactName = (TextView)rowView.findViewById(R.id.name_contact);
    contactNumber = (TextView)rowView.findViewById(R.id.number_contact);
    contactPic = (ImageView)rowView.findViewById(R.id.quickContactBadge_contact);
    contactStatusButton = (ImageButton)rowView.findViewById(R.id.configuration_button);
    convertView = rowView;

    contactArray = new ArrayList<ContactModel>();
    int status = contactList.get(position).getButtonStatus();
    if(status == 0)
        contactStatusButton.setImageResource(R.drawable.grey);
    else if(status == 1) //toggle button is on
        contactStatusButton.setImageResource(R.drawable.green);
    else
        contactStatusButton.setImageResource(R.drawable.red);

    contactStatusButton.setVisibility(View.VISIBLE);
    contactStatusButton.setBackgroundColor(Color.TRANSPARENT);
    contactStatusButton.setTag(position);
    contactStatusButton.setOnClickListener(new View.OnClickListener(){

        @Override
        public void onClick(View view) {
            int position = (Integer) view.getTag();
            model.setName(contactList.get(position).getName());
            model.setNumber(contactList.get(position).getNumber());
            model.setPhoto(contactList.get(position).getPhoto());

            ContactAdapter.contactArray.add(contactList.get(position));
            contactStatusButton.setImageResource(R.drawable.green);
            Toast.makeText(context, "contact Number: " + contactList.get(position).getNumber(), Toast.LENGTH_SHORT).show();

        }
    });

    model = new ContactModel(contactList.get(position).getName(), contactList.get(position).getNumber(), 0);
    model.setName(contactList.get(position).getName());
    model.setNumber(contactList.get(position).getNumber());
    model.setButtonStatus(contactList.get(position).getButtonStatus());

    Bitmap pic = Utilities.getPhoto(contactList.get(position).getPhoto());
    model.setPhoto(contactList.get(position).getPhoto());

    contactName.setText(contactList.get(position).getName());
    contactNumber.setText(contactList.get(position).getNumber());
    contactPic.setImageBitmap(pic);

    return convertView;

}

Answer 1

Your views all seem to be defined as members of the enclosing class. That means they are constantly getting reassigned to different views whenever getView is called.

Instead, you should assign your views locally to the method, and make them final so that they can be referenced inside your click handler:

final View rowView = inflater.inflate(R.layout.fragment_contacts_item_list, null);
final TextView contactName = (TextView)rowView.findViewById(R.id.name_contact);
final TextView contactNumber = (TextView)rowView.findViewById(R.id.number_contact);
final ImageView contactPic = (ImageView)rowView.findViewById(R.id.quickContactBadge_contact);
final ImageButton contactStatusButton = (ImageButton)rowView.findViewById(R.id.configuration_button);

You're also making the same mistake with model in the click handler. You need to make sure you're using the model associated with the row, not whatever model happens to be left in the class member.

Also, you should note that you're not actually recycling the rows. You're creating a new row every time. This is defeating one of the main purposes of ListView, which is to not have to create new views for each row. You might want to find one of the many ListView tutorials out there to help you do this correctly.

Answer 2

I think it will mostly solve you problem to invalidate the view after you have updated its image resource. Give this a try for your onClick():

@Override
    public void onClick(View view) {
        int position = (Integer) view.getTag();
        model.setName(contactList.get(position).getName());
        model.setNumber(contactList.get(position).getNumber());
        model.setPhoto(contactList.get(position).getPhoto());

        ContactAdapter.contactArray.add(contactList.get(position));
        contactStatusButton.setImageResource(R.drawable.green);
        contactStatusButton.invalidate(); //The View now needs to be redrawn
        Toast.makeText(context, "contact Number: " + contactList.get(position).getNumber(), Toast.LENGTH_SHORT).show();

    }