Viewpager: lose the state of toggle button when swiping

Question

I am creating a Gallery with image and like button using Viewpager and PagerAdapter. Please refer to my code:

public class GalleryAdapter extends PagerAdapter {

private Activity _activity;
private ArrayList<MyPhotoItem> _imageCollection;

// Components in fullsceen layout
ImageView imgDisplay;
private ToggleButton btnLike;

// Variable for btnLike
private boolean isChecked;

// constructor
public GalleryAdapter(Activity activity,
        ArrayList<MyPhotoItem> images) {
    this._imageCollection = images;
}

@Override
public int getCount() {
    return this._imageCollection.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
    return view == ((RelativeLayout) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {

    inflater = (LayoutInflater) _activity
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    View viewLayout = inflater.inflate(R.layout.layout_gallery_image,
            container, false);


    imgDisplay = (ImageView) viewLayout
            .findViewById(R.id.layout_gallery_imgDisplay);
    Picasso.with(this._activity.getApplicationContext())
            .load(_imageCollection.get(position).url).into(imgDisplay);

    btnLike = (ToggleButton) viewLayout
            .findViewById(R.id.layout_gallery_likeButton);
    btnLike.setOnCheckedChangeListener(null);
    btnLike.setChecked(isChecked);
    btnLike.setOnCheckedChangeListener(new OnCheckedChangeListener() {

        @Override
        public void onCheckedChanged(CompoundButton buttonView,
                boolean isChecked) {
            if (isChecked) {
                isChecked = true;

            } else {
                isChecked = false;

            }
        }

    });

    ((ViewPager) container).addView(viewLayout);

    return viewLayout;
}


@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    ((ViewPager) container).removeView((RelativeLayout) object);

}

@Override
public int getItemPosition(Object object) {
    return PagerAdapter.POSITION_NONE;
}

}

My current issue: the Viewpager doesn't keep the toggle button state when I swiping to another pages and going back the previous ones (supposed 5 photos loaded in Viewpager). I went through a couple of Stackoverflow posts, but none of them can solve my problem properly.

Any advices will be appreciated. Thanks in advance.

Since Fragments are recycled your view may get reset. its better to set the value in LocalStorage and check the LocalStorage for previous Value and set the value to view. — Muthu, Feb 03 '15 at 16:47

score 1 · Accepted Answer · answered Feb 07 '15 at 16:05

thanks for your replies. Though most of them were not direct answers for my case, they gave me some clues to come to my solution. This may not the best solution, but it solved my issue.

The solution:

1/ Add a flag to keep status of Toggle in the Object:

public class MyPhotoItem {
...
  public boolean like_flag;
...
}

2/ Customise a bit the OnCheckedChangeListener:

class OnLikeCheckedChangeListener implements OnCheckedChangeListener {
    int mPosition;

    // constructor
    public OnLikeCheckedChangeListener(int position) {
        this.mPosition = position;
    }
    @Override
    public void onCheckedChanged(CompoundButton buttonView,
            boolean isChecked) {
     if (isChecked){ 
            _imageCollection.get(_position).like_flag = true;
            notifyDataSetChanged();
      }
     else{
            _imageCollection.get(_position).like_flag = false;
            notifyDataSetChanged();
     }
  }
}

3/ Setup the Toggle status base on Flag:

@Override
public Object instantiateItem(ViewGroup container, int position) {
  ...
  // Init Toggle status
    if (_imageCollection.get(position).like_flag) {
        btnLike.setChecked(true);
    } else {
        btnLike.setChecked(false);
    }
  btnLike.setOnCheckedChangeListener(new OnLikeCheckedChangeListener(
            position));
  ...
 }

That's it. The Toggle status is persisted during swiping the Viewpager. Anyone has better solution or good practices, please feel free to comment.

Enjoy coding !

score 0 · Answer 2 · answered Feb 03 '15 at 17:06

0

If there are only 5 images supposed to be in ViewPager than you can try to use setOffscreenPageLimit (int limit)

answered Feb 03 '15 at 17:06

olyv

3,699
5
37
67

score 0 · Answer 3 · answered Feb 03 '15 at 17:12

This happens because the views of your pager constantly be recycled while you change the page, so the view in the page constantly be recreated, and for that you loss the state of the ToggleButton, the solution for this its save the state in the SharedPreferences when the state of the ToggleButton change and retrieved it on the instantiateItem method, and set the state to the ToggleButton.

Viewpager: lose the state of toggle button when swiping

3 Answers3