How to animate views as the ViewPager position offset changes

Question

We would like to create an app intro with animation where the user scrolls through pages and, as the user scrolls, a view is animated and travels through all the slides. The animated view should move as the user scrolls, so if the user scrolls faster the animated view should move faster and if the user scrolls back to a previous page, the animated view should move backwards.

This is super easy in iOS with https://github.com/IFTTT/JazzHands but I can't find a way to do this in Android.

Problems I've found:

• Animations run in real time; you can't let the time be the ViewPager offset.
• In FragmentPagerAdapter, views from one fragment can't be moved to another fragment.

Any suggestion? Thank you.

Answer 1

This is a partial answer. It's for the first problem.

• Animations run in real time; you can't let the time be the ViewPager offset.

I can change the properties of the animated view in the onPageScrolled method of OnPageChangeListener of the ViewPager.

This is a simple example that changes the left margin of the animated view so it moves to the right.

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            super.onPageScrolled(position, positionOffset, positionOffsetPixels);

            LayoutParams params = (LayoutParams) animatedView.getLayoutParams();
            params.setMargins((int) ((position + positionOffset) * 500), 0, 0, 0);
            animatedView.setLayoutParams(params);
        }

The second problem is not solved, though. When the view reaches the right side of the page it is in, it disappears. In other words, the view can't move to the next page (fragment).

Answer 2

For the second problem:

The viewPagerAdapter will destroy the views when they are no more needed so to keep a view visible through all the pages you need add it to the layout that contains the ViewPager.

Something like this can works:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white_transparent"
        />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text out of view pager"
        android:textSize="25sp"
        />
</RelativeLayout>