Hiding a View from an invisible fragment when using viewPager

Question

I'm using a ViewPager in my activity to show 6 pages (Fragments) which all have an View that "pops out" when the page is selected. When I scroll back or forward I want to hide the View in the fragment to be able to start the animation again Correctly. Now when I swipe between fragments I see the old "popped out" image and when the new fragment is selected the animation is happening again.

public class MyFragment extends Fragment implements MylActivity.MyFragmentInterface {

    private static final String TAG = "MyFragment";
    private int layoutId;
    private ViewGroup rootView;
    private ImageView popup;

    @Override
    public void fragmentStartAnimation() {
        switch (layoutId) {
            case R.layout.fragment_2:
            case R.layout.fragment_3:
            case R.layout.fragment_4:
            case R.layout.fragment_5:
                Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.popup);
                 popup = (ImageView) rootView.findViewById(R.id.popup);
                popup.setVisibility(View.VISIBLE);
                popup.startAnimation(animation);

                break;
        }
    }

    @Override
    public void fragmentClearAnimation() {
        switch (layoutId) {
            case R.layout.fragment_2:
            case R.layout.fragment_3:
            case R.layout.fragment_4:
            case R.layout.fragment_5:

                if (popup != null) {
                   popup.setVisibility(View.INVISIBLE);
                }

                break;
        }
    }


    public void setPageNo(int pageNo) {

        switch (pageNo) {
            case 1:
                layoutId = R.layout.fragment_1;
                break;
            case 2:
                layoutId = R.layout.fragment_2;
                break;
            case 3:
                layoutId = R.layout.fragment_3;
                break;
            case 4:
                layoutId = R.layout.fragment_4;
                break;
            case 5:
                layoutId = R.layout.fragment_5;
                break;
            case 6:
                layoutId = R.layout.fragment_6;
                break;
            default:
                layoutId = 0;
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        if (layoutId == 0) {
            return new TextView(container.getContext());
        }
        if (rootView == null){
            rootView = (ViewGroup) inflater.inflate(layoutId, container, false);
            float actualHeight = container.getResources().getDisplayMetrics().heightPixels;
            // all images have exaclty same height of 591px fit for screen of 960px
            rootView.getChildAt(0).getLayoutParams().height = (int)(actualHeight/1.62 + 0.5);
        }else{


  ViewGroup parent = (ViewGroup) rootView.getParent();
        parent.removeView(rootView.findViewById(R.id.popup));
    }

    return rootView;
}

@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
    super.setUserVisibleHint(isVisibleToUser);
    if (!isVisibleToUser){
        if (rootView!= null && popup != null) {
            Log.d(TAG, "not visible");
            ViewGroup parent = (ViewGroup) rootView.getParent();
            parent.removeView(popup);
        }
    }
}

}

Answer 1

You could use a ViewPager.OnPageChangeListener. Whenever the page changes, reset all animations to their original state:

viewPager.setOnPageChangeListener(new OnPageChangeListener() {

    public void onPageScrollStateChanged(int state) {
        //Empty
    }

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //Empty
    }

    public void onPageSelected(int position) {
        // Refresh your animations
    }
});

Alternatively, you could try to override the setUserVisibleHint() method in the Fragment class inside your fragment. Adapted from this answer:

@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
    super.setUserVisibleHint(isVisibleToUser);

    // Make sure that we are currently visible
    if (this.isVisible()) {
        // If we are becoming invisible, then...
        if (!isVisibleToUser) {
            //Reset your animation, as fragment is being scrolled out of view
        }
    }
}