Message Center

The default Message Center is provided out of the box to all customers using iOS or Android SDK 7.0.0 or later. It requires little to no integration to get started and supports some basic theming options.

Installation

Message Center requires adding the urbanairship-message-center module:


dependencies {
  def airshipVersion = "14.3.0"

  implementation "com.urbanairship.android:urbanairship-message-center:$airshipVersion"
}

Displaying the Message Center

The Message Center can be displayed any time by calling showMessageCenter:

Displaying the Message Center

MessageCenter.shared().showMessageCenter();

MessageCenter.shared().showMessageCenter()

Displaying a specific Message within the Message Center

MessageCenter.shared().showMessageCenter(messageId);

MessageCenter.shared().showMessageCenter(messageId)

Overriding the Default Display

The Airship SDK will default to showing the provided MessageCenterActivity. A custom show behavior can be accomplished by providing a MessageCenter.OnShowMessageCenterListener listener during takeOff:

MessageCenter.shared().setOnShowMessageCenterListener(messageId -> {
    // Show the message center (messageId is optional)
    return true;
});

MessageCenter.shared().setOnShowMessageCenterListener { messageId: String? ->
    // Show the message center (messageId is optional)
    true
}

Listening for Inbox Updates

To listen for inbox changes, add a InboxListener the inbox to be notified whenever the message listing changes:

MessageCenter.shared().getInbox().addListener(() -> {
    // inbox updated
});

MessageCenter.shared().inbox.addListener {
    // inbox updated
}

Styling the Message Center

The Message Center can be styled by providing a custom style in the application’s theme with the attribute messageCenterStyle. The Message Center can be customized with the following attributes:

messageCenterItemBackground: A drawable for the message item’s background
messageCenterItemTitleTextAppearance: Text appearance style for the message’s title
messageCenterItemDateTextAppearance: Text appearance style for the message’s date
messageCenterItemIconEnabled: Flag to enable message list icons instead of a checkbox
messageCenterItemIconPlaceholder: The default placeholder when using message list icons
messageNotSelectedTextAppearance: Text appearance style for the no message selected text when displaying the Message Center in a tablet view
messageNotSelectedText: String to use for the “no message selected” text when displaying the Message Center in a tablet view.
messageCenterEmptyMessageTextAppearance: Text appearance style for the empty message list text
messageCenterEmptyMessageText: String to use for the empty message list text
messageCenterDividerColor: The message list divider color

Example

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
   <!-- Set the custom Message Center style -->
   <item name="messageCenterStyle">@style/AppTheme.MessageCenter</item>
</style>

 <style name="AppTheme.MessageCenter" parent="MessageCenter">
     <item name="messageCenterDividerColor">#44000000</item>
     <item name="messageCenterItemIconEnabled">true</item>
     <item name="messageCenterItemTitleTextAppearance">@style/AppTheme.MessageCenter.TitleTextAppearance</item>
     <item name="messageCenterItemDateTextAppearance">@style/AppTheme.MessageCenter.DateTextAppearance</item>
 </style>

 <!-- Custom message title text style -->
 <style name="AppTheme.MessageCenter.TitleTextAppearance" parent="MessageCenter.Item.Title.TextAppearance">
     <item name="android:textSize">30sp</item>
     <item name="android:textStyle">italic</item>
     <item name="android:textColor">@android:color/black</item>
 </style>

 <!-- Custom message date text style -->
 <style name="AppTheme.MessageCenter.DateTextAppearance" parent="MessageCenter.Item.Date.TextAppearance">
     <item name="android:textSize">16sp</item>
     <item name="urbanAirshipFontPath">"fonts/CustomFont.ttf"</item>
 </style>

Message Center Filtering

Sometimes it can be useful to filter the contents of the message center according to some predetermined pattern. To facilitate this, use the shared MessageCenter instance to set a predicate. Once set, only messages that match the predicate will be displayed.

Filtering messages

Predicate<Message> predicate = new Predicate<>() {
    @Override
    public boolean apply(Message message) {
        return message.getTitle().contains("Cool");
    }
};

MessageCenter.shared().setPredicate(predicate);

MessageCenter.shared().predicate = Predicate { message ->
    message.title.contains("Cool")
}

Embedding the Message Center

The Message Center can be embedded in any FragmentActivity using MessageCenterFragment .

Embedding the MessageCenterFragment in a layout xml

<fragment
    android:name="com.urbanairship.messagecenter.MessageCenterFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Embedding the MessageCenterFragment using a fragment transaction

MessageCenterFragment fragment = new MessageCenterFragment();
getSupportFragmentManager().beginTransaction()
                                   .replace(R.id.content_frame, fragment, "message_center")
                                   .commit();

val fragment = MessageCenterFragment()
getSupportFragmentManager().beginTransaction()
        .replace(R.id.content_frame, fragment, "message_center")
        .commit()

Feedback

Was this page helpful?