Configure expandable notifications

There are two types of Android views for notifications in the notification drawer: a normal view, which is displayed by default, and an expanded view. The expanded view is only visible when the user opens the notification.

"alert": {
  "subject": "Summer sale — ends tonight",
  "message": "Save up to 50% on selected items.",
  "notification-action": {
    "type": "url",
    "name": "url",
    "value": "https://www.example.com/summer-sale"
  },
}

"alert": {
  "subject": "Summer sale — ends tonight",
  "message": "Save up to 50% on selected items.",
  "notification-action": {
    "type": "openApp"
  },
  "expandable": {
    "type": "text",
    "value": "Don't miss out — our summer sale ends tonight. Shop now and save up to 50% on selected items.",
    "expandable-actions": [{
      "type": "url",
      "name": "url",
      "value": "https://www.example.com/summer-sale"
    },
    {
      "type": "custom",
      "name": "custom",
      "value": "viewSale"
    },
    {
      "type": "dial",
      "name": "phone",
      "value": "18005550100"
    }]
  }
}

📘
Note
When the notification is expanded, the expandable.value content replaces the message field (it is not appended to it). This is standard Android BigTextStyle behavior: bigText() overwrites setContentText() on expansion. If you want the full original message to be visible in the expanded view, begin expandable.value with the message text, followed by any additional content.

Adding expandable images

Android supports expandable images that display under the notification text when the notification is opened. You can add images to your drawable folders, your assets folder in your app, or load them remotely from a server by using a URL.

File requirements

Use a 2:1 aspect ratio for the image. Because some devices crop the width, use a 43:24 ratio (~1.79) for the main content area. Android does not enforce a file size limit, but we recommend the following image dimensions:

Minimum – 512×256
Balanced – 1024×512
Maximum – 2048×1024

"alert": {
  "subject": "New arrivals — summer collection",
  "message": "Discover our latest summer styles.",
  "notification-action": {
    "type": "openApp"
  },
  "expandable": {
    "type": "image",
    "value": "https://www.example.com/images/summer-collection.jpg",
    "expandable-actions": [{
      "type": "url",
      "name": "url",
      "value": "https://www.example.com/new-arrivals"
    },
    {
      "type": "custom",
      "name": "custom",
      "value": "viewCollection"
    },
    {
      "type": "dial",
      "name": "phone",
      "value": "18005550100"
    }]
  }
}

Using custom expandable notifications

You can use a custom user interface for expandable notifications with the Campaign Android SDK. Register a layout under a given name and send an expandable notification with the custom type.

Remember: The layout must be compatible with Android App Widgets. For more information, see Create a simple widget.

The custom notification layout can contain the following details.

A text view element for expandable text.
An image view element for image display.
Up to three elements for the expandable actions.

To register a custom notification layout, make the following call.

import co.acoustic.mobile.push.sdk.api.MceSdk;

MceSdk.setCustomNotificationLayout( < context > , // the application context
< layout name > , // the name under which the layout will be registered
< layout id > , // the id of the layout
< text element id > , // the id of the text element (must be an id of a TextView or 0 for no text element)
< image element id > , // The id of the image element (must be an id of an ImageView or 0 for no image element)
< action id > ... // Up to 3 ids of UI element ids.
);

To send an expandable notification that uses a custom layout, set the following code in the expandable element payload

"type": "custom",

"value": "<the name under which the layout is registered>",

"text": "<the text that will be presented in the text element>",
// optional
"image": "<the image url>" // optional

When the notification is created, the following events occur:

If text is provided and the layout has a text view element, the text value is displayed in it.
If image is provided and the layout has an image view element, the image is loaded from the image URL into it.
For each action, the SDK wires up a tap handler on the corresponding layout element in order. If the element is a text view, the action's name is used as its label.

Updated 6 days ago

Did this page help you?