Notification styles on Wear

Wear OS by Google supports notification styles to improve the user experience on a watch.

The most common notification styles are:

  • BIG_TEXT_STYLE
  • BIG_PICTURE_STYLE
  • INBOX_STYLE
  • MESSAGING_STYLE

The sections below discuss how to add MESSAGING_STYLE and BIG_TEXT_STYLE to your notifications. To incorporate other notification styles, see the Wear Notifications sample.

Refer to the following related resources:

Construct a MessagingStyle notification

If you have a chat messaging app, your notifications should use NotificationCompat.MessagingStyle, which was added in Android 7.0. Wear uses the chat messages included in a MessagingStyle notification (see addMessage()) to provide a rich chat app-like experience in the expanded notification.

Note: MessagingStyle expanded notifications require that you have at least version 1.5.0.2861804 of the Wear companion app on your paired Android phone.

Smart Reply

Wear introduces Smart Reply for MessagingStyle notifications. Smart Reply provides the user with contextually relevant, touchable choices in the expanded notification and in RemoteInput. These augment the fixed list of choices that the developer provides in RemoteInput using the setChoices() method.

Smart Reply provides users with a fast (single tap), discreet (no speaking aloud), private (messages received by a user never leave the watch), and reliable (no internet connection needed) way to respond to chat messages.

Smart Reply responses are generated by an entirely on-watch machine learning model using the context provided by the MessagingStyle notification. No user notification data is sent to Google servers to generate Smart Reply responses.

To enable Smart Reply for your notification action, you need to do the following:

  1. Use NotificationCompat.MessagingStyle.
  2. Call the method setAllowGeneratedReplies(true) for the notification action.
  3. Ensure that the notification action has a RemoteInput defined (where the responses will reside).

The following example shows how to create a MessagingStyle notification with Smart Reply responses.

Kotlin

// Create an intent for the reply action
val replyPendingIntent = Intent(this, ReplyActivity::class.java).let { replyIntent ->
    PendingIntent.getActivity(this, 0, replyIntent, PendingIntent.FLAG_UPDATE_CURRENT)
}

// Create the reply action and add the remote input
val action = NotificationCompat.Action.Builder(
        R.drawable.ic_reply_icon,
        getString(R.string.label),
        replyPendingIntent
)
        .addRemoteInput(remoteInput)
        // 1) allow generated replies
        .setAllowGeneratedReplies(true)
        .build()

val noti = NotificationCompat.Builder(context, channelId)
        .setContentTitle("${messages.size} new messages with $sender")
        .setContentText(subject)
        .setSmallIcon(R.drawable.new_message)
        .setLargeIcon(aBitmap)
        // 2) set the style to MessagingStyle
        .setStyle(
                NotificationCompat.MessagingStyle(resources.getString(R.string.reply_name))
                        .addMessage(messages[0].text, messages[0].time, messages[0].sender)
                        .addMessage(messages[1].text, messages[1].time, messages[1].sender)
        )
        // 3) add an action with RemoteInput
        .extend(NotificationCompat.WearableExtender().addAction(action)).build()

Java

// Create an intent for the reply action
Intent replyIntent = new Intent(this, ReplyActivity.class);
PendingIntent replyPendingIntent =
   PendingIntent.getActivity(this, 0, replyIntent, PendingIntent.FLAG_UPDATE_CURRENT);

// Create the reply action and add the remote input
NotificationCompat.Action action =
   new NotificationCompat.Action.Builder(R.drawable.ic_reply_icon,
   getString(R.string.label), replyPendingIntent)
  .addRemoteInput(remoteInput)
   // 1) allow generated replies
  .setAllowGeneratedReplies(true)
  .build();

Notification noti = new NotificationCompat.Builder()
    .setContentTitle(messages.length + " new messages with " + sender.toString())
    .setContentText(subject)
    .setSmallIcon(R.drawable.new_message)
    .setLargeIcon(aBitmap)
    // 2) set the style to MessagingStyle
    .setStyle(new NotificationCompat.MessagingStyle(resources.getString(R.string.reply_name))
    .addMessage(messages[0].getText(), messages[0].getTime(), messages[0].getSender())
    .addMessage(messages[1].getText(), messages[1].getTime(), messages[1].getSender()))
    // 3) add an action with RemoteInput
    .extend(new WearableExtender().addAction(action)).build();

Add images to a MessagingStyle notification

You can add images to a notification message by setting the appropriate MIME type and placing the URI to the image in NotificationCompat.MessagingStyle.Message.setData() method.

Here is the code snippet to set data of type image in a notification:

Kotlin

val message = NotificationCompat.MessagingStyle.Message("sticker", 1, "Jeff")
        .setData("image/png", stickerUri)

val notification = NotificationCompat.Builder(context, channelId)
        .setStyle(
                NotificationCompat.MessagingStyle("Me").addMessage(message)
        )
        .build()

Java

NotificationCompat.MessagingStyle.Message message = new Message("sticker", 1, "Jeff")
   .setData("image/png", stickerUri);

NotificationCompat notification = new NotificationCompat.Builder()
    .setStyle(new NotificationCompat.MessagingStyle("Me")
        .addMessage(message))
    .build();

In the above code snippet the variable stickerUri is a URI that points to a publicly-accessible location, as described here.

Construct a BigTextStyle Notification

You can insert extended text content into your notification by using the BIG_TEXT_STYLE. On a handheld device, users can see the extended content by expanding the notification. On a wearable device, the expanded content is visible by default when you use the BigTextStyle.

To add the extended content to your notification, call setStyle() on the NotificationCompat.Builder object, passing it an instance of either BigTextStyle or InboxStyle.

For example, the following code adds an instance of NotificationCompat.BigTextStyle to the event notification, in order to include the complete event description (which includes more text than can fit into the space provided for setContentText()).

Kotlin

// Specify the 'big view' content to display the long
// event description that may not fit the normal content text.
val bigStyle = NotificationCompat.BigTextStyle().run {
    bigText(eventDescription)
}

val notificationBuilder = NotificationCompat.Builder(this)
        .setSmallIcon(R.drawable.ic_event)
        .setLargeIcon(BitmapFactory.decodeResource(resources, R.drawable.notif_background))
        .setContentTitle(eventTitle)
        .setContentText(eventLocation)
        .setContentIntent(viewPendingIntent)
        .addAction(R.drawable.ic_map, getString(R.string.map), mapPendingIntent)
        .setStyle(bigStyle)

Java

// Specify the 'big view' content to display the long
// event description that may not fit the normal content text.
BigTextStyle bigStyle = new NotificationCompat.BigTextStyle();
bigStyle.bigText(eventDescription);

NotificationCompat.Builder notificationBuilder =
    new NotificationCompat.Builder(this)
        .setSmallIcon(R.drawable.ic_event)
        .setLargeIcon(BitmapFactory.decodeResource(
                getResources(), R.drawable.notif_background))
        .setContentTitle(eventTitle)
        .setContentText(eventLocation)
        .setContentIntent(viewPendingIntent)
        .addAction(R.drawable.ic_map,
                getString(R.string.map), mapPendingIntent)
        .setStyle(bigStyle);

Notice that you can add a large icon image to any notification using the setLargeIcon() method. However, these icons appear as large background images on a wearable and do not look good as they are scaled up to fit the wearable screen. To add a wearable-specific background image to a notification, see Add wearable specific-features for a notification. For more information about designing notifications with large images, see the Design principles of Wear OS.

Construct a MediaStyle notification

You can use the NotificationCompat.MediaStyle class to include playback control in your notifications. For the System UI to identify a notification representing an active media session, and respond accordingly (for example, by showing album artwork in the lockscreen), attach a MediaSession.Token using the setMediaSession(MediaSession.Token) method.

Note: If you use NotificationCompat.MediaStyle on a local notification without a media session attached, the system displays the notification as a regular notification and ignores the media style details.

Sebelumnya
Berikutnya