🏠 Polish bottom sheet content transitions

chrome/android/java/src/org/chromium/chrome/browser/widget/bottomsheet/BottomSheet.java

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 package org.chromium.chrome.browser.widget.bottomsheet;
 
 import android.animation.Animator;
 import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
 import android.animation.ObjectAnimator;
 import android.animation.ValueAnimator;
 import android.content.Context;
 import android.content.SharedPreferences;
 import android.graphics.Color;
 import android.graphics.Region;
 import android.os.Build;
 import android.support.annotation.IntDef;
 import android.support.annotation.Nullable;
 import android.util.AttributeSet;
 import android.view.GestureDetector;
 import android.view.MotionEvent;
 import android.view.VelocityTracker;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.Window;
 import android.view.animation.DecelerateInterpolator;
 import android.view.animation.Interpolator;
 import android.widget.FrameLayout;
 
 import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.base.ContextUtils;
 import org.chromium.base.ObserverList;
 import org.chromium.base.VisibleForTesting;
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.NativePageHost;
 import org.chromium.chrome.browser.TabLoadStatus;
 import org.chromium.chrome.browser.firstrun.FirstRunStatus;
 import org.chromium.chrome.browser.fullscreen.ChromeFullscreenManager;
 import org.chromium.chrome.browser.ntp.NativePageFactory;
 import org.chromium.chrome.browser.ntp.NewTabPage;
 import org.chromium.chrome.browser.tab.Tab;
 import org.chromium.chrome.browser.tabmodel.EmptyTabModelSelectorObserver;
 import org.chromium.chrome.browser.tabmodel.TabModel;
 import org.chromium.chrome.browser.tabmodel.TabModelSelector;
 import org.chromium.chrome.browser.toolbar.BottomToolbarPhone;
 import org.chromium.chrome.browser.util.MathUtils;
 import org.chromium.chrome.browser.widget.FadingBackgroundView;
 import org.chromium.chrome.browser.widget.bottomsheet.BottomSheetContentController.ContentType;
 import org.chromium.chrome.browser.widget.textbubble.ViewAnchoredTextBubble;
 import org.chromium.content_public.browser.LoadUrlParams;
 
 import java.lang.annotation.Retention;
 import java.lang.annotation.RetentionPolicy;
+import java.util.ArrayList;
+import java.util.List;
 
 /**
  * This class defines the bottom sheet that has multiple states and a persistently showing toolbar.
  * Namely, the states are:
  * - PEEK: Only the toolbar is visible at the bottom of the screen.
  * - HALF: The sheet is expanded to consume around half of the screen.
  * - FULL: The sheet is expanded to its full height.
  *
  * All the computation in this file is based off of the bottom of the screen instead of the top
  * for simplicity. This means that the bottom of the screen is 0 on the Y axis.
@@ skipping 17 matching lines @@
 
     /** Shared preference key for tracking whether the help bubble has been shown. */
     private static final String BOTTOM_SHEET_HELP_BUBBLE_SHOWN = "bottom_sheet_help_bubble_shown";
 
     /**
      * The base duration of the settling animation of the sheet. 218 ms is a spec for material
      * design (this is the minimum time a user is guaranteed to pay attention to something).
      */
     private static final long BASE_ANIMATION_DURATION_MS = 218;
 
+    /** The amount of time it takes to transition sheet content in or out. */
+    private static final long TRANSITION_DURATION_MS = 150;
+
     /**
      * The fraction of the way to the next state the sheet must be swiped to animate there when
      * released. This is the value used when there are 3 active states. A smaller value here means
      * a smaller swipe is needed to move the sheet around.
      */
     private static final float THRESHOLD_TO_NEXT_STATE_3 = 0.5f;
 
     /** This is similar to {@link #THRESHOLD_TO_NEXT_STATE_3} but for 2 states instead of 3. */
     private static final float THRESHOLD_TO_NEXT_STATE_2 = 0.3f;
 
@@ skipping 34 matching lines @@
 
     /** Whether or not the user is scrolling the bottom sheet. */
     private boolean mIsScrolling;
 
     /** Track the velocity of the user's scrolls to determine up or down direction. */
     private VelocityTracker mVelocityTracker;
 
     /** The animator used to move the sheet to a fixed state when released by the user. */
     private ValueAnimator mSettleAnimator;
 
-    /** The animator used for the toolbar fades. */
-    private ValueAnimator mToolbarFadeAnimator;
+    /** The animator set responsible for swapping the bottom sheet content. */
+    private AnimatorSet mContentSwapAnimatorSet;
 
     /** The height of the toolbar. */
     private float mToolbarHeight;
 
     /** The width of the view that contains the bottom sheet. */
     private float mContainerWidth;
 
     /** The height of the view that contains the bottom sheet. */
     private float mContainerHeight;
 
@@ skipping 395 matching lines @@
 
                 cancelAnimation();
                 setSheetState(mCurrentState, false);
             }
         });
 
         mPlaceholder = new View(getContext());
         LayoutParams placeHolderParams =
                 new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
         mPlaceholder.setBackgroundColor(
-                ApiCompatibilityUtils.getColor(getResources(), android.R.color.white));
+                ApiCompatibilityUtils.getColor(getResources(), R.color.default_primary_color));
         mBottomSheetContentContainer.addView(mPlaceholder, placeHolderParams);
 
         mToolbarHolder = (FrameLayout) mControlContainer.findViewById(R.id.toolbar_holder);
         mDefaultToolbarView = (BottomToolbarPhone) mControlContainer.findViewById(R.id.toolbar);
     }
 
     /**
      * Set the color of the pull handle used by the toolbar.
      */
     public void updateHandleTint() {
@@ skipping 67 matching lines @@
      * @return The sheet's distance from the bottom of the screen.
      */
     public float getSheetOffsetFromBottom() {
         return mContainerHeight - getTranslationY();
     }
 
     /**
      * Show content in the bottom sheet's content area.
      * @param content The {@link BottomSheetContent} to show.
      */
-    public void showContent(BottomSheetContent content) {
+    public void showContent(final BottomSheetContent content) {
         // If the desired content is already showing, do nothing.
         if (mSheetContent == content) return;
 
-        View newToolbar = content.getToolbarView();
-        View oldToolbar = null;
+        mBottomSheetContentContainer.removeView(mPlaceholder);
 
-        if (mSheetContent != null) {
-            oldToolbar = mSheetContent.getToolbarView();
-            mBottomSheetContentContainer.removeView(mSheetContent.getContentView());
-            mSheetContent = null;
-        }
+        View newToolbar =
+                content.getToolbarView() != null ? content.getToolbarView() : mDefaultToolbarView;
+        View oldToolbar = mSheetContent != null && mSheetContent.getToolbarView() != null
+                ? mSheetContent.getToolbarView()
+                : mDefaultToolbarView;
+        View oldContent = mSheetContent != null ? mSheetContent.getContentView() : null;
 
-        mBottomSheetContentContainer.removeView(mPlaceholder);
-        mSheetContent = content;
-        mBottomSheetContentContainer.addView(mSheetContent.getContentView());
+        // If an animation is already running, end it.
+        if (mContentSwapAnimatorSet != null) mContentSwapAnimatorSet.end();
 
-        doToolbarSwap(newToolbar, oldToolbar);
+        List<Animator> animators = new ArrayList<>();
+        mContentSwapAnimatorSet = new AnimatorSet();
+        mContentSwapAnimatorSet.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                mSheetContent = content;
+                for (BottomSheetObserver o : mObservers) {
+                    o.onSheetContentChanged(content);
+                }
+                updateHandleTint();
+                mContentSwapAnimatorSet = null;
+            }
+        });
 
-        for (BottomSheetObserver o : mObservers) {
-            o.onSheetContentChanged(mSheetContent);
-        }
+        // For the toolbar transition, make sure we don't detach the default toolbar view.
+        animators.add(getViewTransitionAnimator(
+                newToolbar, oldToolbar, mToolbarHolder, mDefaultToolbarView != oldToolbar));
+        animators.add(getViewTransitionAnimator(
+                content.getContentView(), oldContent, mBottomSheetContentContainer, true));
+
+        mContentSwapAnimatorSet.playTogether(animators);
+        mContentSwapAnimatorSet.start();
+
+        // If the existing content is null, end the animation immediately.
+        if (mSheetContent == null) mContentSwapAnimatorSet.end();
     }
 
     /**
-     * Fade between a new toolbar and the old toolbar to be shown. A null parameter can be used to
-     * refer to the default omnibox toolbar. Normally, the new toolbar is attached to the toolbar
-     * container and faded in. In the case of the default toolbar, the old toolbar is faded out.
-     * This is because the default toolbar is always attached to the view hierarchy and sits behind
-     * the attach point for the other toolbars.
-     * @param newToolbar The toolbar that will be shown.
-     * @param oldToolbar The toolbar being replaced.
+     * Creates a transition animation between two views. The old view is faded out completely
+     * before the new view is faded in. There is an option to detach the old view or not.
+     * @param newView The new view to transition to.
+     * @param oldView The old view to transition from.
+     * @param detachOldView Whether or not to detach the old view once faded out.
+     * @return An animator that runs the specified animation.
      */
-    private void doToolbarSwap(View newToolbar, View oldToolbar) {
-        if (mToolbarFadeAnimator != null) mToolbarFadeAnimator.end();
+    private Animator getViewTransitionAnimator(final View newView, final View oldView,
+            final ViewGroup parent, final boolean detachOldView) {
+        if (newView == oldView) return null;
 
-        final View targetToolbar = newToolbar != null ? newToolbar : mDefaultToolbarView;
-        final View currentToolbar = oldToolbar != null ? oldToolbar : mDefaultToolbarView;
+        AnimatorSet animatorSet = new AnimatorSet();
+        List<Animator> animators = new ArrayList<>();
 
-        if (targetToolbar == currentToolbar) return;
-
-        if (targetToolbar != mDefaultToolbarView) {
-            mToolbarHolder.addView(targetToolbar);
-            targetToolbar.setAlpha(0f);
-        } else {
-            targetToolbar.setVisibility(View.VISIBLE);
-            targetToolbar.setAlpha(1f);
+        // Fade out the old view.
+        if (oldView != null) {
+            ValueAnimator fadeOutAnimator = ObjectAnimator.ofFloat(oldView, View.ALPHA, 0);
+            fadeOutAnimator.setDuration(TRANSITION_DURATION_MS);
+            fadeOutAnimator.addListener(new AnimatorListenerAdapter() {
+                @Override
+                public void onAnimationEnd(Animator animation) {
+                    if (detachOldView && oldView.getParent() != null) {
+                        parent.removeView(oldView);
+                    }
+                }
+            });
+            animators.add(fadeOutAnimator);
         }
 
-        mToolbarFadeAnimator = ObjectAnimator.ofFloat(0, 1);
-        mToolbarFadeAnimator.setDuration(BASE_ANIMATION_DURATION_MS);
-        mToolbarFadeAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
-            @Override
-            public void onAnimationUpdate(ValueAnimator animator) {
-                if (targetToolbar == mDefaultToolbarView) {
-                    currentToolbar.setAlpha(1f - animator.getAnimatedFraction());
-                } else {
-                    targetToolbar.setAlpha(animator.getAnimatedFraction());
-                }
-            }
-        });
-        mToolbarFadeAnimator.addListener(new AnimatorListenerAdapter() {
-            @Override
-            public void onAnimationEnd(Animator animation) {
-                targetToolbar.setAlpha(1f);
-                currentToolbar.setAlpha(0f);
-                if (currentToolbar != mDefaultToolbarView) {
-                    mToolbarHolder.removeView(currentToolbar);
-                } else {
-                    currentToolbar.setVisibility(View.GONE);
-                }
-                mToolbarFadeAnimator = null;
-                updateHandleTint();
-            }
-        });
+        // Fade in the new view.
+        if (parent != newView.getParent()) parent.addView(newView);
+        newView.setAlpha(0);
+        ValueAnimator fadeInAnimator = ObjectAnimator.ofFloat(newView, View.ALPHA, 1);
+        fadeInAnimator.setDuration(TRANSITION_DURATION_MS);
+        animators.add(fadeInAnimator);
 
-        mToolbarFadeAnimator.start();
+        animatorSet.playSequentially(animators);
+
+        return animatorSet;
     }
 
     /**
      * Determines if a touch event is inside the toolbar. This assumes the toolbar is the full
      * width of the screen and that the toolbar is at the top of the bottom sheet.
      * @param e The motion event to test.
      * @return True if the event occured in the toolbar region.
      */
     private boolean isTouchEventInToolbar(MotionEvent e) {
         if (mControlContainer == null) return false;
@@ skipping 406 matching lines @@
                 getContext(), mControlContainer, R.string.bottom_sheet_help_bubble_message);
         int inset = getContext().getResources().getDimensionPixelSize(
                 R.dimen.bottom_sheet_help_bubble_inset);
         helpBubble.setInsetPx(0, inset, 0, inset);
         helpBubble.setDismissOnTouchInteraction(true);
         helpBubble.show();
 
         preferences.edit().putBoolean(BOTTOM_SHEET_HELP_BUBBLE_SHOWN, true).apply();
     }
 }