Update notification visuals (part 2)

- Background is now white, and color beneath and divider color
  updated accordingly (not from color extraction)
- Removed overflow text ("+6") and added it to a header
  ("6 Notifications"). Use "..." instead if there is an overflow.
- Even spaced out icons in notification footer between the
  far right icon and the ellipsis
- Remove code to change arrow tint, since it is always white
  now. This also fixes the issue where it was drawn as a rect.

Bug: 35766387
Change-Id: I03bfda4ff029f23dd8b3dd1b72f534ea0e2c0816

7 files changed, 116 insertions, 32 deletions

diff --git a/res/drawable/horizontal_ellipsis.xml b/res/drawable/horizontal_ellipsis.xml
new file mode 100644
index 000000000..ad0852901
--- /dev/null
+++ b/res/drawable/horizontal_ellipsis.xml
@@ -0,0 +1,27 @@
+<?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.
+-->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="@dimen/horizontal_ellipsis_size"
+        android:height="@dimen/horizontal_ellipsis_size"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0"
+        android:tint="?android:attr/textColorSecondary" >
+
+    <path
+        android:pathData="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+        android:fillColor="@android:color/white" />
+</vector>
\ No newline at end of file
diff --git a/res/layout/notification.xml b/res/layout/notification.xml
index e148cbb44..6922ad9d3 100644
--- a/res/layout/notification.xml
+++ b/res/layout/notification.xml
@@ -20,7 +20,8 @@
     android:layout_width="@dimen/bg_popup_item_width"
     android:layout_height="wrap_content"
     android:elevation="@dimen/deep_shortcuts_elevation"
-    android:background="@drawable/bg_white_round_rect">
+    android:background="@drawable/bg_white_round_rect"
+    android:backgroundTint="@color/notification_color_beneath">
 
     <RelativeLayout
         android:layout_width="match_parent"
@@ -28,16 +29,49 @@
         android:orientation="vertical"
         android:clipChildren="false">
 
+        <com.android.launcher3.notification.NotificationHeaderView
+            android:id="@+id/header"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/notification_header_height"
+            android:orientation="horizontal"
+            android:paddingStart="@dimen/notification_padding"
+            android:background="@color/notification_header_background_color"
+            android:elevation="@dimen/notification_elevation">
+            <TextView
+                android:id="@+id/notification_count"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:gravity="start|center_vertical"
+                android:paddingEnd="@dimen/notification_header_padding_after_count"
+                android:textSize="@dimen/notification_main_text_size"
+                android:textColor="?android:attr/textColorPrimary" />
+            <TextView
+                android:id="@+id/notification_text"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:gravity="start|center_vertical"
+                android:textSize="@dimen/notification_main_text_size"
+                android:textColor="?android:attr/textColorSecondary" />
+        </com.android.launcher3.notification.NotificationHeaderView>
+
         <include layout="@layout/notification_main"
             android:id="@+id/main_view"
             android:layout_width="match_parent"
-            android:layout_height="@dimen/notification_main_height" />
+            android:layout_height="@dimen/notification_main_height"
+            android:layout_below="@id/header" />
+
+        <View
+            android:id="@+id/divider"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/popup_item_divider_height"
+            android:background="@color/divider_color"
+            android:layout_below="@id/main_view"/>
 
         <include layout="@layout/notification_footer"
             android:id="@+id/footer"
             android:layout_width="match_parent"
             android:layout_height="@dimen/notification_footer_height"
-            android:layout_below="@id/main_view" />
+            android:layout_below="@id/divider" />
 
     </RelativeLayout>
 
diff --git a/res/layout/notification_footer.xml b/res/layout/notification_footer.xml
index 54282086c..f1f572438 100644
--- a/res/layout/notification_footer.xml
+++ b/res/layout/notification_footer.xml
@@ -18,25 +18,29 @@
 <com.android.launcher3.notification.NotificationFooterLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:orientation="vertical"
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:elevation="@dimen/notification_elevation"
-    android:clipChildren="false" >
-
-    <View
-        android:id="@+id/divider"
-        android:layout_width="match_parent"
-        android:layout_height="@dimen/popup_item_divider_height"/>
+    android:clipChildren="false"
+    android:layout_gravity="center_vertical"
+    android:background="@color/notification_background_color">
 
     <LinearLayout
         android:id="@+id/icon_row"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="horizontal"
-        android:gravity="end"
+        android:gravity="end|center_vertical"
         android:padding="@dimen/notification_footer_icon_row_padding"
         android:clipToPadding="false"
         android:clipChildren="false"/>
 
+    <View
+        android:id="@+id/overflow"
+        android:layout_width="@dimen/horizontal_ellipsis_size"
+        android:layout_height="@dimen/horizontal_ellipsis_size"
+        android:background="@drawable/horizontal_ellipsis"
+        android:layout_marginStart="@dimen/horizontal_ellipsis_offset"
+        android:layout_gravity="start|center_vertical" />
+
 </com.android.launcher3.notification.NotificationFooterLayout>
 
diff --git a/res/layout/notification_main.xml b/res/layout/notification_main.xml
index d036fe5d2..9c5847f39 100644
--- a/res/layout/notification_main.xml
+++ b/res/layout/notification_main.xml
@@ -19,43 +19,46 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:orientation="horizontal"
     android:focusable="true"
-    android:padding="@dimen/notification_padding"
     android:elevation="@dimen/notification_elevation" >
 
     <LinearLayout
+        android:id="@+id/text_and_background"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical"
-        android:layout_weight="1"
-        android:gravity="center_vertical">
+        android:gravity="center_vertical"
+        android:background="@color/notification_background_color"
+        android:paddingStart="@dimen/notification_padding"
+        android:paddingEnd="@dimen/notification_main_text_padding_end">
         <TextView
             android:id="@+id/title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
             android:textAlignment="viewStart"
             android:fontFamily="sans-serif"
-            android:textSize="14sp"
-            android:textColor="?android:attr/textColorSecondary"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content" />
+            android:textSize="@dimen/notification_main_text_size"
+            android:textColor="?android:attr/textColorPrimary"
+            android:lines="1"
+            android:ellipsize="end" />
 
         <TextView
             android:id="@+id/text"
-            android:paddingEnd="4dp"
-            android:textSize="12sp"
-            android:textAlignment="viewStart"
-            android:fontFamily="sans-serif"
-            android:textColor="?android:attr/textColorTertiary"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content" />
+            android:layout_height="wrap_content"
+            android:fontFamily="sans-serif"
+            android:textSize="@dimen/notification_main_text_size"
+            android:textColor="?android:attr/textColorSecondary"
+            android:lines="1"
+            android:ellipsize="end" />
     </LinearLayout>
 
     <View
         android:id="@+id/popup_item_icon"
         android:layout_width="@dimen/notification_icon_size"
         android:layout_height="@dimen/notification_icon_size"
-        android:layout_weight="0"
-        android:layout_gravity="center_vertical" />
+        android:layout_marginEnd="@dimen/notification_padding"
+        android:layout_gravity="center_vertical|end" />
 
 </com.android.launcher3.notification.NotificationMainView>
 
diff --git a/res/values/colors.xml b/res/values/colors.xml
index a02df16e1..68f009295 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -36,4 +36,8 @@
     <color name="spring_loaded_highlighted_panel_border_color">#FFF</color>
 
     <color name="notification_icon_default_color">#757575</color> <!-- Gray 600 -->
+    <color name="notification_header_background_color">#F5F5F5</color> <!-- Gray 100 -->
+    <color name="notification_background_color">#FFF</color>
+    <color name="notification_color_beneath">#E0E0E0</color> <!-- Gray 300 -->
+    <color name="divider_color">@color/notification_color_beneath</color>
 </resources>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 8fee26b0b..132ae0700 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -178,17 +178,26 @@
     <dimen name="badge_text_size">12dp</dimen>
     <dimen name="badge_small_padding">0dp</dimen>
     <dimen name="badge_large_padding">3dp</dimen>
-    <dimen name="notification_icon_size">28dp</dimen>
-    <dimen name="notification_footer_icon_size">24dp</dimen>
+    <dimen name="notification_icon_size">24dp</dimen>
+    <dimen name="notification_footer_icon_size">18dp</dimen>
 
 <!-- Notifications -->
     <dimen name="bg_round_rect_radius">12dp</dimen>
     <dimen name="notification_padding">12dp</dimen>
-    <!-- (icon_size - footer_icon_size) / 2 -->
-    <dimen name="notification_footer_icon_row_padding">2dp</dimen>
+    <!-- notification_padding + (icon_size - footer_icon_size) / 2 -->
+    <dimen name="notification_footer_icon_row_padding">15dp</dimen>
+    <dimen name="notification_header_padding_after_count">8dp</dimen>
+    <dimen name="notification_header_height">32dp</dimen>
     <dimen name="notification_main_height">60dp</dimen>
     <dimen name="notification_footer_height">@dimen/bg_popup_item_height</dimen>
+    <dimen name="notification_header_text_size">12dp</dimen>
+    <dimen name="notification_main_text_size">14dp</dimen>
+    <!-- notification_icon_size + notification+padding + padding we want between icon and text -->
+    <dimen name="notification_main_text_padding_end">40dp</dimen>
     <dimen name="notification_elevation">2dp</dimen>
+    <dimen name="horizontal_ellipsis_size">18dp</dimen>
+    <!-- arrow_horizontal_offset - (ellipsis_size - arrow_width) / 2 -->
+    <dimen name="horizontal_ellipsis_offset">15dp</dimen>
     <dimen name="popup_item_divider_height">0.5dp</dimen>
     <dimen name="swipe_helper_falsing_threshold">70dp</dimen>
 
diff --git a/res/values/strings.xml b/res/values/strings.xml
index c1280c7f3..58bfb4995 100644
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -72,7 +72,10 @@
          The text must fit in the size of a small icon [CHAR_LIMIT=3] -->
     <string name="deep_notifications_overflow" translatable="false">+%1$d</string>
     <!-- Text to display as the header above notifications. [CHAR_LIMIT=30] -->
-    <string name="notifications_header" translatable="false">Notifications</string>
+    <plurals name="notifications_header" translatable="false">
+        <item quantity="one">Notification</item>
+        <item quantity="other">Notifications</item>
+    </plurals>
 
     <!-- Drag and drop -->
     <skip />