How can I animate a new floating action button between transitions between tabs / fragments?

Question

From the new design support library , I would like to animate the floating-action button (FAB) so that it shrinks and expands as a fragment or tab changes.

I tried several types of transition several times, but could not get the same smooth and connected as the example from this , so I think there is a better approach or the right way to do this.

Answer 1

In ViewPager.OnPageChangeListener() I will use btn.setScaleY() and btn.setScaleX() depending on the offset of the onPageScrolled() method.

Answer 2

In the Activity class, add addOnPageChangeListener to your ViewPager . see below:

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { private int state = 0; private boolean isFloatButtonHidden = false; private int position = 0; @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (isFloatButtonHidden == false && state == 1 && positionOffset != 0.0) { isFloatButtonHidden = true; //hide floating action button swappingAway(); } } @Override public void onPageSelected(int position) { //reset floating this.position = position; if (state == 2) { //have end in selected tab isFloatButtonHidden = false; selectedTabs(position); } } @Override public void onPageScrollStateChanged(int state) { //state 0 = nothing happen, state 1 = begining scrolling, state 2 = stop at selected tab. this.state = state; if (state == 0) { isFloatButtonHidden = false; } else if (state == 2 && isFloatButtonHidden) { //this only happen if user is swapping but swap back to current tab (cancel to change tab) selectedTabs(position); } } }); 

in your private method, you can do individual tasks there.

 private void swappingAway() { floatingActionButton.clearAnimation(); Animation animation = AnimationUtils.loadAnimation(this, R.anim.pop_down); floatingActionButton.startAnimation(animation); } private void selectedTabs(int tab) { floatingActionButton.show(); //a bit animation of popping up. floatingActionButton.clearAnimation(); Animation animation = AnimationUtils.loadAnimation(this, R.anim.pop_up); floatingActionButton.startAnimation(animation); //you can do more task. for example, change color for each tabs, or custom action for each tabs. } 

I intentionally do not use hide() and show() since it has errors when you collapse and return immediately.

here is the animation pop_down and pop_up

pop_down.xml

 <scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="1.0" android:fromYScale="1.0" android:toXScale="0.0" android:toYScale="0.0" android:duration="100" android:pivotX="50%" android:pivotY="50%" android:shareInterpolator="true" android:fillAfter="true"> </scale> 

pop_up.xml

 <scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:fromYScale="0.0" android:toXScale="1.0" android:toYScale="1.0" android:duration="500" android:pivotX="50%" android:pivotY="50%" android:startOffset="200" android:interpolator="@android:anim/bounce_interpolator" android:shareInterpolator="true" android:fillAfter="true"> </scale> 

Answer 3

The easiest way:

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {} @Override public void onPageSelected(int position) {} @Override public void onPageScrollStateChanged(int state) { switch (state) { case ViewPager.SCROLL_STATE_IDLE: switch (viewPager.getCurrentItem()) { case 0: { fab.setImageResource(R.drawable.your_drawable); fab.show(); break; } case 1: { fab.setImageResource(R.drawable.your_another_drawable); fab.show(); break; } } break; case ViewPager.SCROLL_STATE_DRAGGING: case ViewPager.SCROLL_STATE_SETTLING: fab.hide(); break; } 

Important : to improve rendering performance, try using the .svg format or reduce the size of your png.