How to change FloatingActionButton between Tabs?

Question

I'm trying to implement FloatingActionButton from Google Design Support Library into two of three tabs, and according to the Material Design Guidelines - FloatingActionButton it says:

If there is a floating action button on multiple lateral screens (such as on tabs), upon entering each screen, the button should show and hide if the action contained on each is different. If the action is the same, the button should stay on screen (and translate to a new position, if necessary.)

How can I make this kind of transition or animation for the FAB buttons in my app?

Answer 1

This functionality is not currently built into the FloatingActionButton so you'll have to animate it yourself. Assuming your FloatingActionButton is in your main activity, add the following function to your activity.

int[] colorIntArray = {R.color.walking,R.color.running,R.color.biking,R.color.paddling,R.color.golfing}; int[] iconIntArray = {R.drawable.ic_walk_white,R.drawable.ic_run_white,R.drawable.ic_bike_white,R.drawable.ic_add_white,R.drawable.ic_arrow_back_white};  protected void animateFab(final int position) {     fab.clearAnimation();     // Scale down animation     ScaleAnimation shrink =  new ScaleAnimation(1f, 0.2f, 1f, 0.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);     shrink.setDuration(150);     // animation duration in milliseconds     shrink.setInterpolator(new DecelerateInterpolator());     shrink.setAnimationListener(new Animation.AnimationListener() {         @Override         public void onAnimationStart(Animation animation) {          }          @Override         public void onAnimationEnd(Animation animation) {             // Change FAB color and icon             fab.setBackgroundTintList(getResources().getColorStateList(colorIntArray[position]));             fab.setImageDrawable(getResources().getDrawable(iconIntArray[position], null));              // Scale up animation             ScaleAnimation expand =  new ScaleAnimation(0.2f, 1f, 0.2f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);             expand.setDuration(100);     // animation duration in milliseconds             expand.setInterpolator(new AccelerateInterpolator());             fab.startAnimation(expand);         }          @Override         public void onAnimationRepeat(Animation animation) {          }     });     fab.startAnimation(shrink); } 

Update the color and drawable resources to match your project. Add a tab selection listener in your onCreate method and call the animate function when a tab is selected.

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {     @Override     public void onTabSelected(TabLayout.Tab tab) {         mViewPager.setCurrentItem(tab.getPosition());         animateFab(tab.getPosition());     }      @Override     public void onTabUnselected(TabLayout.Tab tab) {      }      @Override     public void onTabReselected(TabLayout.Tab tab) {      } }); 

Make sure you have enough colors and icons to match the number of tabs you have.