Build a custom Message Center

Build a custom Message Center by composing the SDK’s ready-to-use components, handling display requests, integrating with your navigation, and filtering messages.

By default, when your app receives a push notification with a Message Center action, or when you call Airship.messageCenter.showMessageCenter(), the SDK displays the Message Center as a modal activity. For tighter integration with your app’s navigation, build your own Message Center from the ready-to-use components the SDK provides.

Choose a module

Airship provides two Message Center UI modules. Include only the one that matches your app’s UI framework. Do not include both.

  • urbanairship-message-center-compose: Jetpack Compose components, for apps built with Compose.
  • urbanairship-message-center: XML View components and fragments, for apps using traditional Android Views.

Each ready-to-use view below documents both the Compose composable and the XML fragment, so use the tab for your framework.

Ready-to-use views

Use the highest-level view that fits your needs, and drop to the lower-level views when you need more control.

ViewUse it to
Inbox viewShow the complete Message Center, with an adaptive list and message layout.
List viewShow only the message list.
Message viewShow a single message.

For colors, fonts, and icons, see Applying a custom theme.

Handling display requests

A push notification with a Message Center action, or a call to Airship.messageCenter.showMessageCenter(), triggers a display request. To route these requests to your own UI instead of the default activity, set a listener. Return true to prevent the default display.

Override default display

Airship.messageCenter.setOnShowMessageCenterListener { messageId: String? ->
    // Navigate to your custom Message Center UI
    // messageId is optional - null means show the full message list

    // Return true to prevent the default SDK display
    true
}
MessageCenter.shared().setOnShowMessageCenterListener(messageId -> {
    // Navigate to your custom Message Center UI
    // messageId is optional - null means show the full message list

    // Return true to prevent the default SDK display
    return true;
});

Filtering messages

Set a predicate to control which messages appear. The SDK evaluates the predicate against every message and displays only those that pass. Set a predicate globally on the Message Center, or pass one to an individual view.

Filter by named user

If multiple users share a device, filter the inbox to the current named user. When you create a message, include a custom key named named_user_id set to the user’s ID. See Add custom keys or the extra object in the Message Center object.

Filter by named user

Airship.messageCenter.predicate = Predicate { message ->
    val namedUserID = Airship.shared().contact.namedUserID
        ?: return@Predicate false

    val messageNamedUserID = message.extras?.get("named_user_id") as? String
    messageNamedUserID == namedUserID
}
MessageCenter.shared().setPredicate(message -> {
    String namedUserID = Airship.shared().getContact().getNamedUserID();
    if (namedUserID == null) {
        return false;
    }

    Map<String, String> extras = message.getExtras();
    String messageNamedUserID = extras != null ? extras.get("named_user_id") : null;
    return messageNamedUserID != null && messageNamedUserID.equals(namedUserID);
});

To filter a single view instead of the whole app, pass a predicate to that view. The Compose views accept a predicate through their state, and the XML fragments expose a predicate property. See the inbox view and list view pages.

Key components

MessageCenter
The main entry point for fetching messages and handling display callbacks. Access it through Airship.messageCenter in Kotlin or MessageCenter.shared() in Java.
Inbox
Retrieves messages asynchronously and exposes the local message array. Access it through Airship.messageCenter.inbox.
Message
A model object representing an individual message. A message’s content is either a web body or a native (SceneA mobile app or web experience of one or more screens displayed with fully native UI components in real time, providing immediate, contextual responses to user behaviors. Scenes can be presented in full-screen, modal, or embedded format using the default swipe/click mode or as a story. Scene content can also be displayed in a Message Center message and contain survey questions.) layout. Don’t load the body directly—render it with MessageCenterMessageFragment or the Compose MessageCenterMessageScreen, which resolve content type and authentication for both.
Note

The message list uses a local database. Message objects refresh with the list. Don’t hold onto individual message instances indefinitely.