Stop view pager from starting the next pager before it's seen

Question

Now I have a view pager with multiple fragments.

Actually I replace views in one fragment, but I have a problem with this.

I show a gif images in each single view. So when I'm in page 1 the gif in image 2 starts it's animation.

I need to keep the gif not animated till it's visible on the screen.

I'm using setUserVisibleHint but it doesn't add any improvement or solution.

So any suggestion to solve this problem?

Thanks in advance.

Here is my fragment code

public class WalkThroughFragment extends Fragment implements View.OnClickListener {

public CacheClass cacheClass;
public View view;
private int pageNumber = 1;
private TextView doneWalkThrough;
private LinearLayout linearLayout;
private GifImageView gifImageView, gifImageView2, gifImageView3, gifImageView4, gifImageView5;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    view = inflater.inflate(R.layout.item_walkthrough, container, false);
    return view;
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    this.view = view;
    Bundle bundle = this.getArguments();
    if (bundle != null) {
        if (bundle.getInt("pageNumber") != 0) {
            pageNumber = bundle.getInt("pageNumber");
        }
    }
    cacheClass = new CacheClass(getActivity());

    gifImageView = (GifImageView) view.findViewById(R.id.imageViewGif);
    gifImageView.setFreezesAnimation(true);
    gifImageView.setVisibility(View.GONE);

    gifImageView2 = (GifImageView) view.findViewById(R.id.imageViewGif);
    gifImageView2.setFreezesAnimation(true);
    gifImageView2.setVisibility(View.GONE);

    gifImageView3 = (GifImageView) view.findViewById(R.id.imageViewGif);
    gifImageView3.setFreezesAnimation(true);
    gifImageView3.setVisibility(View.GONE);

    gifImageView4 = (GifImageView) view.findViewById(R.id.imageViewGif);
    gifImageView4.setFreezesAnimation(true);
    gifImageView4.setVisibility(View.GONE);

    gifImageView5 = (GifImageView) view.findViewById(R.id.imageViewGif);
    gifImageView5.setFreezesAnimation(true);
    gifImageView5.setVisibility(View.GONE);

    linearLayout = (LinearLayout) view.findViewById(R.id.walkThroughLayOut);
    doneWalkThrough = (TextView) view.findViewById(R.id.doneWalkThrough);
    doneWalkThrough.setOnClickListener(this);

    if (this.getUserVisibleHint()) {
        setUserVisibleHint(true);
    } else {
        linearLayout.setBackgroundColor(Color.BLUE);
    }
}

@Override
public void onDestroy() {
    super.onDestroy();
    gifImageView.destroyDrawingCache();
}

@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
    if (isVisibleToUser) {

        if (getView() != null) {
            switch (pageNumber) {
                case 1:
                    gifImageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
                    gifImageView.setBackgroundResource(R.drawable.first_gif);
                    gifImageView.setVisibility(View.VISIBLE);
                    linearLayout.setBackgroundColor(Color.GREEN);
                    break;

                case 2:
                    gifImageView2.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
                    gifImageView2.setBackgroundResource(R.drawable.second_gif);
                    gifImageView2.setVisibility(View.VISIBLE);
                    linearLayout.setBackgroundColor(Color.BLUE);
                    break;

                case 3:
                    gifImageView3.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
                    gifImageView3.setBackgroundResource(R.drawable.third_gif);
                    gifImageView3.setVisibility(View.VISIBLE);
                    linearLayout.setBackgroundColor(getResources().getColor(R.color.light_blue));
                    break;

                case 4:
                    gifImageView4.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
                    gifImageView4.setBackgroundResource(R.drawable.forth_gif);
                    gifImageView4.setVisibility(View.VISIBLE);
                    linearLayout.setBackgroundColor(Color.YELLOW);
                    break;

                case 5:
                    gifImageView5 = (GifImageView) view.findViewById(R.id.imageViewGif);
                    gifImageView5.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
                    gifImageView5.setVisibility(View.VISIBLE);
                    gifImageView5.setBackgroundResource(R.drawable.fifth_gif);
                    try {
                        GifDrawable gifFromResource = new GifDrawable(getResources(), R.drawable.fifth_gif);
                        int duration = gifFromResource.getDuration();
                        new Handler().postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                doneWalkThrough.setVisibility(View.VISIBLE);
                            }

                        }, duration);
                        gifFromResource.stop();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                    break;
            }
        }
    }

}

@Override
public void onClick(View v) {
    ((WalkThroughActivity) getActivity()).switchIntent();
}

}

Answer 1

You seem to be forgetting to call super method on your setUserVisibleHint method. Try doing the following and see if it helps

@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
   super.setUserVisibleHint(isVisibleToUser); // call to super added
   if(isVisibleToUser){
       // do your stuff here
   }
}