Animation of a floating action button in a ViewPager scroll

Question

I have an AppBarLayout, ViewPager underneath and a floating action button in one action. I want to animate FAB while scrolling ViewPager. Take a look at the screens below.

When Tab1 is the current tab, FAB should be in the lower right corner. When Tab2 is the current tab, the FAB should be in the lower center area. When Tab3 is the current tab, FAB should return to the lower right corner. When Tab4 is the current tab, the FAB should snap to ImageView4 and should be in the lower right corner of ImageView4.

How can i achieve this? Please help me.

I need to implement onPageChangeListener on the ViewPager and handle the same in onPageScrolled ().

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            final int width = mViewPager.getWidth();
            if(position == 0) {
                // Transition from page 0 to page 1 (horizontal shift)
                int translationX = (int) ((-(width - mFab.getWidth()) / 2f) * positionOffset);
                mFab.setTranslationX(translationX);
                mFab.setTranslationY(0);
            } else if(position == 1) {
                // Transition from page 1 to page 2 (horizontal shift)
                int translationX = (int) (((width - mFab.getWidth())) * positionOffset);
                mFab.setTranslationX(translationX);
                mFab.setTranslationY(0);
            } else if(position == 2) {
                // Transition from page 2 to page 3

            }
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

tab1 tab2, FAB , , .

FAB onPageScrolled()?

Answer 1

. -, gradle:   compile 'com.android.support:design:22.2.0'

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
     <LinearLayout
        android:id="@+id/your fist layout"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
    </LinearLayout>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done" />

</android.support.design.widget.CoordinatorLayout>

<LinearLayout
        android:id="@+id/your second layout"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
</LinearLayout>

, , co-orindate , .

: http://android-developers.blogspot.in/2015/05/android-design-support-library.html