ListView and ToggleButton

Question

I have looked at all the other simple questions but couldn't find the answer I was looking for. I have a ListView and each list item contains a toggle button. I have two questions:

• When a toggle button on one of list items is pressed when scrolling the list, items get recycled; say I clicked the first item (and there are only three showing at a time) every fourth cell has the toggle button turned on

• Since this is a toggle one, I only want one instance of the button to be turned on, so if its turned on a single list item, all other items in the ListView that might have the ToggleButton turned on should be come off.

Any help would be appreciated. My adapter code looks like this:

public class RSSFeedItemListAdapter extends ArrayAdapter<RSSItem> {

    private Context context;
    private List<RSSItem> items;
    private int resource;
    private Podcast podcast;
    private boolean[] playpauseState;

    public RSSFeedItemListAdapter(Context context, int resource, List<RSSItem> items, Podcast podcast) {
        super(context, resource, items);
        this.items = items;
        this.context = context;
        this.resource = resource;
        this.podcast = podcast;
        playpauseState = new boolean[this.items.size()];
    }


    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        Viewholder vh;
        if (convertView == null) {

            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(resource, parent, false);

            Typeface custom_font = Typeface.createFromAsset(context.getAssets(), "fonts/RobotoCondensed-Bold.ttf");
            vh = new Viewholder();
            vh.title = (TextView) convertView.findViewById(R.id.podcast_feeditem_title);
            vh.title.setTypeface(custom_font);
            vh.desc = (TextView) convertView.findViewById(R.id.podcast_feeditem_description);
            vh.image = (ImageView) convertView.findViewById(R.id.podcast_feeditem_image);
            vh.pubDate = (TextView) convertView.findViewById(R.id.podcast_feeditem_pubdate);
            vh.collectionName = (TextView) convertView.findViewById(R.id.podcast_feeditem_collection_name);
            vh.playpause = (ToggleButton) convertView.findViewById(R.id.podcast_feeditem_play_pause_cta);
            vh.playpause.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    int position = (Integer) buttonView.getTag();
                    playpauseState[position] = isChecked;
                }
            });
            convertView.setTag(vh);
        } else {
            vh = (Viewholder) convertView.getTag();
        }

        vh.playpause.setChecked(playpauseState[position]);
        vh.playpause.setTag(position);


        RSSItem rssItem = items.get(position);
        vh.title.setText(rssItem.getTitle());
        vh.desc.setText(Jsoup.parse(rssItem.getDescription()).text());
        Picasso.with(context).load(podcast.getArtworkExtraLarge()).into(vh.image);

        // TODO detect the local and show the right format
        // TODO the date format should match the date format from the rssfeedhandler code
        if (rssItem.getPubDate() != null) {
            vh.pubDate.setText(vh.simpleDateFormat.format(rssItem.getPubDate()));
        }

        // vh.playpause.setChecked(playpauseState[position]);
        vh.collectionName.setText(podcast.getCollectionName());
        return convertView;
    }


    /**
     *
     */
    static class Viewholder {
        ImageView image;
        TextView title;
        TextView desc;
        TextView pubDate;
        TextView collectionName;
        ToggleButton playpause;
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("d MMM", Locale.UK);

    }

Answer 1

I struggled a bit of around 10 hrs to figure this out. If you are still yet to find the solution, I am writing though a very late reply

List view basically works out on a really wierd (rather clever) way of displaying the items very thoughtfully that it redraws the items basing on scrolling and that are viewable on the screen. Which means that it creates the items dynamically basing on what current view has to accommodate. Leaving this apart, want to tell me the solution! Right? coming there

In your adapter getView() method, just set checked state to appropriate value for that item. (or) if you are using ImageView, just set the appropriate Image Resource basing on ON or OFF i.e.

  public View getView(int position, View convertView, ViewGroup parent) {
           ImageView toggle = (ImageView) convertView.findViewById(R.id.toggle);
           if(toggle_array(postion) == 1)
               toggle.setImageResource(R.drawable.on);
           } else {
               toggle.setImageResource(R.drawable.off);
           }
        }