Configure expandable notifications

Overview

There are two types of Android views for notifications in the notification drawer: a normal view and a big view. The big view of a notification only appears when the notification is expanded. Here is an example of a normal, or simple, view payload:

"alert": {

    "subject": "my subject",

    "message": "my message"

    "notification-action": {

        "type": "url", 

        "name": "url", 

        "value": "http://www.google.com"

    },

}

Example of larger text
If you want to create a notification with larger text, you would use the following code.

"alert": {

    "subject": "my subject",

    "message": "my message"

    "notification-action": {

        "type": "openApp",

        "value": {

               "variable1" : "value1",

               "variable2": "value2"

         }

    },

    "expandable": {

        "type": "text",

        "value": "This is very long text used for demonstrating Android's BigText style. This is an expandable notification.",

        "expandable-actions": [

            {

                "type": "url", 

                "name": "url", 

                "value": "http://www.google.com"

            }, 

            {

                "type": "custom", 

                "name": "custom", 

                "value": "myintent"

            }, 

            {

                "type": "dial", 

                "name": "phone", 

                "value": "0509473828"

            }

        ]

    }

}

Example of large image
If you want to use a large image in your notification, you would use the following code.

"alert": {

    "subject": "my subject",

    "message": "my message"

    "notification-action": {

        "type": "openApp"

    },

    "expandable": {

        "type": "image",

        "value": "",

        "expandable-actions": [

            {

                "type": "url", 

                "name": "url", 

                "value": "http://www.google.com"

            }, 

            {

                "type": "custom", 

                "name": "custom", 

                "value": "myintent"

            }, 

            {

                "type": "dial", 

                "name": "phone", 

                "value": "0509473828"

            }

        ]

    }

}

Note:
Android 4.1 (and later) support big pictures that display under your the notification text when the text is expanded. You can add pictures to your drawable folders, your assets folder in your app, or load them remotely from a server by using a URL. Use a 2:1 aspect ratio for the image, and because some devices crop the width, use a 43:24 ratio (~1.79) for the main content. Android does not use a size limit, but Acoustic recommends the following minimum, balanced, and maximum sizes:

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

Custom expandable notifications

You can use a custom user interface for expandable notifications with the Android SDK.

Note: Custom expandable notifications work only with devices that have an API of 16 (4.1.x) or above. In older API levels, the custom notification is translated to a text expandable notification if the text is specified or an image expandable notification if no text is specified and an image URL is specified.

You can use a custom user interface by registering a layout under a given name and sending an expandable notification with the custom type. The custom type value is the name under which the layout was registered.

Remember: The layout must be compatible with Android App Widgets. For more information about app widgets, see Creating the App Widget Layout at http://developer.android.com/guide/topics/appwidgets/index.html#CreatingLayout.

The custom notification layout can contain the following details.

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

To register a custom notification layout, you must 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:

  1. The value of text is set as the text of the text element if the text attribute exists and the layout has a text element.
  2. The image of the image element is loaded from the URL, which is the value of image if the text attribute exists and the layout has an image element.
  3. For every action:
  • The click operation of the element is set to start the corresponding action; the first action element receives the first action, and so on.
  • If the action element is a text view, the text value of that view is set with the action’s name.