From 6a7094d43af37cfb1d173309e73f9196cccb61f0 Mon Sep 17 00:00:00 2001
From: Jon Spivack <spivack@google.com>
Date: Mon, 10 May 2021 18:22:52 -0700
Subject: [PATCH] Rework NIU Actions buttons UI

The shapes, colors, icons, and layout of the NIU Actions buttons have been updated to match the latest UI specs. The icons also no longer overlap with the layout above them, which solves a picking issue.

Bug: 186004471
Bug: 187460625
Test: Manual (tried on Wembley and Pixel 3A)
Change-Id: Ie7a0ca0c21805fc0f126053ec791fd2460710d33
---
 go/quickstep/res/drawable/ic_listen.xml       | 22 ++---
 go/quickstep/res/drawable/ic_search.xml       | 28 +++---
 go/quickstep/res/drawable/ic_translate.xml    | 22 ++---
 .../res/drawable/round_rect_button.xml        | 20 ++++
 .../res/layout/overview_actions_container.xml | 96 ++++++++++---------
 go/quickstep/res/values/colors.xml            | 21 ++++
 go/quickstep/res/values/dimens.xml            | 26 +++++
 go/quickstep/res/values/styles.xml            | 33 +++++--
 8 files changed, 174 insertions(+), 94 deletions(-)
 create mode 100644 go/quickstep/res/drawable/round_rect_button.xml
 create mode 100644 go/quickstep/res/values/colors.xml
 create mode 100644 go/quickstep/res/values/dimens.xml

diff --git a/go/quickstep/res/drawable/ic_listen.xml b/go/quickstep/res/drawable/ic_listen.xml
index a8e6c9382a..16bb59789b 100644
--- a/go/quickstep/res/drawable/ic_listen.xml
+++ b/go/quickstep/res/drawable/ic_listen.xml
@@ -13,20 +13,12 @@
      limitations under the License.
 -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="28dp"
-    android:height="28dp"
-    android:viewportWidth="28"
-    android:viewportHeight="28">
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24"
+        android:viewportHeight="24"
+        android:tint="?attr/colorControlNormal">
   <path
-      android:pathData="M10.5,15.17c2.58,0 4.67,-2.09 4.67,-4.67s-2.09,-4.67 -4.67,-4.67c-2.58,0 -4.67,2.09 -4.67,4.67S7.92,15.17 10.5,15.17zM10.5,8.17c1.28,0 2.33,1.05 2.33,2.33s-1.05,2.33 -2.33,2.33c-1.28,0 -2.33,-1.05 -2.33,-2.33S9.22,8.17 10.5,8.17z"
-      android:fillColor="#4285F4"/>
-  <path
-      android:pathData="M10.5,17.5c-3.11,0 -9.33,1.56 -9.33,4.67v2.33h18.67v-2.33C19.83,19.06 13.62,17.5 10.5,17.5zM3.5,22.17c0.26,-0.84 3.86,-2.33 7,-2.33c3.15,0 6.77,1.5 7,2.33H3.5z"
-      android:fillColor="#4285F4"/>
-  <path
-      android:pathData="M25.67,10.5c0,0.36 -0.02,0.71 -0.05,1.05c-0.01,0.15 -0.03,0.29 -0.05,0.43c-0.02,0.18 -0.05,0.36 -0.08,0.54c-0.04,0.2 -0.07,0.39 -0.12,0.58c-0.01,0.06 -0.03,0.11 -0.04,0.17c-0.59,2.34 -1.81,4.01 -2.52,4.82c-0.09,0.1 -0.18,0.2 -0.28,0.3c-0.17,0.18 -0.27,0.27 -0.27,0.27l-1.65,-1.63c1.34,-1.33 2.27,-3.07 2.6,-5.01c0.01,-0.08 0.02,-0.16 0.04,-0.24c0.06,-0.42 0.1,-0.85 0.1,-1.29c0,-0.44 -0.04,-0.88 -0.1,-1.3c-0.01,-0.06 -0.02,-0.13 -0.03,-0.19c-0.32,-1.95 -1.25,-3.7 -2.6,-5.04l1.65,-1.63c0,0 0.11,0.1 0.27,0.27c0.09,0.1 0.19,0.2 0.28,0.3c0.71,0.82 1.93,2.48 2.52,4.82c0.01,0.06 0.03,0.11 0.04,0.17c0.04,0.19 0.08,0.38 0.12,0.58c0.03,0.18 0.06,0.36 0.08,0.54c0.02,0.14 0.04,0.28 0.05,0.43C25.65,9.79 25.67,10.14 25.67,10.5z"
-      android:fillColor="#EA4335"/>
-  <path
-      android:pathData="M20.61,8.4C20.85,9.06 21,9.76 21,10.5s-0.15,1.44 -0.39,2.1c-0.28,0.77 -0.71,1.46 -1.25,2.05l-1.66,-1.64c0.56,-0.63 0.91,-1.44 0.95,-2.34c0,-0.06 0.02,-0.11 0.02,-0.17s-0.01,-0.11 -0.02,-0.17c-0.04,-0.9 -0.39,-1.71 -0.95,-2.34l1.66,-1.64C19.9,6.94 20.32,7.63 20.61,8.4z"
-      android:fillColor="#FBBC04"/>
+      android:fillColor="@android:color/white"
+      android:pathData="M15.08,7.05c0.84,1.18 0.84,2.71 0,3.89l1.68,1.69c2.02,-2.02 2.02,-5.07 0,-7.27l-1.68,1.69zM20.07,2l-1.63,1.63c2.77,3.02 2.77,7.56 0,10.74L20.07,16c3.9,-3.89 3.91,-9.95 0,-14zM9,13c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zM9,7c1.1,0 2,0.9 2,2s-0.9,2 -2,2 -2,-0.9 -2,-2 0.9,-2 2,-2zM9,14c-2.67,0 -8,1.34 -8,4v3h16v-3c0,-2.66 -5.33,-4 -8,-4zM15,19L3,19v-0.99C3.2,17.29 6.3,16 9,16s5.8,1.29 6,2v1z"/>
 </vector>
diff --git a/go/quickstep/res/drawable/ic_search.xml b/go/quickstep/res/drawable/ic_search.xml
index 4307330414..ce290d9901 100644
--- a/go/quickstep/res/drawable/ic_search.xml
+++ b/go/quickstep/res/drawable/ic_search.xml
@@ -13,20 +13,24 @@
      limitations under the License.
 -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="28dp"
-    android:height="28dp"
-    android:viewportWidth="28"
-    android:viewportHeight="28">
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24"
+        android:viewportHeight="24"
+        android:tint="?attr/colorControlNormal">
   <path
-      android:pathData="M24.5,22.75l-6.84,-6.84c1,-1.35 1.59,-3.02 1.59,-4.83h-2.33c0,3.22 -2.62,5.83 -5.83,5.83v2.33c1.81,0 3.47,-0.6 4.83,-1.59l6.84,6.84L24.5,22.75z"
-      android:fillColor="#4285F4"/>
+      android:fillColor="@android:color/white"
+      android:pathData="M16,3h-2v2h2c1.65,0 3,1.35 3,3v2h2V8C21,5.24 18.76,3 16,3z"/>
   <path
-      android:pathData="M11.08,2.92v2.33c3.22,0 5.83,2.62 5.83,5.83h2.33C19.25,6.57 15.59,2.92 11.08,2.92z"
-      android:fillColor="#34A853"/>
+      android:fillColor="@android:color/white"
+      android:pathData="M5,16v-2H3v2c0,2.76 2.24,5 5,5h2v-2H8C6.35,19 5,17.65 5,16z"/>
   <path
-      android:pathData="M5.25,11.08H2.92c0,4.51 3.66,8.17 8.17,8.17v-2.33C7.87,16.92 5.25,14.3 5.25,11.08z"
-      android:fillColor="#EA4335"/>
+      android:fillColor="@android:color/white"
+      android:pathData="M12,8.5c-1.93,0 -3.5,1.57 -3.5,3.5s1.57,3.5 3.5,3.5s3.5,-1.57 3.5,-3.5S13.93,8.5 12,8.5z"/>
   <path
-      android:pathData="M2.92,11.08h2.33c0,-3.22 2.62,-5.83 5.83,-5.83V2.92C6.57,2.92 2.92,6.57 2.92,11.08z"
-      android:fillColor="#FBBC04"/>
+      android:fillColor="@android:color/white"
+      android:pathData="M18,18m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"/>
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M5,8c0,-1.65 1.35,-3 3,-3h2V3H8C5.24,3 3,5.24 3,8v2h2V8z"/>
 </vector>
diff --git a/go/quickstep/res/drawable/ic_translate.xml b/go/quickstep/res/drawable/ic_translate.xml
index 1247807fcd..e3df56fdb8 100644
--- a/go/quickstep/res/drawable/ic_translate.xml
+++ b/go/quickstep/res/drawable/ic_translate.xml
@@ -13,20 +13,12 @@
      limitations under the License.
 -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="28dp"
-    android:height="28dp"
-    android:viewportWidth="28"
-    android:viewportHeight="28">
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24"
+        android:viewportHeight="24"
+        android:tint="?attr/colorControlNormal">
   <path
-      android:pathData="M12.28,15.19l-0.07,-0.05c-0.61,-0.49 -1.15,-1.05 -1.65,-1.63c-1.05,-1.22 -1.88,-2.63 -2.39,-4.17H5.83c0.54,2.17 1.58,4.16 3.01,5.85l-5.93,5.23l1.75,1.75l5.91,-5.26c0.05,0.04 0.1,0.09 0.15,0.13l3.42,2.79l1.02,-2.33L12.28,15.19z"
-      android:fillColor="#FBBC04"/>
-  <path
-      android:pathData="M21.58,11.67h-2.33l-5.25,14h2.33l1.31,-3.5h5.54l1.32,3.5h2.33L21.58,11.67zM18.53,19.83l1.89,-5.05l1.89,5.05H18.53z"
-      android:fillColor="#4285F4"/>
-  <path
-      android:pathData="M11.67,2.33l-2.34,0l0,2.34l-8.16,0l0,2.33l10.5,0l0,-2.33z"
-      android:fillColor="#EA4335"/>
-  <path
-      android:pathData="M11.67,4.67V7H14c-0.61,2.42 -1.79,4.65 -3.44,6.5c0.5,0.59 1.04,1.15 1.65,1.63l0.07,0.05c2.03,-2.32 3.44,-5.14 4.05,-8.19h3.5V4.67H11.67z"
-      android:fillColor="#34A853"/>
+      android:fillColor="@android:color/white"
+      android:pathData="M12.87,15.07l-2.54,-2.51 0.03,-0.03c1.74,-1.94 2.98,-4.17 3.71,-6.53L17,6L17,4h-7L10,2L8,2v2L1,4v1.99h11.17C11.5,7.92 10.44,9.75 9,11.35 8.07,10.32 7.3,9.19 6.69,8h-2c0.73,1.63 1.73,3.17 2.98,4.56l-5.09,5.02L4,19l5,-5 3.11,3.11 0.76,-2.04zM18.5,10h-2L12,22h2l1.12,-3h4.75L21,22h2l-4.5,-12zM15.88,17l1.62,-4.33L19.12,17h-3.24z"/>
 </vector>
diff --git a/go/quickstep/res/drawable/round_rect_button.xml b/go/quickstep/res/drawable/round_rect_button.xml
new file mode 100644
index 0000000000..b276686a41
--- /dev/null
+++ b/go/quickstep/res/drawable/round_rect_button.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     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.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+       android:shape="rectangle">
+    <corners android:radius="@dimen/go_button_corner_radius" />
+</shape>
diff --git a/go/quickstep/res/layout/overview_actions_container.xml b/go/quickstep/res/layout/overview_actions_container.xml
index 4aa77744aa..6a331ea235 100644
--- a/go/quickstep/res/layout/overview_actions_container.xml
+++ b/go/quickstep/res/layout/overview_actions_container.xml
@@ -25,7 +25,7 @@
         android:id="@+id/action_buttons"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_gravity="center"
+        android:layout_gravity="top|center_horizontal"
         android:orientation="horizontal">
 
         <Space
@@ -33,62 +33,75 @@
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <Button
-            android:id="@+id/action_translate"
-            style="@style/GoOverviewActionButton"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:drawableTop="@drawable/ic_translate"
-            android:drawablePadding="1dp"
-            android:text="@string/action_translate"
-            android:theme="@style/ThemeControlHighlightWorkspaceColor" />
+        <LinearLayout
+            style="@style/GoOverviewActionButtonContainer">
+            <ImageButton
+                android:id="@+id/action_translate"
+                style="@style/GoOverviewActionButton"
+                android:src="@drawable/ic_translate"
+                android:contentDescription="@string/action_translate" />
+            <TextView
+                style="@style/GoOverviewActionButtonCaption"
+                android:text="@string/action_translate" />
+        </LinearLayout>
 
         <Space
             android:layout_width="0dp"
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <Button
-            android:id="@+id/action_listen"
-            style="@style/GoOverviewActionButton"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:drawableTop="@drawable/ic_listen"
-            android:drawablePadding="1dp"
-            android:text="@string/action_listen"
-            android:theme="@style/ThemeControlHighlightWorkspaceColor" />
+        <LinearLayout
+            style="@style/GoOverviewActionButtonContainer">
+            <ImageButton
+                android:id="@+id/action_listen"
+                style="@style/GoOverviewActionButton"
+                android:src="@drawable/ic_listen"
+                android:contentDescription="@string/action_listen"
+                android:background="@drawable/round_rect_button" />
+            <TextView
+                style="@style/GoOverviewActionButtonCaption"
+                android:text="@string/action_listen" />
+        </LinearLayout>
 
         <Space
             android:layout_width="0dp"
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <Button
-            android:id="@+id/action_screenshot"
-            style="@style/GoOverviewActionButton"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:drawableTop="@drawable/ic_screenshot"
-            android:drawablePadding="1dp"
-            android:text="@string/action_screenshot"
-            android:theme="@style/ThemeControlHighlightWorkspaceColor" />
+        <LinearLayout
+            style="@style/GoOverviewActionButtonContainer">
+            <ImageButton
+                android:id="@+id/action_screenshot"
+                style="@style/GoOverviewActionButton"
+                android:src="@drawable/ic_screenshot"
+                android:contentDescription="@string/action_screenshot"
+                android:background="@drawable/round_rect_button" />
+            <TextView
+                style="@style/GoOverviewActionButtonCaption"
+                android:text="@string/action_screenshot" />
+        </LinearLayout>
 
         <Space
             android:layout_width="0dp"
             android:layout_height="1dp"
             android:layout_weight="1" />
 
-        <Button
-            android:id="@+id/action_search"
-            style="@style/GoOverviewActionButton"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:drawableTop="@drawable/ic_search"
-            android:drawablePadding="1dp"
-            android:text="@string/action_search"
-            android:theme="@style/ThemeControlHighlightWorkspaceColor"
-            android:visibility="gone" />
+        <!-- Will be enabled in a future version. -->
+        <LinearLayout
+            style="@style/GoOverviewActionButtonContainer"
+            android:visibility="gone" >
+            <ImageButton
+                android:id="@+id/action_search"
+                style="@style/GoOverviewActionButton"
+                android:src="@drawable/ic_search"
+                android:contentDescription="@string/action_search"
+                android:background="@drawable/round_rect_button" />
+            <TextView
+                style="@style/GoOverviewActionButtonCaption"
+                android:text="@string/action_search" />
+        </LinearLayout>
 
+        <!-- Unused. Included only for compatibility with parent class. -->
         <Button
             android:id="@+id/action_share"
             style="@style/GoOverviewActionButton"
@@ -98,13 +111,6 @@
             android:text="@string/action_share"
             android:theme="@style/ThemeControlHighlightWorkspaceColor"
             android:visibility="gone" />
-
-        <Space
-            android:id="@+id/oav_three_button_space"
-            android:layout_width="0dp"
-            android:layout_height="1dp"
-            android:layout_weight="1"
-            android:visibility="gone" />
     </LinearLayout>
 
 </com.android.quickstep.views.GoOverviewActionsView>
\ No newline at end of file
diff --git a/go/quickstep/res/values/colors.xml b/go/quickstep/res/values/colors.xml
new file mode 100644
index 0000000000..9383770318
--- /dev/null
+++ b/go/quickstep/res/values/colors.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     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.
+-->
+<resources>
+    <!-- Overview -->
+    <color name="go_overview_button_icon_color">#3C4043</color>
+    <color name="go_overview_button_color">#70FFFFFF</color>
+</resources>
diff --git a/go/quickstep/res/values/dimens.xml b/go/quickstep/res/values/dimens.xml
new file mode 100644
index 0000000000..cb260b55d1
--- /dev/null
+++ b/go/quickstep/res/values/dimens.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     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.
+-->
+
+<resources>
+    <dimen name="go_button_corner_radius">20dp</dimen>
+
+    <!-- Overview -->
+    <dimen name="go_overview_button_width">60dp</dimen>
+    <dimen name="go_overview_button_height">60dp</dimen>
+    <dimen name="go_overview_button_container_width">80dp</dimen>
+    <dimen name="go_overview_button_caption_margin">8dp</dimen>
+</resources>
diff --git a/go/quickstep/res/values/styles.xml b/go/quickstep/res/values/styles.xml
index 927c49aa05..df49ecd4d3 100644
--- a/go/quickstep/res/values/styles.xml
+++ b/go/quickstep/res/values/styles.xml
@@ -15,12 +15,31 @@
      limitations under the License.
 -->
 <resources>
-    <style name="GoOverviewActionButton"
-        parent="@android:style/Widget.DeviceDefault.Button">
-        <item name="android:textColor">@color/overview_button</item>
-        <item name="android:drawableTint">@color/overview_button</item>
-        <item name="android:tint">?android:attr/textColorPrimary</item>
-        <item name="android:drawablePadding">8dp</item>
-        <item name="android:textAllCaps">false</item>
+    <style name="GoOverviewActionButton">
+        <item name="android:tint">@color/go_overview_button_icon_color</item>
+        <item name="android:backgroundTint">@color/go_overview_button_color</item>
+        <item name="android:background">@drawable/round_rect_button</item>
+        <item name="android:layout_width">@dimen/go_overview_button_width</item>
+        <item name="android:layout_height">@dimen/go_overview_button_height</item>
+        <item name="android:layout_gravity">center_horizontal</item>
+    </style>
+
+    <style name="GoOverviewActionButtonCaption">
+        <item name="android:fontFamily">roboto-medium</item>
+        <item name="android:textSize">14dp</item>
+        <item name="android:textColor">@color/go_overview_button_icon_color</item>
+        <item name="android:lineHeight">20dp</item>
+        <item name="android:textAlignment">center</item>
+        <item name="android:importantForAccessibility">no</item>
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_marginTop">@dimen/go_overview_button_caption_margin</item>
+        <item name="android:layout_gravity">center_horizontal</item>
+    </style>
+
+    <style name="GoOverviewActionButtonContainer">
+        <item name="android:layout_width">@dimen/go_overview_button_container_width</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:orientation">vertical</item>
     </style>
 </resources>
\ No newline at end of file