ViewPager animation fade in/out instead of slide

Question

I got the FragmentBasics example from here. Is there a way make the ViewPager animation simply fade in and out when I swipe instead of sliding left and right? I\'ve been try

Answer 1

Fade according to Google: https://developer.android.com/training/animation/reveal-or-hide-view

viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
    @Override
    public void transformPage(@NonNull View page, float position) {
        page.setAlpha(0f);
        page.setVisibility(View.VISIBLE);

        // Start Animation for a short period of time
        page.animate()
            .alpha(1f)
            .setDuration(page.getResources().getInteger(android.R.integer.config_shortAnimTime));
    }
});

Answer 2

This should work better for the fade in/out transform:

public void transformPage(View view, float position) {
    view.setTranslationX(view.getWidth() * -position);
       
    if(position <= -1.0F || position >= 1.0F) {
        view.setAlpha(0.0F);
    } else if( position == 0.0F ) {
        view.setAlpha(1.0F);
    } else { 
        // position is between -1.0F & 0.0F OR 0.0F & 1.0F
        view.setAlpha(1.0F - Math.abs(position));
    }
}

Answer 3

I found @murena's answer super helpful. However, I ran into a problem when I tried to add an OnClickListener to each tab. I needed each page to open a different URL link. I modified the code to hide the views that are out of sight and added a little extra effect to slide the view at .5 the speed:

public void transformPage(View view, float position) {

    if (position <= -1.0F || position >= 1.0F) {        // [-Infinity,-1) OR (1,+Infinity]
        view.setAlpha(0.0F);
        view.setVisibility(View.GONE);
    } else if( position == 0.0F ) {     // [0]
        view.setAlpha(1.0F);
        view.setVisibility(View.VISIBLE);
    } else {

        // Position is between [-1,1]
        view.setAlpha(1.0F - Math.abs(position));
        view.setTranslationX(-position * (view.getWidth() / 2));
        view.setVisibility(View.VISIBLE);
    }
}

Answer 4

Based on a @murena's answer, this should work better for the fade in/out transform. At the end of animation the position is restored to default value.

public void transformPage(View view, float position) {
    if(position <= -1.0F || position >= 1.0F) {
        view.setTranslationX(view.getWidth() * position);
        view.setAlpha(0.0F);
    } else if( position == 0.0F ) {
        view.setTranslationX(view.getWidth() * position);
        view.setAlpha(1.0F);
    } else { 
        // position is between -1.0F & 0.0F OR 0.0F & 1.0F
        view.setTranslationX(view.getWidth() * -position);
        view.setAlpha(1.0F - Math.abs(position));
    }
}
  

Answer 5

A simple fading transformer could be implemented like this:

private static class FadePageTransformer implements ViewPager.PageTransformer {
    public void transformPage(View view, float position) {
        view.setAlpha(1 - Math.abs(position));
        if (position < 0) {
            view.setScrollX((int)((float)(view.getWidth()) * position));
        } else if (position > 0) {
            view.setScrollX(-(int) ((float) (view.getWidth()) * -position));
        } else {
            view.setScrollX(0);
        }
    }
}

Maybe not exactly what your looking for, but a good starting point.