From 5a1c26ea2996ba383af99d90fcf3c241d6be816b Mon Sep 17 00:00:00 2001
From: Matt Pietal <mpietal@google.com>
Date: Fri, 15 Jan 2021 14:08:55 -0500
Subject: [PATCH] Bouncer - New PIN animations

Align all PIN views (PIN, SIM, PUK) to latest UX guidance, including
new heights and animations for color and corner radius. Mark all alpha
chars as GONE for now, and potentially remove in the near future,
pending feedback.

Bug: 172360102
Test: manual

Change-Id: I53cefb950daad29acb70c00b71b44e073ab6dac5
---
 .../drawable/ic_keyboard_tab_36dp.xml         | 15 ++-
 .../drawable/num_pad_key_background.xml       | 23 +++++
 .../res-keyguard/drawable/pin_divider.xml     | 20 ----
 .../drawable/ripple_drawable_pin.xml          | 20 ----
 .../layout/keyguard_num_pad_key.xml           |  5 +-
 .../res-keyguard/layout/keyguard_pin_view.xml | 51 ++++------
 .../layout/keyguard_sim_pin_view.xml          | 44 ++++-----
 .../layout/keyguard_sim_puk_view.xml          | 43 ++++-----
 .../SystemUI/res-keyguard/values/attrs.xml    |  2 +
 .../SystemUI/res-keyguard/values/dimens.xml   |  6 ++
 .../SystemUI/res-keyguard/values/styles.xml   | 23 +++--
 packages/SystemUI/res/values/styles.xml       |  1 +
 .../keyguard/KeyguardPinBasedInputView.java   | 15 +--
 .../com/android/keyguard/NumPadAnimator.java  | 96 +++++++++++++++++++
 .../com/android/keyguard/NumPadButton.java    | 67 +++++++++++++
 .../src/com/android/keyguard/NumPadKey.java   | 37 ++++---
 16 files changed, 304 insertions(+), 164 deletions(-)
 create mode 100644 packages/SystemUI/res-keyguard/drawable/num_pad_key_background.xml
 delete mode 100644 packages/SystemUI/res-keyguard/drawable/pin_divider.xml
 delete mode 100644 packages/SystemUI/res-keyguard/drawable/ripple_drawable_pin.xml
 create mode 100644 packages/SystemUI/src/com/android/keyguard/NumPadAnimator.java
 create mode 100644 packages/SystemUI/src/com/android/keyguard/NumPadButton.java

diff --git a/packages/SystemUI/res-keyguard/drawable/ic_keyboard_tab_36dp.xml b/packages/SystemUI/res-keyguard/drawable/ic_keyboard_tab_36dp.xml
index 21c9051157d1e..b844515f10882 100644
--- a/packages/SystemUI/res-keyguard/drawable/ic_keyboard_tab_36dp.xml
+++ b/packages/SystemUI/res-keyguard/drawable/ic_keyboard_tab_36dp.xml
@@ -13,8 +13,13 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License
   -->
-<vector android:height="36sp" android:viewportHeight="36"
-        android:viewportWidth="36" android:width="36sp" xmlns:android="http://schemas.android.com/apk/res/android">
-    <path android:fillColor="?android:attr/colorAccent" android:pathData="M18,18m-18,0a18,18 0,1 1,36 0a18,18 0,1 1,-36 0"/>
-    <path android:fillColor="?android:attr/textColorPrimaryInverse" android:pathData="M17.59,13.41L21.17,17H7v2h14.17l-3.59,3.59L19,24l6,-6l-6,-6L17.59,13.41zM26,12v12h2V12H26z"/>
-</vector>
\ No newline at end of file
+<vector
+     xmlns:android="http://schemas.android.com/apk/res/android"
+     android:height="36sp"
+     android:viewportHeight="36"
+     android:viewportWidth="36"
+     android:width="36sp">
+  <path android:fillColor="?android:attr/colorBackground"
+        android:pathData="M17.59,13.41L21.17,17H7v2h14.17l-3.59,3.59L19,24l6,-6l-6,-6L17.59,
+                          13.41zM26,12v12h2V12H26z"/>
+</vector>
diff --git a/packages/SystemUI/res-keyguard/drawable/num_pad_key_background.xml b/packages/SystemUI/res-keyguard/drawable/num_pad_key_background.xml
new file mode 100644
index 0000000000000..b7a9fafd0c44c
--- /dev/null
+++ b/packages/SystemUI/res-keyguard/drawable/num_pad_key_background.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+/*
+* Copyright 2021, The Android Open Source Project
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+-->
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android">
+  <solid android:color="?android:attr/colorBackground" />
+  <corners android:radius="10dp" />
+</shape>
diff --git a/packages/SystemUI/res-keyguard/drawable/pin_divider.xml b/packages/SystemUI/res-keyguard/drawable/pin_divider.xml
deleted file mode 100644
index 39104b575ecd9..0000000000000
--- a/packages/SystemUI/res-keyguard/drawable/pin_divider.xml
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (C) 2017 The Android Open Source Project
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License
-  -->
-
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="@color/pin_divider_color" />
-</shape>
\ No newline at end of file
diff --git a/packages/SystemUI/res-keyguard/drawable/ripple_drawable_pin.xml b/packages/SystemUI/res-keyguard/drawable/ripple_drawable_pin.xml
deleted file mode 100644
index 51c442abf2fd3..0000000000000
--- a/packages/SystemUI/res-keyguard/drawable/ripple_drawable_pin.xml
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (C) 2018 The Android Open Source Project
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License
-  -->
-
-<ripple xmlns:android="http://schemas.android.com/apk/res/android"
-        android:color="?android:attr/colorControlHighlight"
-        android:radius="40dp"/>
diff --git a/packages/SystemUI/res-keyguard/layout/keyguard_num_pad_key.xml b/packages/SystemUI/res-keyguard/layout/keyguard_num_pad_key.xml
index 72591d4665c9e..411fea5dd22de 100644
--- a/packages/SystemUI/res-keyguard/layout/keyguard_num_pad_key.xml
+++ b/packages/SystemUI/res-keyguard/layout/keyguard_num_pad_key.xml
@@ -17,15 +17,18 @@
 <merge xmlns:android="http://schemas.android.com/apk/res/android">
     <TextView
         android:id="@+id/digit_text"
-        style="@style/Widget.TextView.NumPadKey"
+        style="@style/Widget.TextView.NumPadKey.Digit"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         />
+    <!-- b/172360102: Setting visibility to gone for now, in order to see if there are many
+         issues with removing the alpha characters. -->
     <TextView
         android:id="@+id/klondike_text"
         style="@style/Widget.TextView.NumPadKey.Klondike"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:visibility="gone"
         />
 </merge>
 
diff --git a/packages/SystemUI/res-keyguard/layout/keyguard_pin_view.xml b/packages/SystemUI/res-keyguard/layout/keyguard_pin_view.xml
index 87c98d2e9597f..aa14645a6093b 100644
--- a/packages/SystemUI/res-keyguard/layout/keyguard_pin_view.xml
+++ b/packages/SystemUI/res-keyguard/layout/keyguard_pin_view.xml
@@ -24,7 +24,6 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         androidprv:layout_maxWidth="@dimen/keyguard_security_width"
-        androidprv:layout_maxHeight="@dimen/keyguard_security_max_height"
         android:orientation="vertical"
         >
     <LinearLayout
@@ -34,37 +33,34 @@
             android:orientation="vertical"
             android:layout_weight="1"
             android:layoutDirection="ltr"
+            android:layout_marginBottom="8dp"
             >
-        <com.android.keyguard.AlphaOptimizedRelativeLayout
-                android:id="@+id/row0"
-                android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
-                android:paddingBottom="16dp"
-                >
+      <Space
+          android:layout_width="match_parent"
+          android:layout_height="0dp"
+          android:layout_weight="1"
+          />
+      <com.android.keyguard.AlphaOptimizedRelativeLayout
+          android:id="@+id/row0"
+          android:layout_width="match_parent"
+          android:layout_height="wrap_content"
+          android:paddingBottom="16dp"
+          >
             <com.android.keyguard.PasswordTextView
                     android:id="@+id/pinEntry"
                     android:layout_width="@dimen/keyguard_security_width"
-                    android:layout_height="match_parent"
+                    android:layout_height="@dimen/keyguard_password_height"
                     style="@style/Widget.TextView.Password"
                     android:layout_centerHorizontal="true"
                     android:layout_marginRight="72dp"
                     androidprv:scaledTextSize="@integer/scaled_password_text_size"
                     android:contentDescription="@string/keyguard_accessibility_pin_area"
                     />
-            <View
-                    android:id="@+id/divider"
-                    android:layout_width="match_parent"
-                    android:layout_height="1dp"
-                    android:layout_alignParentBottom="true"
-                    android:background="@drawable/pin_divider"
-                    />
         </com.android.keyguard.AlphaOptimizedRelativeLayout>
         <LinearLayout
                 android:id="@+id/row1"
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
                 >
             <com.android.keyguard.NumPadKey
@@ -95,8 +91,7 @@
         <LinearLayout
                 android:id="@+id/row2"
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
                 >
             <com.android.keyguard.NumPadKey
@@ -127,9 +122,8 @@
         <LinearLayout
                 android:id="@+id/row3"
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
-                android:layout_weight="1"
                 >
             <com.android.keyguard.NumPadKey
                     android:id="@+id/key7"
@@ -159,18 +153,16 @@
         <LinearLayout
                 android:id="@+id/row4"
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
                 >
-            <com.android.keyguard.AlphaOptimizedImageButton
+            <com.android.keyguard.NumPadButton
                     android:id="@+id/delete_button"
                     android:layout_width="0px"
                     android:layout_height="match_parent"
                     android:layout_weight="1"
-                    android:background="@drawable/ripple_drawable_pin"
                     android:contentDescription="@string/keyboardview_keycode_delete"
-                    style="@style/Keyguard.ImageButton.NumPadDelete"
+                    style="@style/NumPadKey.Delete"
                     />
             <com.android.keyguard.NumPadKey
                     android:id="@+id/key0"
@@ -180,13 +172,12 @@
                     androidprv:textView="@+id/pinEntry"
                     androidprv:digit="0"
                     />
-            <com.android.keyguard.AlphaOptimizedImageButton
+            <com.android.keyguard.NumPadButton
                     android:id="@+id/key_enter"
                     android:layout_width="0px"
                     android:layout_height="match_parent"
                     android:layout_weight="1"
-                    style="@style/Keyguard.ImageButton.NumPadEnter"
-                    android:background="@drawable/ripple_drawable_pin"
+                    style="@style/NumPadKey.Enter"
                     android:contentDescription="@string/keyboardview_keycode_enter"
                     />
         </LinearLayout>
diff --git a/packages/SystemUI/res-keyguard/layout/keyguard_sim_pin_view.xml b/packages/SystemUI/res-keyguard/layout/keyguard_sim_pin_view.xml
index 912d7bbf7ef50..64ccefd2e4eea 100644
--- a/packages/SystemUI/res-keyguard/layout/keyguard_sim_pin_view.xml
+++ b/packages/SystemUI/res-keyguard/layout/keyguard_sim_pin_view.xml
@@ -25,9 +25,14 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         androidprv:layout_maxWidth="@dimen/keyguard_security_width"
-        androidprv:layout_maxHeight="@dimen/keyguard_security_max_height"
         android:gravity="center_horizontal">
 
+  <Space
+      android:layout_width="match_parent"
+      android:layout_height="0dp"
+      android:layout_weight="1"
+      />
+
     <ImageView
             android:id="@+id/keyguard_sim"
             android:layout_width="match_parent"
@@ -37,10 +42,9 @@
 
     <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="0dp"
+            android:layout_height="wrap_content"
             android:orientation="vertical"
             android:gravity="center"
-            android:layout_weight="1"
             android:layoutDirection="ltr"
             >
         <include layout="@layout/keyguard_esim_area"
@@ -52,32 +56,23 @@
         <RelativeLayout
                 android:id="@+id/row0"
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:paddingBottom="16dp"
                 >
             <com.android.keyguard.PasswordTextView
                     android:id="@+id/simPinEntry"
                     android:layout_width="@dimen/keyguard_security_width"
-                    android:layout_height="match_parent"
+                    android:layout_height="@dimen/keyguard_password_height"
                     android:gravity="center"
                     android:layout_centerHorizontal="true"
                     android:layout_marginRight="72dp"
                     androidprv:scaledTextSize="@integer/scaled_password_text_size"
                     android:contentDescription="@string/keyguard_accessibility_sim_pin_area"
                     />
-            <View
-                    android:id="@+id/divider"
-                    android:layout_width="match_parent"
-                    android:layout_height="1dp"
-                    android:layout_alignParentBottom="true"
-                    android:background="@drawable/pin_divider"
-                    />
         </RelativeLayout>
         <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
                 >
             <com.android.keyguard.NumPadKey
@@ -107,8 +102,7 @@
         </LinearLayout>
         <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
                 >
             <com.android.keyguard.NumPadKey
@@ -138,9 +132,8 @@
         </LinearLayout>
         <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
-                android:layout_weight="1"
                 >
             <com.android.keyguard.NumPadKey
                     android:id="@+id/key7"
@@ -169,18 +162,16 @@
         </LinearLayout>
         <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
                 >
-            <com.android.keyguard.AlphaOptimizedImageButton
+            <com.android.keyguard.NumPadButton
                     android:id="@+id/delete_button"
                     android:layout_width="0px"
                     android:layout_height="match_parent"
                     android:layout_weight="1"
-                    android:background="@drawable/ripple_drawable_pin"
                     android:contentDescription="@string/keyboardview_keycode_delete"
-                    style="@style/Keyguard.ImageButton.NumPadDelete"
+                    style="@style/NumPadKey.Delete"
                     />
             <com.android.keyguard.NumPadKey
                     android:id="@+id/key0"
@@ -190,13 +181,12 @@
                     androidprv:textView="@+id/simPinEntry"
                     androidprv:digit="0"
                     />
-            <com.android.keyguard.AlphaOptimizedImageButton
+            <com.android.keyguard.NumPadButton
                     android:id="@+id/key_enter"
                     android:layout_width="0px"
                     android:layout_height="match_parent"
                     android:layout_weight="1"
-                    style="@style/Keyguard.ImageButton.NumPadEnter"
-                    android:background="@drawable/ripple_drawable_pin"
+                    style="@style/NumPadKey.Enter"
                     android:contentDescription="@string/keyboardview_keycode_enter"
                     />
         </LinearLayout>
diff --git a/packages/SystemUI/res-keyguard/layout/keyguard_sim_puk_view.xml b/packages/SystemUI/res-keyguard/layout/keyguard_sim_puk_view.xml
index 81b49648ab628..dc77bd356e556 100644
--- a/packages/SystemUI/res-keyguard/layout/keyguard_sim_puk_view.xml
+++ b/packages/SystemUI/res-keyguard/layout/keyguard_sim_puk_view.xml
@@ -26,9 +26,14 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         androidprv:layout_maxWidth="@dimen/keyguard_security_width"
-        androidprv:layout_maxHeight="@dimen/keyguard_security_max_height"
         android:gravity="center_horizontal">
 
+  <Space
+      android:layout_width="match_parent"
+      android:layout_height="0dp"
+      android:layout_weight="1"
+      />
+
     <ImageView
             android:id="@+id/keyguard_sim"
             android:layout_width="match_parent"
@@ -38,7 +43,7 @@
 
     <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="0dp"
+            android:layout_height="wrap_content"
             android:orientation="vertical"
             android:gravity="center"
             android:layout_weight="1"
@@ -53,32 +58,23 @@
         <RelativeLayout
                 android:id="@+id/row0"
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:paddingBottom="16dp"
                 >
             <com.android.keyguard.PasswordTextView
                     android:id="@+id/pukEntry"
                     android:layout_width="@dimen/keyguard_security_width"
-                    android:layout_height="match_parent"
+                    android:layout_height="@dimen/keyguard_password_height"
                     android:gravity="center"
                     android:layout_centerHorizontal="true"
                     android:layout_marginRight="72dp"
                     androidprv:scaledTextSize="@integer/scaled_password_text_size"
                     android:contentDescription="@string/keyguard_accessibility_sim_puk_area"
                     />
-            <View
-                    android:id="@+id/divider"
-                    android:layout_width="match_parent"
-                    android:layout_height="1dp"
-                    android:layout_alignParentBottom="true"
-                    android:background="@drawable/pin_divider"
-                    />
         </RelativeLayout>
         <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
                 >
             <com.android.keyguard.NumPadKey
@@ -108,8 +104,7 @@
         </LinearLayout>
         <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
                 >
             <com.android.keyguard.NumPadKey
@@ -139,9 +134,8 @@
         </LinearLayout>
         <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
-                android:layout_weight="1"
                 >
             <com.android.keyguard.NumPadKey
                     android:id="@+id/key7"
@@ -170,18 +164,16 @@
         </LinearLayout>
         <LinearLayout
                 android:layout_width="match_parent"
-                android:layout_height="0dp"
-                android:layout_weight="1"
+                android:layout_height="wrap_content"
                 android:orientation="horizontal"
                 >
-            <com.android.keyguard.AlphaOptimizedImageButton
+            <com.android.keyguard.NumPadButton
                     android:id="@+id/delete_button"
                     android:layout_width="0px"
                     android:layout_height="match_parent"
                     android:layout_weight="1"
-                    android:background="@drawable/ripple_drawable_pin"
                     android:contentDescription="@string/keyboardview_keycode_delete"
-                    style="@style/Keyguard.ImageButton.NumPadDelete"
+                    style="@style/NumPadKey.Delete"
                     />
             <com.android.keyguard.NumPadKey
                     android:id="@+id/key0"
@@ -191,13 +183,12 @@
                     androidprv:textView="@+id/pukEntry"
                     androidprv:digit="0"
                     />
-            <com.android.keyguard.AlphaOptimizedImageButton
+            <com.android.keyguard.NumPadButton
                     android:id="@+id/key_enter"
                     android:layout_width="0px"
                     android:layout_height="match_parent"
                     android:layout_weight="1"
-                    style="@style/Keyguard.ImageButton.NumPadEnter"
-                    android:background="@drawable/ripple_drawable_pin"
+                    style="@style/NumPadKey.Enter"
                     android:contentDescription="@string/keyboardview_keycode_enter"
                     />
         </LinearLayout>
diff --git a/packages/SystemUI/res-keyguard/values/attrs.xml b/packages/SystemUI/res-keyguard/values/attrs.xml
index bfcc56cdc660d..eb7a1f73fbc92 100644
--- a/packages/SystemUI/res-keyguard/values/attrs.xml
+++ b/packages/SystemUI/res-keyguard/values/attrs.xml
@@ -40,6 +40,8 @@
 
     <attr name="passwordStyle" format="reference" />
 
+    <attr name="numPadKeyStyle" format="reference" />
+
     <declare-styleable name="AnimatableClockView">
         <attr name="dozeWeight" format="integer" />
         <attr name="lockScreenWeight" format="integer" />
diff --git a/packages/SystemUI/res-keyguard/values/dimens.xml b/packages/SystemUI/res-keyguard/values/dimens.xml
index f9389ce24d96c..aa87107f954f5 100644
--- a/packages/SystemUI/res-keyguard/values/dimens.xml
+++ b/packages/SystemUI/res-keyguard/values/dimens.xml
@@ -33,6 +33,9 @@
          (includes 2x keyguard_security_view_top_margin) -->
     <dimen name="keyguard_security_max_height">450dp</dimen>
 
+    <!-- pin/password field max height -->
+    <dimen name="keyguard_password_height">80dp</dimen>
+
     <!-- Margin around the various security views -->
     <dimen name="keyguard_security_view_top_margin">8dp</dimen>
     <dimen name="keyguard_security_view_lateral_margin">36dp</dimen>
@@ -81,4 +84,7 @@
 
     <!-- The translation for disappearing security views after having solved them. -->
     <dimen name="disappear_y_translation">-32dp</dimen>
+
+    <!-- Spacing around each button used for PIN view -->
+    <dimen name="num_pad_key_margin">2dp</dimen>
 </resources>
diff --git a/packages/SystemUI/res-keyguard/values/styles.xml b/packages/SystemUI/res-keyguard/values/styles.xml
index 71a1cc292ec90..2e99dea6e18b8 100644
--- a/packages/SystemUI/res-keyguard/values/styles.xml
+++ b/packages/SystemUI/res-keyguard/values/styles.xml
@@ -30,7 +30,13 @@
         <item name="android:paddingLeft">12dp</item>
         <item name="android:paddingRight">12dp</item>
     </style>
-    <style name="Widget.TextView.NumPadKey" parent="@android:style/Widget.DeviceDefault.TextView">
+    <style name="NumPadKey" parent="Theme.SystemUI">
+      <item name="android:colorControlNormal">?android:attr/colorBackground</item>
+      <item name="android:colorControlHighlight">?android:attr/colorAccent</item>
+      <item name="android:background">@drawable/num_pad_key_background</item>
+    </style>
+    <style name="Widget.TextView.NumPadKey.Digit"
+           parent="@android:style/Widget.DeviceDefault.TextView">
         <item name="android:singleLine">true</item>
         <item name="android:gravity">center_horizontal|center_vertical</item>
         <item name="android:background">@null</item>
@@ -38,26 +44,25 @@
         <item name="android:textColor">?android:attr/textColorPrimary</item>
         <item name="android:fontFamily">@*android:string/config_headlineFontFamily</item>
         <item name="android:paddingBottom">-16dp</item>
-        <item name="android:colorControlHighlight">?android:attr/textColorPrimary</item>
     </style>
     <style name="Widget.TextView.Password" parent="@android:style/Widget.TextView">
         <item name="android:fontFamily">@*android:string/config_headlineFontFamily</item>
         <item name="android:gravity">center</item>
         <item name="android:textColor">?android:attr/textColorPrimary</item>
     </style>
-    <style name="Keyguard.ImageButton.NumPadDelete" parent="@android:style/Widget.DeviceDefault.ImageButton">
+    <style name="NumPadKey.Delete">
         <item name="android:src">@drawable/ic_backspace_black_24dp</item>
-        <item name="android:paddingBottom">11sp</item>
         <item name="android:tint">?android:attr/textColorSecondary</item>
         <item name="android:tintMode">src_in</item>
-        <item name="android:src">@drawable/ic_backspace_black_24dp</item>
     </style>
-    <style name="Keyguard.ImageButton.NumPadEnter" parent="@android:style/Widget.DeviceDefault.ImageButton">
-        <item name="android:src">@drawable/ic_keyboard_tab_36dp</item>
-        <item name="android:paddingBottom">11sp</item>
+    <style name="NumPadKey.Enter">
+      <item name="android:colorControlNormal">?android:attr/textColorSecondary</item>
+      <item name="android:src">@drawable/ic_keyboard_tab_36dp</item>
     </style>
-    <style name="Widget.TextView.NumPadKey.Klondike">
+    <style name="Widget.TextView.NumPadKey.Klondike"
+           parent="@android:style/Widget.DeviceDefault.TextView">
         <item name="android:textSize">12sp</item>
+        <item name="android:background">@null</item>
         <item name="android:fontFamily">@*android:string/config_bodyFontFamily</item>
         <item name="android:textColor">?android:attr/textColorSecondary</item>
         <item name="android:paddingBottom">0dp</item>
diff --git a/packages/SystemUI/res/values/styles.xml b/packages/SystemUI/res/values/styles.xml
index 6c0635a3ce515..30dcfa734fe14 100644
--- a/packages/SystemUI/res/values/styles.xml
+++ b/packages/SystemUI/res/values/styles.xml
@@ -321,6 +321,7 @@
         <item name="android:colorControlHighlight">@*android:color/primary_text_material_dark</item>
         <item name="*android:lockPatternStyle">@style/LockPatternStyle</item>
         <item name="passwordStyle">@style/PasswordTheme</item>
+        <item name="numPadKeyStyle">@style/NumPadKey</item>
         <item name="backgroundProtectedStyle">@style/BackgroundProtectedStyle</item>
         <item name="android:homeAsUpIndicator">@drawable/ic_arrow_back</item>
         <item name="shadowRadius">@dimen/keyguard_shadow_radius</item>
diff --git a/packages/SystemUI/src/com/android/keyguard/KeyguardPinBasedInputView.java b/packages/SystemUI/src/com/android/keyguard/KeyguardPinBasedInputView.java
index 4ddfccb21c73f..6a6b964c2a8f4 100644
--- a/packages/SystemUI/src/com/android/keyguard/KeyguardPinBasedInputView.java
+++ b/packages/SystemUI/src/com/android/keyguard/KeyguardPinBasedInputView.java
@@ -27,10 +27,8 @@ import android.content.Context;
 import android.content.res.ColorStateList;
 import android.graphics.Rect;
 import android.util.AttributeSet;
-import android.view.ContextThemeWrapper;
 import android.view.KeyEvent;
 import android.view.View;
-import android.widget.ImageButton;
 
 import com.android.internal.widget.LockscreenCredential;
 import com.android.settingslib.Utils;
@@ -42,10 +40,9 @@ import com.android.systemui.R;
 public abstract class KeyguardPinBasedInputView extends KeyguardAbsKeyInputView {
 
     protected PasswordTextView mPasswordEntry;
-    private View mOkButton;
-    private ImageButton mDeleteButton;
+    private NumPadButton mOkButton;
+    private NumPadButton mDeleteButton;
     private NumPadKey[] mButtons = new NumPadKey[10];
-    private View mDivider;
 
     public KeyguardPinBasedInputView(Context context) {
         this(context, null);
@@ -152,7 +149,6 @@ public abstract class KeyguardPinBasedInputView extends KeyguardAbsKeyInputView
 
         mDeleteButton = findViewById(R.id.delete_button);
         mDeleteButton.setVisibility(View.VISIBLE);
-        mDivider = findViewById(R.id.divider);
 
         mButtons[0] = findViewById(R.id.key0);
         mButtons[1] = findViewById(R.id.key1);
@@ -181,12 +177,9 @@ public abstract class KeyguardPinBasedInputView extends KeyguardAbsKeyInputView
         int deleteColor = Utils.getColorAttr(getContext(), android.R.attr.textColorSecondary)
                 .getDefaultColor();
         mDeleteButton.setImageTintList(ColorStateList.valueOf(deleteColor));
-        mDivider.setBackground(getContext().getDrawable(R.drawable.pin_divider));
 
-        ContextThemeWrapper themedContext = new ContextThemeWrapper(mContext,
-                R.style.Widget_TextView_NumPadKey);
-        mDeleteButton.setBackground(themedContext.getDrawable(R.drawable.ripple_drawable_pin));
-        mOkButton.setBackground(themedContext.getDrawable(R.drawable.ripple_drawable_pin));
+        mDeleteButton.reloadColors();
+        mOkButton.reloadColors();
     }
 
     @Override
diff --git a/packages/SystemUI/src/com/android/keyguard/NumPadAnimator.java b/packages/SystemUI/src/com/android/keyguard/NumPadAnimator.java
new file mode 100644
index 0000000000000..cdf98581e29bd
--- /dev/null
+++ b/packages/SystemUI/src/com/android/keyguard/NumPadAnimator.java
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.android.keyguard;
+
+import android.animation.ValueAnimator;
+import android.content.Context;
+import android.content.res.TypedArray;
+import android.graphics.drawable.GradientDrawable;
+import android.view.ContextThemeWrapper;
+import android.view.ViewGroup;
+
+import androidx.annotation.StyleRes;
+
+import com.android.internal.graphics.ColorUtils;
+import com.android.systemui.Interpolators;
+import com.android.systemui.R;
+
+/**
+ * Provides background color and radius animations for key pad buttons.
+ */
+class NumPadAnimator {
+    private ValueAnimator mAnimator;
+    private GradientDrawable mBackground;
+    private int mMargin;
+    private int mNormalColor;
+    private int mHighlightColor;
+    private int mStyle;
+
+    NumPadAnimator(Context context, final GradientDrawable background, @StyleRes int style) {
+        mBackground = (GradientDrawable) background.mutate();
+        mStyle = style;
+
+        reloadColors(context);
+
+        mMargin = context.getResources().getDimensionPixelSize(R.dimen.num_pad_key_margin);
+
+        // Actual values will be updated later, usually during an onLayout() call
+        mAnimator = ValueAnimator.ofFloat(0f);
+        mAnimator.setDuration(250);
+        mAnimator.setInterpolator(Interpolators.LINEAR);
+        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+                public void onAnimationUpdate(ValueAnimator anim) {
+                    mBackground.setCornerRadius((float) anim.getAnimatedValue());
+                    mBackground.setColor(ColorUtils.blendARGB(mHighlightColor, mNormalColor,
+                            anim.getAnimatedFraction()));
+                }
+        });
+
+    }
+
+    void updateMargin(ViewGroup.MarginLayoutParams lp) {
+        lp.setMargins(mMargin, mMargin, mMargin, mMargin);
+    }
+
+    void onLayout(int height) {
+        float startRadius = height / 10f;
+        float endRadius = height / 2f;
+        mBackground.setCornerRadius(endRadius);
+        mAnimator.setFloatValues(startRadius, endRadius);
+    }
+
+    void start() {
+        mAnimator.cancel();
+        mAnimator.start();
+    }
+
+    /**
+     * Reload colors from resources.
+     **/
+    void reloadColors(Context context) {
+        int[] customAttrs = {android.R.attr.colorControlNormal,
+                android.R.attr.colorControlHighlight};
+
+        ContextThemeWrapper ctw = new ContextThemeWrapper(context, mStyle);
+        TypedArray a = ctw.obtainStyledAttributes(customAttrs);
+        mNormalColor = a.getColor(0, 0);
+        mHighlightColor = a.getColor(1, 0);
+        a.recycle();
+
+        mBackground.setColor(mNormalColor);
+    }
+}
+
diff --git a/packages/SystemUI/src/com/android/keyguard/NumPadButton.java b/packages/SystemUI/src/com/android/keyguard/NumPadButton.java
new file mode 100644
index 0000000000000..3728106776498
--- /dev/null
+++ b/packages/SystemUI/src/com/android/keyguard/NumPadButton.java
@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.android.keyguard;
+
+import android.content.Context;
+import android.graphics.drawable.GradientDrawable;
+import android.util.AttributeSet;
+import android.view.MotionEvent;
+import android.view.ViewGroup;
+
+/**
+ * Similar to the {@link NumPadKey}, but displays an image.
+ */
+public class NumPadButton extends AlphaOptimizedImageButton {
+
+    private final NumPadAnimator mAnimator;
+
+    public NumPadButton(Context context, AttributeSet attrs) {
+        super(context, attrs);
+
+        mAnimator = new NumPadAnimator(context, (GradientDrawable) getBackground(),
+                attrs.getStyleAttribute());
+    }
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        mAnimator.updateMargin((ViewGroup.MarginLayoutParams) getLayoutParams());
+
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+
+        // Set width/height to the same value to ensure a smooth circle for the bg
+        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
+    }
+
+    @Override
+    protected void onLayout(boolean changed, int l, int t, int r, int b) {
+        super.onLayout(changed, l, t, r, b);
+
+        mAnimator.onLayout(b - t);
+    }
+
+    @Override
+    public boolean onTouchEvent(MotionEvent event) {
+        mAnimator.start();
+        return super.onTouchEvent(event);
+    }
+
+    /**
+     * Reload colors from resources.
+     **/
+    public void reloadColors() {
+        mAnimator.reloadColors(getContext());
+    }
+}
diff --git a/packages/SystemUI/src/com/android/keyguard/NumPadKey.java b/packages/SystemUI/src/com/android/keyguard/NumPadKey.java
index a5182055e14d1..8ebcb20fe63f3 100644
--- a/packages/SystemUI/src/com/android/keyguard/NumPadKey.java
+++ b/packages/SystemUI/src/com/android/keyguard/NumPadKey.java
@@ -18,11 +18,10 @@ package com.android.keyguard;
 
 import android.content.Context;
 import android.content.res.TypedArray;
-import android.graphics.drawable.Drawable;
+import android.graphics.drawable.GradientDrawable;
 import android.os.PowerManager;
 import android.os.SystemClock;
 import android.util.AttributeSet;
-import android.view.ContextThemeWrapper;
 import android.view.HapticFeedbackConstants;
 import android.view.LayoutInflater;
 import android.view.MotionEvent;
@@ -48,6 +47,8 @@ public class NumPadKey extends ViewGroup {
     private int mTextViewResId;
     private PasswordTextView mTextView;
 
+    private final NumPadAnimator mAnimator;
+
     private View.OnClickListener mListener = new View.OnClickListener() {
         @Override
         public void onClick(View thisView) {
@@ -73,7 +74,7 @@ public class NumPadKey extends ViewGroup {
     }
 
     public NumPadKey(Context context, AttributeSet attrs) {
-        this(context, attrs, 0);
+        this(context, attrs, R.attr.numPadKeyStyle);
     }
 
     public NumPadKey(Context context, AttributeSet attrs, int defStyle) {
@@ -84,7 +85,8 @@ public class NumPadKey extends ViewGroup {
         super(context, attrs, defStyle);
         setFocusable(true);
 
-        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.NumPadKey);
+        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.NumPadKey, defStyle,
+                contentResource);
 
         try {
             mDigit = a.getInt(R.styleable.NumPadKey_digit, mDigit);
@@ -116,20 +118,16 @@ public class NumPadKey extends ViewGroup {
                 final int len = klondike.length();
                 if (len > 0) {
                     mKlondikeText.setText(klondike);
-                } else {
+                } else if (mKlondikeText.getVisibility() != View.GONE) {
                     mKlondikeText.setVisibility(View.INVISIBLE);
                 }
             }
         }
 
-        a = context.obtainStyledAttributes(attrs, android.R.styleable.View);
-        if (!a.hasValueOrEmpty(android.R.styleable.View_background)) {
-            Drawable rippleDrawable = new ContextThemeWrapper(mContext,
-                    R.style.Widget_TextView_NumPadKey).getDrawable(R.drawable.ripple_drawable_pin);
-            setBackground(rippleDrawable);
-        }
-        a.recycle();
         setContentDescription(mDigitText.getText().toString());
+
+        mAnimator = new NumPadAnimator(context, (GradientDrawable) getBackground(),
+                R.style.NumPadKey);
     }
 
     /**
@@ -142,9 +140,8 @@ public class NumPadKey extends ViewGroup {
                 .getDefaultColor();
         mDigitText.setTextColor(textColor);
         mKlondikeText.setTextColor(klondikeColor);
-        Drawable rippleDrawable = new ContextThemeWrapper(mContext,
-                R.style.Widget_TextView_NumPadKey).getDrawable(R.drawable.ripple_drawable_pin);
-        setBackground(rippleDrawable);
+
+        mAnimator.reloadColors(getContext());
     }
 
     @Override
@@ -152,13 +149,21 @@ public class NumPadKey extends ViewGroup {
         if (event.getActionMasked() == MotionEvent.ACTION_DOWN) {
             doHapticKeyClick();
         }
+
+        mAnimator.start();
+
         return super.onTouchEvent(event);
     }
 
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        mAnimator.updateMargin((ViewGroup.MarginLayoutParams) getLayoutParams());
+
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         measureChildren(widthMeasureSpec, heightMeasureSpec);
+
+        // Set width/height to the same value to ensure a smooth circle for the bg
+        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
     }
 
     @Override
@@ -176,6 +181,8 @@ public class NumPadKey extends ViewGroup {
 
         left = centerX - mKlondikeText.getMeasuredWidth() / 2;
         mKlondikeText.layout(left, top, left + mKlondikeText.getMeasuredWidth(), bottom);
+
+        mAnimator.onLayout(b - t);
     }
 
     @Override