title: Animate Floating Action Button on ViewPager scroll
body: <p>I have AppBarLayout, ViewPager below it and a Floating Action Button in one Activity. I want to animate the FAB when the ViewPager is scrolled. Have a look at the below screens.</p>
  
  <p><a href="https://i.stack.imgur.com/e6fyI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e6fyI.jpg" alt="enter image description here"></a></p>
  
  <p>When Tab1 is the current tab then the FAB should be in the bottom-right corner. When Tab2 is the current tab then the FAB should be in the bottom-center area. When Tab3 is the current tab then the FAB should move back to bottom-right corner. When Tab4 is the current tab then the FAB should get anchored to ImageView4 and should be in the bottom-right corner of ImageView4.</p>
  
  <p>How can I achieve this? Please help me out.</p>
  
  <p>I need to implement onPageChangeListener on ViewPager and handle the same in onPageScrolled().</p>
  
  <pre><code>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) {
  
          }
      });
  </code></pre>
  
  <p>When I go from tab1 to tab2 the FAB in translating correctly, however, in the end it comes back to original position.</p>
  
  <p>How should I animate the FAB in onPageScrolled()?</p>