CODEWITHSUNDEEP
androidandroid-fragmentsandroid-viewpagertransitionfade
Luiz Canedo
Luiz Canedo

Reputation: 41

ViewPager with setCurrentItem(position, false) but with fade-in transition?

I am trying to use the AHBottomNavigation (https://github.com/aurelhubert/ahbottomnavigation) and I am following its demo app for make my own.

In the demo app it uses ViewPager and FragmentPagerAdapter to change between fragments, and everything is working perfectly.

My problem is, I want to add a fade-in fade-out transition between the fragments, I had tried to change this:

viewPager.setCurrentItem(position, false);

for

viewPager.setCurrentItem(position);

And I had added this in my MainActivity:

viewPager.setPageTransformer(false, new FadePageTransformer());

...

public class FadePageTransformer implements ViewPager.PageTransformer {
    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));
        }
    }
}

It actually works, but if I want to go from the first fragment to the last one, it shows all the fragments between them, like a scroll view.

It has a method in the Fragment class (DemoFragment) that I think I can use for a fade-in fade-out transition, but I have no idea of how to implement it, this is the method:

/**
 * Called when a fragment will be displayed
 */
public void willBeDisplayed() {
    // Do what you want here, for example animate the content
}

Sorry, I am new in android, I still learning, and I hope you can help me, thanks!

UPDATE:

I want to add a cross-fade animation between the fragments, like the example in Material Design (https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-behavior)

Transition between active and inactive views using a cross-fade animation.

Upvotes: 4

Views: 1784

Answers (1)

Gonzalo
Gonzalo

Reputation: 3764

Since viewpagers transition through the pages inbetween, its animated page change should not be used according to the material design guidelines. Instead, you should use setCurrentItem(int, boolean) with the boolean parameter as false (this removes the transition through the inbetween elements) and perform the animation inside onTabSelected:

private Animation fadeOut;
private Animation fadeIn;

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    fadeOut = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
    fadeOut.setDuration(150);
    fadeIn = AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
    fadeIn.setDuration(150);
    ...

    bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {
            @Override
            public boolean onTabSelected(int position, boolean wasSelected) {
                if(!wasSelected) {
                    Fragment oldFrag = getCurrentFragment();
                    if(oldFrag.getView() != null) {
                        oldFrag.getView().startAnimation(fadeOut);
                    }

                    mViewPager.setCurrentItem(position, false);

                    // The following line might not be necessary
                    getSupportFragmentManager().executePendingTransactions();

                    Fragment newFrag = getCurrentFragment();
                    if(newFrag.getView() != null) {
                        newFrag.getView().startAnimation(fadeIn);
                    }
                } else {
                    getCurrentFragment().onReopen();
                }

                return true;
            }
        });
}

Upvotes: 1

Related Questions