Adding fade animation to bottom toolbar buttons

This CL fades out the old button completely and then fades in the new
button.

Bug: 874097
Change-Id: I131c2383d645ead9909ca4f4270c855595a25b60
Reviewed-on: https://chromium-review.googlesource.com/1175207Reviewed-by: Matthew Jones <mdjones@chromium.org>
Reviewed-by: Ted Choc <tedchoc@chromium.org>
Commit-Queue: Pedro Amaral <amaralp@chromium.org>
Cr-Commit-Position: refs/heads/master@{#585353}

chrome/android/java/src/org/chromium/chrome/browser/toolbar/BottomToolbarViewBinder.java

@@ -115,10 +115,9 @@ public class BottomToolbarViewBinder
     private static void updateButton(
             TintedImageButton button, ToolbarButtonData buttonData, boolean useLightIcons) {
         if (buttonData == null) {
-            button.setVisibility(View.INVISIBLE);
+            ToolbarButtonData.clearButton(button);
         } else {
             buttonData.updateButton(button, useLightIcons);
-            button.setVisibility(View.VISIBLE);
         }
     }
 

chrome/android/java/src/org/chromium/chrome/browser/toolbar/ToolbarButtonSlotData.java

@@ -4,15 +4,21 @@
 
 package org.chromium.chrome.browser.toolbar;
 
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
 import android.content.Context;
 import android.content.res.ColorStateList;
 import android.graphics.drawable.Drawable;
 import android.support.v4.graphics.drawable.DrawableCompat;
 import android.support.v7.content.res.AppCompatResources;
+import android.view.View;
 import android.view.View.OnClickListener;
 
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.widget.TintedImageButton;
+import org.chromium.ui.interpolators.BakedBezierInterpolator;
 
 /**
  * This class can hold two buttons, one to be shown in browsing mode and one for tab switching mode.
@@ -24,6 +30,9 @@ class ToolbarButtonSlotData {
     /** The button to be shown when in tab switcher mode. */
     public ToolbarButtonData tabSwitcherModeButtonData;
 
+    /** Fade in/out time in milliseconds. */
+    private static final int FADE_DURATION = 300;
+
     /**
      * @param browsingModeButton The button to be shown when in browsing mode.
      * @param tabSwitcherModeButton The button to be shown when in tab switcher mode.
@@ -78,11 +87,42 @@ class ToolbarButtonSlotData {
          * @param isLight Whether or not to use light mode.
          */
         void updateButtonDrawable(TintedImageButton imageButton, boolean isLight) {
-            DrawableCompat.setTintList(mDrawable, isLight ? mLightTint : mDarkTint);
-            imageButton.setImageDrawable(mDrawable);
-            imageButton.setContentDescription(
-                    isLight ? mLightAccessibilityString : mDarkAccessibilityString);
-            imageButton.invalidate();
+            ObjectAnimator fadeOutAnim =
+                    ObjectAnimator.ofFloat(imageButton, View.ALPHA, 1.0f, 0.0f);
+            fadeOutAnim.setDuration(FADE_DURATION / 2);
+            fadeOutAnim.setInterpolator(BakedBezierInterpolator.FADE_OUT_CURVE);
+
+            ObjectAnimator fadeInAnim = ObjectAnimator.ofFloat(imageButton, View.ALPHA, 0.0f, 1.0f);
+            fadeInAnim.setDuration(FADE_DURATION / 2);
+            fadeInAnim.setInterpolator(BakedBezierInterpolator.FADE_IN_CURVE);
+            fadeInAnim.addListener(new AnimatorListenerAdapter() {
+                @Override
+                public void onAnimationStart(Animator animator) {
+                    if (mDrawable != null) {
+                        DrawableCompat.setTintList(mDrawable, isLight ? mLightTint : mDarkTint);
+                    }
+                    imageButton.setImageDrawable(mDrawable);
+                    imageButton.setContentDescription(
+                            isLight ? mLightAccessibilityString : mDarkAccessibilityString);
+                    imageButton.invalidate();
+                }
+
+                @Override
+                public void onAnimationEnd(Animator animator) {
+                    imageButton.setEnabled(true);
+                }
+            });
+
+            imageButton.setEnabled(false);
+            AnimatorSet animatorSet = new AnimatorSet();
+            animatorSet.playSequentially(fadeOutAnim, fadeInAnim);
+            animatorSet.start();
+        }
+
+        static void clearButton(TintedImageButton button) {
+            ToolbarButtonData emptyButtonData =
+                    new ToolbarButtonData(null, "", "", null, button.getContext());
+            emptyButtonData.updateButton(button, false);
         }
     }
 }