Notification card

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

Specs – HUN card

Standard HUN

HUN with avatar

Message HUN with preview

Message HUN with multiple messages

Large-image HUN

Specs – Notification Center card

Standard notification

Message notification with preview

Message notification with multiple messages

Single action notification

Specs – Grouped-notification card

Grouped notification – Collapsed

Grouped notification – Expanded

Scaling layouts

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.

Standard-width screens

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.

Short screens

HUN card

Tall and standard-height screens

HUN card



Type style Typeface Weight Size (dp)
Body 1 Roboto Regular 32
Body 3 M Roboto Medium 24
Body 3 Roboto Regular 24


Element Color(day mode) Color (night mode)
Primary type / icons White White @ 88%
Secondary type White @ 72% White @ 60%
Secondary icon 3rd-party accent 3rd-party accent
Divider hairline White 22% White 12%
Card background Grey 868 Grey 900
Gradient Scrim Black 100% - 0% Black 100% - 20%


Element Size (dp)
Primary icon 44
Secondary icon 36
Medium avatar 76
Rounded corner radius (R2) 8


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


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


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