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
diff --git a/res/drawable/horizontal_ellipsis.xml b/res/drawable/horizontal_ellipsis.xml
new file mode 100644
index 0000000..ad08529
--- /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 e148cbb..6922ad9 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 5428208..f1f5724 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 d036fe5..9c5847f 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 a02df16..68f0092 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 8fee26b..132ae07 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 c1280c7..58bfb49 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 />