Change image resource on click of an image button in a list view

Question

I have a list adapter which sets onClick listeners for ImageButtons when populating a list view. I'm trying to make it so the image resource changes onClick. I'm having trouble retrieving the image resource in the onClick listener.

List Adapter:

public class ListAdapter extends BaseAdapter {

Context context;
protected List<Post> cityFeed;
LayoutInflater inflater;

public ListAdapter(Context context, List<Post> cityFeed) {
    this.cityFeed = cityFeed;
    this.inflater = LayoutInflater.from(context);
    this.context = context;
}

public int getCount() {
    return cityFeed.size();
}

public Post getItem(int position) {
    return cityFeed.get(position);
}

public long getItemId(int position) {
    return cityFeed.get(position).getDrawableID();
}

public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder;
    if (convertView == null) {
        holder = new ViewHolder();
        // inflate the list item
        convertView = this.inflater.inflate(R.layout.row_layout, parent, false);            
        // get views 
        holder.profilePic = (ImageView) convertView.findViewById(R.id.profilePic);
        holder.username = (TextView) convertView.findViewById(R.id.username);
        holder.day = (TextView) convertView.findViewById(R.id.day);
        holder.rating = (TextView) convertView.findViewById(R.id.rating);
        holder.textPost = (TextView) convertView.findViewById(R.id.textPost);
        holder.ratingUp = (ImageButton) convertView.findViewById(R.id.ratingUp);
        holder.ratingDown = (ImageButton) convertView.findViewById(R.id.ratingDown);
        convertView.setTag(holder);

        holder.ratingUp.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View convertView) {
                // if image source equals this drawable then...
                // else change the image source to this drawable...
                Toast.makeText( context,
                        "Rate Up",
                        Toast.LENGTH_SHORT).show();                 
            }
        });

        holder.ratingDown.setOnClickListener(new OnClickListener() {                    
            @Override
            public void onClick(View convertView) {
                Toast.makeText( context,
                        "Rate Down",
                        Toast.LENGTH_SHORT).show();
            }
        });     

    } else {
        holder = (ViewHolder) convertView.getTag();
    }

    Post post = cityFeed.get(position);
    holder.profilePic.setImageResource(post.getDrawableID());
    holder.username.setText(post.getUsername());
    holder.day.setText(post.getDay());
    holder.rating.setText(post.getRating());
    holder.textPost.setText(post.getText());
    return convertView;
}

private class ViewHolder {
    ImageView profilePic;
    TextView username;
    TextView day;
    TextView rating;
    TextView textPost;
    ImageView ratingUp;
    ImageView ratingDown;
}

The toasts work fine but I can't figure out how to handle the image resources. See onClick listeners in getView method. Thanks in advance.

Answer 1

Drawable drawable1 =getContext().getResources().getDrawable(R.drawable.add);
Drawable drawable2 =getContext().getResources().getDrawable(R.drawable.checked);

If anyone wants to know, How did I solve the double click problem, I just declared and initialized both of the image drawables as global variables. I do not know why it worked, but it did. I don't have enough reputation for comment, so I am giving it as an answer. Before that I tried changing xml states and all that, but none worked.

Answer 2

Drawable myDrawable1= //get your drawable 1 here    
Drawable myDrawable2= //get your drawable 2 here
if ((Post)getItem(pos).isRatedUp){
      holder.ratingUp.setImageDrawable(myDrawable2);
}
else{
      holder.ratingUp.setImageDrawable(myDrawable1);
}

holder.ratingUp.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View convertView) {
                    // if image source equals this drawable then...
                    // else change the image source to this drawable...

                    if(((ImageButton)convertView).getDrawable()==myDrawable1){
                           ((ImageButton)convertView).setImageDrawable(myDrawable2);
                           ((Post)getItem(pos)).setRatedUp(true);
                    }else{
                           ((ImageButton)convertView).setImageDrawable(myDrawable1);
                           ((Post)getItem(pos)).setRatedUp(false);
                    }
                }
            });

Add this to your Post.class;

private boolean isRatedUp=false;

public boolean isRatedUp(){
    return this.isRatedUp;
}
public void setRatedUp(boolean israted){
    this.isRatedUp=israted;
}