Patterns Notifications

Notifications

Android Wear can show notifications from your mobile device and an app installed on your watch.

Use notifications to:

  • Introduce or conclude an app experience
  • Link to destinations on your watch or mobile device

Notification components

  • Header area
  • Content area
  • Action rail

How to show notifications

  • Briefly on top of the watch face
  • In the collection of cards
  • Peeking onto the current screen
Wear notifications

Anatomy of a notification Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Android Wear 2.0 highlights

Android Wear 2.0 notifications are designed to make it easier for users to scan and use a notification’s most important elements:

Primary content

Primary content, like an icon or title, appears in the collapsed notification view. Secondary information, like a timestamp, appears in the expanded notification view.

People

Avatars appear at the top of the notification.

Actions

Primary actions are only displayed as icons in the collapsed view. More actions with icons and labels can be placed in the expanded notification view.

Collapsed notification in Android Wear 1.0 (Compare with the next image for Android Wear 2.0)

Collapsed notification

A collapsed notification includes:

1. A large icon (optional): Add an image to reinforce the notification in a meaningful way, like a message with a photo of the sender.

2. An app icon: A small two-dimensional representation of your app's identity. It appears in monochrome in the status bar. If your app sends many types of notifications, you may replace your app's identity icon with a symbol that reflects the content type. For example, Google Now uses a cloud icon for weather notifications.

3. A content title: A brief headline for the notification

4. Content text: Supporting information

5. Primary action: The primary action represents the most frequently used action in an app. If you don’t have a primary action, you don’t need to show anything here.

Expanded notification

A collapsed notification in Android Wear 2.0

Expanded notification

An expanded notification includes:

1. A content title: A brief headline for the notification

2. An app name: Starting in Android Wear 2.0, the name of the app automatically appears in the notification.

3. An app icon: A small two-dimensional representation of your app's identity. It appears in monochrome in the status bar. If your app sends many notifications, you may replace your app's identity icon with a symbol that reflects the content type. For example, Google Now uses a cloud icon for weather notifications.

4. Content text: Supporting information

5. A big picture (optional): The big picture template places an image here.

6. Inline action: If you have a primary action in a collapsed notification, you should add the same action here.

7. Smart replies: If the notification is MessagingStyle, the system can show smart suggestions

8. Action drawer: Add any remaining notification actions in this area. The user can swipe up or tap the overflow icon to open the drawer.

Expanded notification

An expanded notification

Templates Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Android Wear’s app suite uses notification templates that you can adapt for your brand.

Standard

This template works well for most notifications and includes a succinct message, a large icon when applicable, and actions.

Standard notification

Standard template for collapsed and expanded notifications

Big text

Use this template to display longer text in a preview when the notification is expanded.

Big text notification

Big text template for collapsed and expanded notifications

Big picture

Use this template for notifications with a picture. When a user scrolls to the notification, the big picture displays for a second and then slips into the card.

Big picture notification

Big picture template for collapsed and expanded notifications

Media

Use this template to let the user control media currently playing from your app. Display up to 3 actions in the collapsed view and use the large icon as a related image like an album cover. Display up to 5 actions in the expanded view with a larger image.

Media notification

Media template for collapsed and expanded notifications

Messaging

Use this template to display recent chat history, and leverage Google’s Smart Reply features without writing a line of code.

Media notification

Messaging template for collapsed and expanded notifications

Chronometer

Use this template if your app starts a countdown timer or has stopwatch functionality.

Chronometer notification

Chronometer template for collapsed notifications