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/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 />