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.
| View | Use it to |
|---|---|
| Inbox view | Show the complete Message Center, with an adaptive list and message layout. |
| List view | Show only the message list. |
| Message view | Show 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.messageCenterin Kotlin orMessageCenter.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
MessageCenterMessageFragmentor the ComposeMessageCenterMessageScreen, which resolve content type and authentication for both.
The message list uses a local database. Message objects refresh with the list. Don’t hold onto individual message instances indefinitely.