From f9030c7c8d20d14a512f347e24c25bdb5d8e4ccf Mon Sep 17 00:00:00 2001
From: Robert Snoeberger <snoeberger@google.com>
Date: Mon, 22 Apr 2019 16:22:49 -0400
Subject: [PATCH] Transition to bold when shrinking clock

Bug: 130223602
Test: visual - AOD to lock screen while playing music
Change-Id: Id03f93854bdb98a83664dc651cf1f30618f09176
---
 .../layout/keyguard_clock_switch.xml          | 15 ++++
 .../SystemUI/res-keyguard/values/styles.xml   |  7 ++
 .../android/keyguard/KeyguardClockSwitch.java | 87 +++++++++++++++----
 3 files changed, 92 insertions(+), 17 deletions(-)

diff --git a/packages/SystemUI/res-keyguard/layout/keyguard_clock_switch.xml b/packages/SystemUI/res-keyguard/layout/keyguard_clock_switch.xml
index 463367b2c6000..86ed9e3c8331a 100644
--- a/packages/SystemUI/res-keyguard/layout/keyguard_clock_switch.xml
+++ b/packages/SystemUI/res-keyguard/layout/keyguard_clock_switch.xml
@@ -33,6 +33,21 @@
         <include
              android:id="@+id/default_clock_view"
              layout="@layout/text_clock" />
+        <TextClock
+             android:id="@+id/default_clock_view_bold"
+             android:layout_width="match_parent"
+             android:layout_height="wrap_content"
+             android:layout_gravity="center_horizontal"
+             android:gravity="center_horizontal"
+             android:letterSpacing="0.03"
+             android:textColor="?attr/wallpaperTextColor"
+             android:singleLine="true"
+             style="@style/widget_big_bold"
+             android:format12Hour="@string/keyguard_widget_12_hours_format"
+             android:format24Hour="@string/keyguard_widget_24_hours_format"
+             android:elegantTextHeight="false"
+             android:visibility="gone"
+             />
     </FrameLayout>
     <include layout="@layout/keyguard_status_area"
         android:id="@+id/keyguard_status_area"
diff --git a/packages/SystemUI/res-keyguard/values/styles.xml b/packages/SystemUI/res-keyguard/values/styles.xml
index 8bbc270573f16..6e4416a9caa29 100644
--- a/packages/SystemUI/res-keyguard/values/styles.xml
+++ b/packages/SystemUI/res-keyguard/values/styles.xml
@@ -66,6 +66,13 @@
         <item name="android:fontFeatureSettings">@*android:string/config_headlineFontFeatureSettings</item>
         <item name="android:ellipsize">none</item>
     </style>
+    <style name="widget_big_bold">
+        <item name="android:textStyle">bold</item>
+        <item name="android:textSize">@dimen/widget_big_font_size</item>
+        <item name="android:paddingBottom">@dimen/bottom_text_spacing_digital</item>
+        <item name="android:fontFamily">@*android:string/config_headlineFontFamily</item>
+        <item name="android:ellipsize">none</item>
+    </style>
 
     <style name="BouncerSecurityContainer">
         <item name="android:layout_gravity">center_horizontal|bottom</item>
diff --git a/packages/SystemUI/src/com/android/keyguard/KeyguardClockSwitch.java b/packages/SystemUI/src/com/android/keyguard/KeyguardClockSwitch.java
index fbb30d23c05f5..20de4d10692d0 100644
--- a/packages/SystemUI/src/com/android/keyguard/KeyguardClockSwitch.java
+++ b/packages/SystemUI/src/com/android/keyguard/KeyguardClockSwitch.java
@@ -3,7 +3,6 @@ package com.android.keyguard;
 import static com.android.systemui.util.InjectionInflationController.VIEW_CONTEXT;
 
 import android.animation.Animator;
-import android.animation.AnimatorListenerAdapter;
 import android.animation.AnimatorSet;
 import android.animation.ValueAnimator;
 import android.app.WallpaperManager;
@@ -12,6 +11,7 @@ import android.graphics.Paint;
 import android.graphics.Paint.Style;
 import android.transition.ChangeBounds;
 import android.transition.Transition;
+import android.transition.TransitionListenerAdapter;
 import android.transition.TransitionManager;
 import android.transition.TransitionValues;
 import android.util.AttributeSet;
@@ -67,6 +67,11 @@ public class KeyguardClockSwitch extends RelativeLayout {
      */
     private final Transition mTransition;
 
+    /**
+     * Listener for layout transitions.
+     */
+    private final Transition.TransitionListener mTransitionListener;
+
     /**
      * Optional/alternative clock injected via plugin.
      */
@@ -77,6 +82,12 @@ public class KeyguardClockSwitch extends RelativeLayout {
      */
     private TextClock mClockView;
 
+    /**
+     * Default clock, bold version.
+     * Used to transition to bold when shrinking the default clock.
+     */
+    private TextClock mClockViewBold;
+
     /**
      * Frame for default and custom clock.
      */
@@ -142,6 +153,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
         mSysuiColorExtractor = colorExtractor;
         mClockManager = clockManager;
         mTransition = new ClockBoundsTransition();
+        mTransitionListener = new ClockBoundsTransitionListener();
     }
 
     /**
@@ -155,6 +167,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
     protected void onFinishInflate() {
         super.onFinishInflate();
         mClockView = findViewById(R.id.default_clock_view);
+        mClockViewBold = findViewById(R.id.default_clock_view_bold);
         mSmallClockFrame = findViewById(R.id.clock_view);
         mKeyguardStatusArea = findViewById(R.id.keyguard_status_area);
     }
@@ -165,6 +178,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
         mClockManager.addOnClockChangedListener(mClockChangedListener);
         mStatusBarStateController.addCallback(mStateListener);
         mSysuiColorExtractor.addOnColorsChangedListener(mColorsListener);
+        mTransition.addListener(mTransitionListener);
         updateColors();
     }
 
@@ -174,6 +188,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
         mClockManager.removeOnClockChangedListener(mClockChangedListener);
         mStatusBarStateController.removeCallback(mStateListener);
         mSysuiColorExtractor.removeOnColorsChangedListener(mColorsListener);
+        mTransition.removeListener(mTransitionListener);
         setClockPlugin(null);
     }
 
@@ -193,6 +208,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
         }
         if (plugin == null) {
             mClockView.setVisibility(View.VISIBLE);
+            mClockViewBold.setVisibility(View.INVISIBLE);
             mKeyguardStatusArea.setVisibility(View.VISIBLE);
             return;
         }
@@ -203,6 +219,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
                     new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                             ViewGroup.LayoutParams.WRAP_CONTENT));
             mClockView.setVisibility(View.GONE);
+            mClockViewBold.setVisibility(View.GONE);
         }
         View bigClockView = plugin.getBigClockView();
         if (bigClockView != null && mBigClockContainer != null) {
@@ -242,6 +259,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
      */
     public void setStyle(Style style) {
         mClockView.getPaint().setStyle(style);
+        mClockViewBold.getPaint().setStyle(style);
         if (mClockPlugin != null) {
             mClockPlugin.setStyle(style);
         }
@@ -252,6 +270,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
      */
     public void setTextColor(int color) {
         mClockView.setTextColor(color);
+        mClockViewBold.setTextColor(color);
         if (mClockPlugin != null) {
             mClockPlugin.setTextColor(color);
         }
@@ -259,18 +278,22 @@ public class KeyguardClockSwitch extends RelativeLayout {
 
     public void setShowCurrentUserTime(boolean showCurrentUserTime) {
         mClockView.setShowCurrentUserTime(showCurrentUserTime);
+        mClockViewBold.setShowCurrentUserTime(showCurrentUserTime);
     }
 
     public void setTextSize(int unit, float size) {
         mClockView.setTextSize(unit, size);
+        mClockViewBold.setTextSize(unit, size);
     }
 
     public void setFormat12Hour(CharSequence format) {
         mClockView.setFormat12Hour(format);
+        mClockViewBold.setFormat12Hour(format);
     }
 
     public void setFormat24Hour(CharSequence format) {
         mClockView.setFormat24Hour(format);
+        mClockViewBold.setFormat24Hour(format);
     }
 
     /**
@@ -316,6 +339,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
      */
     public void refresh() {
         mClockView.refresh();
+        mClockViewBold.refresh();
         if (mClockPlugin != null) {
             mClockPlugin.onTimeTick();
         }
@@ -356,8 +380,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
 
     /**
      * Sets if the keyguard slice is showing a center-aligned header. We need a smaller clock in
-     * these
-     * cases.
+     * these cases.
      */
     public void setKeyguardShowingHeader(boolean hasHeader) {
         if (mShowingHeader == hasHeader || hasCustomClock()) {
@@ -371,8 +394,11 @@ public class KeyguardClockSwitch extends RelativeLayout {
         int paddingBottom = mContext.getResources().getDimensionPixelSize(mShowingHeader
                 ? R.dimen.widget_vertical_padding_clock : R.dimen.header_subtitle_padding);
         mClockView.setTextSize(TypedValue.COMPLEX_UNIT_PX, fontSize);
+        mClockViewBold.setTextSize(TypedValue.COMPLEX_UNIT_PX, fontSize);
         mClockView.setPadding(mClockView.getPaddingLeft(), mClockView.getPaddingTop(),
                 mClockView.getPaddingRight(), paddingBottom);
+        mClockViewBold.setPadding(mClockViewBold.getPaddingLeft(), mClockViewBold.getPaddingTop(),
+                mClockViewBold.getPaddingRight(), paddingBottom);
     }
 
     @VisibleForTesting(otherwise = VisibleForTesting.NONE)
@@ -389,6 +415,7 @@ public class KeyguardClockSwitch extends RelativeLayout {
         pw.println("KeyguardClockSwitch:");
         pw.println("  mClockPlugin: " + mClockPlugin);
         pw.println("  mClockView: " + mClockView);
+        pw.println("  mClockViewBold: " + mClockViewBold);
         pw.println("  mSmallClockFrame: " + mSmallClockFrame);
         pw.println("  mBigClockContainer: " + mBigClockContainer);
         pw.println("  mKeyguardStatusArea: " + mKeyguardStatusArea);
@@ -400,11 +427,15 @@ public class KeyguardClockSwitch extends RelativeLayout {
 
     /**
      * Special layout transition that scales the clock view as its bounds change, to make it look
-     * like
-     * the text is shrinking.
+     * like the text is shrinking.
      */
     private class ClockBoundsTransition extends ChangeBounds {
 
+        /**
+         * Animation fraction when text is transitioned to/from bold.
+         */
+        private static final float TO_BOLD_TRANSITION_FRACTION = 0.7f;
+
         ClockBoundsTransition() {
             setDuration(KeyguardSliceView.DEFAULT_ANIM_DURATION / 2);
             setInterpolator(Interpolators.LINEAR_OUT_SLOW_IN);
@@ -435,29 +466,51 @@ public class KeyguardClockSwitch extends RelativeLayout {
                         .getDimensionPixelSize(R.dimen.widget_small_font_size);
                 float startScale = mShowingHeader
                         ? bigFontSize / smallFontSize : smallFontSize / bigFontSize;
+                final int normalViewVisibility = mShowingHeader ? View.INVISIBLE : View.VISIBLE;
+                final int boldViewVisibility = mShowingHeader ? View.VISIBLE : View.INVISIBLE;
+                final float boldTransitionFraction = mShowingHeader ? TO_BOLD_TRANSITION_FRACTION :
+                        1f - TO_BOLD_TRANSITION_FRACTION;
                 boundsAnimator.addUpdateListener(animation -> {
+                    final float fraction = animation.getAnimatedFraction();
+                    if (fraction > boldTransitionFraction) {
+                        mClockView.setVisibility(normalViewVisibility);
+                        mClockViewBold.setVisibility(boldViewVisibility);
+                    }
                     float scale = MathUtils.lerp(startScale, 1f /* stop */,
                             animation.getAnimatedFraction());
                     mClockView.setPivotX(mClockView.getWidth() / 2f);
+                    mClockViewBold.setPivotX(mClockViewBold.getWidth() / 2f);
                     mClockView.setPivotY(0);
+                    mClockViewBold.setPivotY(0);
                     mClockView.setScaleX(scale);
+                    mClockViewBold.setScaleX(scale);
                     mClockView.setScaleY(scale);
-                });
-                boundsAnimator.addListener(new AnimatorListenerAdapter() {
-                    @Override
-                    public void onAnimationEnd(Animator animator) {
-                        mClockView.setScaleX(1f);
-                        mClockView.setScaleY(1f);
-                    }
-
-                    @Override
-                    public void onAnimationCancel(Animator animator) {
-                        onAnimationEnd(animator);
-                    }
+                    mClockViewBold.setScaleY(scale);
                 });
             }
 
             return animator;
         }
     }
+
+    /**
+     * Transition listener for layout transition that scales the clock view.
+     */
+    private class ClockBoundsTransitionListener extends TransitionListenerAdapter {
+
+        @Override
+        public void onTransitionEnd(Transition transition) {
+            mClockView.setVisibility(mShowingHeader ? View.INVISIBLE : View.VISIBLE);
+            mClockViewBold.setVisibility(mShowingHeader ? View.VISIBLE : View.INVISIBLE);
+            mClockView.setScaleX(1f);
+            mClockViewBold.setScaleX(1f);
+            mClockView.setScaleY(1f);
+            mClockViewBold.setScaleY(1f);
+        }
+
+        @Override
+        public void onTransitionCancel(Transition transition) {
+            onTransitionEnd(transition);
+        }
+    }
 }