Gradual Transition between Fragments

Question

I recently downloaded the Google Sheets app and I was really interested in the first screen that explained the details of the app so I tried to recreate it.

After some research I decided that it was ViewPager and I implemented it.

But the result was not what I expected.

In the sheets app the color changing was gradual and barely noticeable but in my case the transition is clear(The color scheme used are same as the one in the sheets app).

What is the type of animation applied in the sheets app and how can I replicate it?

score 3 · Accepted Answer · edited May 23 '17 at 10:34

The easiest way to do that is to:

Remove backgrounds from Fragments in the ViewPager (I assume you use Fragments inside your ViewPager's Adapter... if not, let me know). And by "remove background" I mean e.g. set it to "@android:color/transparent".
Remove background from the ViewPager itself (also e.g. with setting it's color to transparent).
Put a View that will act as a changing background below (z-wise) your ViewPager. For example like this (without parameters):

<FrameLayout>
    <View android:id="@+id/animated_color_view"/>
    <android.support.v4.view.ViewPager/>
</FrameLayout>

Create a way to animate background color of the animated_color_view. You can use one of the ways included in the thread linked by REG1 in the comment (edit: the comment has been deleted, but this link points to the same thread). For example like this (the approach was taken from this post):

int[] pageColors = new int[]{Color.RED, Color.GREEN};
int currentColor = pageColors[0];
ValueAnimator colorAnimation;

public void animateToColor(int colorTo) {
    if (colorAnimation != null) {
        colorAnimation.cancel();
    }
    colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), currentColor, colorTo);
    colorAnimation.setDuration(250); // milliseconds
    colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animator) {
            currentColor = (int) animator.getAnimatedValue();
            animatedColorView.setBackgroundColor(currentColor);
        }

    });
    colorAnimation.start();
}

Add an OnPageChangeListener that will call this animating method every time a page is selected.

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        animateToColor(pageColors[position]);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

And a little side-note: remember the pageColors array's size must be equal to the number of pages in your ViewPager.

It worked.. but you said it is an easy way what are the other ways to do this. Please give me some reference. @Bartek — Nirmal Raj, Jun 21 '16 at 09:04
I am new to android animation. Do you have any recommendations for a particular book or website from which I can learn android animation from scratch? — Nirmal Raj, Jun 21 '16 at 09:11
As with everything, there are thousands of ways you can do things. You will most certainly need to have an underlying `View` that will act as a changing background. There are just multiple ways you can change its color though. You could for example dynamically change color yourself (without `ValueAnimator`) inside `onPageScrolled` callback. You could also create a huge gradient that would be below your `ViewPager` and would scroll much faster than your `ViewPager`. So it can create an illusion of changing color. And more... — Bartek Lipinski, Jun 21 '16 at 09:11
@NirmalRaj the only recommendation I can give you is: just start doing it. You will learn that way. First use some examples from SO, and try to understand them as well as you can. If you don't understand them perfectly, don't worry. It's a part of the process. You will gradually understand more and more and in the end you will find your own way in doing stuff like that. The way that suits you best. — Bartek Lipinski, Jun 21 '16 at 09:14
@BartekLipinski I just wanted to say that a actually deleted my comment (prematurely) once I saw that an accepted answer had been provided. I then proceeded to read through your answer only to find that you had made a reference to my comment. So now the link is broke and I am not able to undo my delete operation. So you might want to take the link out. Luckily the thread that I linked is the same as the one you linked under "this post", if I recall correctly :) — REG1, Jun 22 '16 at 08:56

Gradual Transition between Fragments

1 Answers1