Stay organized with collections
Save and categorize content based on your preferences.
Notification cards communicate small amounts of timely information from the system or from an app.
The design of these cards for Android Automotive OS is intended to minimize distraction for drivers. The cards come in three basic versions:
Heads-up notification (HUN) card: Used for a notification that appears briefly over the current screen
Notification Center card: Used for notifications listed in the Notification Center
Grouped-notification card: Combines multiple Notification Center cards in one card
Within these versions, designs can also vary slightly depending on the category of the message. For example, call notifications have different buttons and icons than navigation notifications.
The notification card is a flexible component that can include a variety of elements. It has three main versions:
HUN card: This version is wider than the Notification Center card and appears on top of the current screen until dismissed
Notification Center card: This version is narrower than the HUN card and appears with other such cards in the Notification Center, in a vertical list
Grouped-notification card: This version of the Notification Center card combines multiple related notifications in one card, with controls for expanding to show the individual notifications
Variants of these versions by message type are shown in Styles.
Shown here are HUN and Notification Center versions of the same notification card, featuring the following elements:
1. Header
2. Content (with and without optional message preview, which can be hidden when the car is driving)
3. Actions
4. Large icon
Shown here is a grouped-notification card in both its collapsed and expanded versions, featuring the following elements:
1. Header
2. Content
3. Expand/collapse action
4. Expand/collapse indicator
These reference layouts show how to adapt notifications to accommodate screens of various widths and heights. (Width and height categories are defined in the Layout section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs.
HUN card
Notification Center card
Grouped-notification card (collapsed)
Grouped-notification card (expanded)
Wide screens
HUN card
Notification Center card
Grouped-notification card (collapsed)
Grouped-notification card (expanded)
Extra-wide and super-wide screens
HUN card
Notification Center card
Grouped-notification card (collapsed)
Grouped-notification card (expanded)
Vertical spacing of notifications on screens of various heights
The vertical-spacing specs in this section are for HUN cards only. For information about vertical spacing of cards in the Notification Center, see the Notification Center specs.
HUN cards: Call, Message, Car warning, and Navigation
Notification Center cards: Call, Message, and Car warning
Grouped-notification cards: Messages, expanded and collapsed - day
Grouped-notification cards: Messages, expanded and collapsed - night
Motion
The following motions are an important part of the notification experience:
HUN arrival motion
Swipe motion for dismissing a notification
Grouped-notification expand and collapse motions
HUN arrival
The motion of a HUN sliding down from the top of the screen helps users notice its arrival – and it also provides a hint about accessing notifications via downward swipe if the Notification Center is implemented as a pull-down shade
Swipe-to-dismiss
The dragging motion when a user swipes sideways on a notification provides visual confirmation that it is being dismissed, then the upward motion of the next notification fills in the hole in the list
Grouped-notification expand and collapse
Having a grouped-notification card stretch downward provides a smooth transition from the collapsed to the expanded state
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["\u003cp\u003eNotification cards in Android Automotive OS are designed to minimize driver distraction and come in three versions: Heads-up, Notification Center, and Grouped-notification.\u003c/p\u003e\n"],["\u003cp\u003eThese cards are flexible components with elements like headers, content, actions, and icons, and their layout adapts to different screen sizes for optimal viewing.\u003c/p\u003e\n"],["\u003cp\u003eStyling includes specific typography, color palettes, and sizing for elements like icons and avatars to maintain consistency and readability.\u003c/p\u003e\n"],["\u003cp\u003eMotion design is incorporated for Heads-up arrival, swipe-to-dismiss, and grouped-notification expand/collapse for intuitive user interaction.\u003c/p\u003e\n"],["\u003cp\u003eExamples are provided for various notification types like calls, messages, car warnings, and navigation across different card versions and display modes.\u003c/p\u003e\n"]]],[],null,["\u003cbr /\u003e\n\nNotification cards communicate small amounts of timely information from the system or from an app.\n\nThe design of these cards for Android Automotive OS is intended to minimize distraction for drivers. The cards come in three basic versions:\n\n- **Heads-up notification (HUN) card:** Used for a notification that appears briefly over the current screen\n- **Notification Center card:** Used for notifications listed in the Notification Center\n- **Grouped-notification card:** Combines multiple Notification Center cards in one card\n\nWithin these versions, designs can also vary slightly depending on the category of the message. For example, call notifications have different buttons and icons than navigation notifications. \n[Notification Center specs\nSpecs, style guidelines, and more](/cars/design/gas-customization/specs/notification-center-spec)\n\n*** ** * ** ***\n\nAnatomy\n\nThe notification card is a flexible component that can include a variety of elements. It has three main versions:\n\n- **HUN card:** This version is wider than the Notification Center card and appears on top of the current screen until dismissed\n- **Notification Center card:** This version is narrower than the HUN card and appears with other such cards in the Notification Center, in a vertical list\n- **Grouped-notification card:** This version of the Notification Center card combines multiple related notifications in one card, with controls for expanding to show the individual notifications\n\nVariants of these versions by message type are shown in [Styles](#styles).\nShown here are HUN and Notification Center versions of the same notification card, featuring the following elements: \n1. Header \n2. Content (with and without optional message preview, which can be hidden when the car is driving) \n3. Actions \n4. Large icon Shown here is a grouped-notification card in both its collapsed and expanded versions, featuring the following elements: \n1. Header \n2. Content \n3. Expand/collapse action \n4. Expand/collapse indicator\n\n*** ** * ** ***\n\nSpecs -- HUN card \n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\nStandard HUN\n\nHUN with avatar\n\nMessage HUN with preview\n\nMessage HUN with multiple messages\n\nLarge-image HUN\n\n*** ** * ** ***\n\nSpecs -- Notification Center card \n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\nStandard notification\n\nMessage notification with preview\n\nMessage notification with multiple messages\n\nSingle action notification\n\n*** ** * ** ***\n\nSpecs -- Grouped-notification card \n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\nGrouped notification -- Collapsed\n\nGrouped notification -- Expanded\n\n*** ** * ** ***\n\nScaling layouts\n\nThese reference layouts show how to adapt notifications to accommodate screens of various widths and heights. (Width and height categories are defined in the [Layout](/cars/design/automotive-os/design-system/layout) section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs. \n[Layout\nMargins, keylines, and padding for various screen sizes](/cars/design/automotive-os/design-system/layout) \n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\nStandard-width screens HUN card Notification Center card Grouped-notification card (collapsed) Grouped-notification card (expanded)\n\nWide screens HUN card Notification Center card Grouped-notification card (collapsed) Grouped-notification card (expanded)\n\nExtra-wide and super-wide screens HUN card Notification Center card Grouped-notification card (collapsed) Grouped-notification card (expanded)\n\nVertical spacing of notifications on screens of various heights\n\nThe vertical-spacing specs in this section are for HUN cards only. For information about vertical spacing of cards in the Notification Center, see the [Notification Center specs](/cars/design/gas-customization/specs/notification-center-spec).\n\nShort screens HUN card\n\nTall and standard-height screens HUN card\n\n*** ** * ** ***\n\nStyles \n[Typography guidelines\nScale and grid references, typographic examples, and more](/cars/design/automotive-os/design-system/typography) \n[Color guidelines\nPalettes, elevation and opacity values, and more](/cars/design/automotive-os/design-system/color)\n\nTypography\n\n| Type style | Typeface | Weight | Size (dp) |\n|------------|----------|---------|-----------|\n| Body 1 | Roboto | Regular | 32 |\n| Body 3 M | Roboto | Medium | 24 |\n| Body 3 | Roboto | Regular | 24 |\n\nColor\n\n| Element | Color(day mode) | Color (night mode) |\n|----------------------|------------------|--------------------|\n| Primary type / icons | White | White @ 88% |\n| Secondary type | White @ 72% | White @ 60% |\n| Secondary icon | 3rd-party accent | 3rd-party accent |\n| Divider hairline | White 22% | White 12% |\n| Card background | Grey 868 | Grey 900 |\n| Gradient Scrim | Black 100% - 0% | Black 100% - 20% |\n\nSizing\n\n| Element | Size (dp) |\n|----------------------------|-----------|\n| Primary icon | 44 |\n| Secondary icon | 36 |\n| Medium avatar | 76 |\n| Rounded corner radius (R2) | 8 |\n\n*** ** * ** ***\n\nExamples \nHUN cards: Call, Message, Car warning, and Navigation Notification Center cards: Call, Message, and Car warning \nGrouped-notification cards: Messages, expanded and collapsed - day Grouped-notification cards: Messages, expanded and collapsed - night\n\n*** ** * ** ***\n\nMotion\n\nThe following motions are an important part of the notification experience:\n\n- HUN arrival motion\n- Swipe motion for dismissing a notification\n- Grouped-notification expand and collapse motions\n\nHUN arrival The motion of a HUN sliding down from the top of the screen helps users notice its arrival -- and it also provides a hint about accessing notifications via downward swipe if the Notification Center is implemented as a pull-down shade\n\nSwipe-to-dismiss The dragging motion when a user swipes sideways on a notification provides visual confirmation that it is being dismissed, then the upward motion of the next notification fills in the hole in the list\n\nGrouped-notification expand and collapse Having a grouped-notification card stretch downward provides a smooth transition from the collapsed to the expanded state"]]
