Notification Center

MoEngage Add On Inbox library provides an out-of-box inbox support

📘

To use these modules you need to use 11.2.00 or above version of moe-android-sdk
If you are using an older version of moe-android-sdk Refer to this documentation to integrate the notification center.

Overview

The Notification Center shows your push notification history, allowing you to provide an option for the end-user to scroll back and see what they have missed.
MoEngage provides out-of-box inbox support with a fully customizable default UI and also provides an option to build your own Notification Center.

Notification CenterNotification Center

Notification Center

Using MoEngage's default Notification Center

MavenBadgeMavenBadge

Adding dependency

Add the following dependency in build.gradle

implementation("com.moengage:inbox-ui:$sdkVersion")

where $sdkVersion should be replaced by the latest version of the SDK.

Adding the default Notification Center to your app

To use the default Notification Center UI you can either launch the Activity provided by the SDK or add the Fragment provided by the SDK.

Use Activity

The activity is already declared in the SDK's manifest file and can be inflated using the below code.

//launching the default InboxActivity
val intent = Intent(this, InboxActivity::class.java)
startActivity(intent)
Intent intent = new Intent(this, InboxActivity.class);
startActivity(intent);

Use Fragment

You can embed InboxFragment provided by the SDK in your app's activity. Refer to Google's documentation on Fragments for information on how to add a Fragment to an Activity.

Adding parent Activity to the inbox.

Optionally if you want to define the parent activity for the Inbox then use the below code. Replace [PARENT_ACTIVITY_NAME] with the name of the parent activity.

<activity
   android:name="com.moengage.inbox.ui.view.InboxActivity"
   android:parentActivityName="[PARENT_ACTIVITY_NAME]">
</activity>

Customizing Default Notification Center

SDK provides a certain set of UI customization options. The InboxActivity is already in the SDK's manifest file, if a change in label/theme of the default activity is required the activity should be declared again in your app's manifest file and override the attributes.

Activity Label customization

The default label for the Inbox Activity is Notification Inbox, which you can override by declaring the moe_inbox_notification_title in the strings.xml of your application.

<resources>
  <string name="moe_inbox_notification_title">[LABEL]</string>
</resources>

Activity theme

To customize the theme you can either re-declare the activity in your app's manifest and provide the desired theme or you can override the SDK defaults as described below.

The default theme applied to InboxActivity is MoEInboxTheme.NoActionBar. You can declare a theme with the same name in the application's styles.xml or themes.xml or equivalent file.

Below is the definition of the default theme

<style name="MoEInboxTheme.NoActionBar">
    <item name="colorPrimary">@color/moe_inbox_color_primary</item>
    <item name="colorPrimaryDark">@color/moe_inbox_color_primary_dark</item>
    <item name="colorControlNormal">@color/moe_inbox_control_color</item>
    <item name="android:background">@color/moe_inbox_background_color</item>
  </style>

  <style name="MoETheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Light" />

  <style name="MoETheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
</style>

To customize the theme, override any of the color attributes by defining the color attributes with the same name in your application's colors.xml file.

<!-- Theme customisation -->
<color name="moe_inbox_color_accent">#1C64D0</color>
<color name="moe_inbox_color_primary_dark">@color/moe_black</color>  
<color name="moe_inbox_color_primary">@color/moe_white</color>
<color name="moe_inbox_control_color">@color/moe_black</color>

For example, if you want to customize the primary dark color define moe_inbox_color_primary_dark in your app's colors.xml as shown below.

<color name="moe_inbox_color_primary_dark">[YOUR_COLOR]</color>

Similarly, you can customize

  • Toolbar Style
  • Message Text Appearance
    • Header
    • Message
    • Timestamp
  • Scrollbar style
  • Empty Notification Center style

You can override the below SDK's default attributes to customize the theme.

<!--  Toolbar Text Style-->
<style name="MoEInboxToolbarTextStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
  <item name="android:textColor">@color/moe_inbox_toolbar_text_color</item>
  <item name="android:fontFamily">@font/roboto</item>
  <item name="android:textSize">@dimen/moe_inbox_tab_font_size</item>
  <item name="android:textStyle">bold</item>
</style>

<!-- Header style -->
<style name="MoEInboxHeaderTextStyle">
  <item name="android:background">@color/moe_inbox_transparent_color</item>
  <item name="android:textSize">@dimen/moe_inbox_header_font_size</item>
  <item name="android:singleLine">true</item>
  <item name="android:ellipsize">marquee</item>
  <item name="android:textColor">@color/moe_inbox_header_color</item>
  <item name="android:fontFamily">@font/roboto</item>
  <item name="android:textStyle">bold</item>
</style>

<!-- Message style -->
<style name="MoEInboxMessageTextStyle">
  <item name="android:background">@color/moe_inbox_transparent_color</item>
  <item name="android:textSize">@dimen/moe_inbox_content_font_size</item>
  <item name="android:maxLines">3</item>
  <item name="android:ellipsize">end</item>
  <item name="android:textColor">@color/moe_inbox_message_color</item>
  <item name="android:fontFamily">@font/roboto</item>
</style>

<!-- List Item Separator style -->
<style name="MoEInboxSeparatorStyle">
  <item name="android:background">@drawable/moe_inbox_item_divider</item>
</style>
    
<!-- Timestamp Style -->
<style name="MoEInboxTimeTextStyle">
  <item name="android:background">@color/moe_inbox_transparent_color</item>
  <item name="android:textSize">@dimen/moe_inbox_time_font_size</item>
  <item name="android:singleLine">true</item>
  <item name="android:ellipsize">marquee</item>
  <item name="android:textColor">@color/moe_inbox_timestamp_color</item>
  <item name="android:fontFamily">@font/roboto</item>
</style>

<!--  Empty List Style-->
<style name="MoEInboxEmptyBoxTextStyle">
  <item name="android:background">@color/moe_inbox_transparent_color</item>
  <item name="android:textSize">@dimen/moe_inbox_empty_box_text_size</item>
  <item name="android:textColor">@color/moe_inbox_message_color</item>
  <item name="android:fontFamily">@font/roboto</item>
</style>

<!--  Scrollbar style-->
<style name="MoEInboxScrollbarStyle">
  <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
  <item name="android:scrollbarStyle">outsideOverlay</item>
  <item name="android:scrollbars">vertical</item>
  <item name="android:fadeScrollbars">true</item>
  <item name="android:scrollbarThumbVertical">@drawable/moe_inbox_vertical_scroller_thumb</item>
  <item name="android:scrollbarSize">30dp</item>
</style>

InboxAdapter Customization

You can override InboxAdapter to customize the look and feel of the notification Items.

NOTE: In case of using a custom InboxAdapter the app should make sure to invoke InboxListAdapter#onItemClicked() on message item click for the SDK to handle the notification click action, otherwise, the click event will not be tracked and the on click action will not be executed.

Once your custom InboxAdapter is ready, set the custom Adapter in MoEInboxUiHelper before launching the InboxActivity.

MoEInboxUiHelper.getInstance().setInboxAdapter(InboxCustomAdapter())

Advanced customisation options

  1. Deleting Notification from Notification Center
    You can delete a particular notification from Notification Center by calling deleteItem(Int, InboxMessage) .
public fun onBind(position: Int, inboxMessage: InboxMessage, inboxListAdapter: InboxListAdapter) {
  deleteButton.setOnClickListener{
    //Call `deleteItem` method to remove Notification 
    //with item's position and the `InboxMessage` object.
     inboxListAdapter.deleteItem(position, inboxMessage)
    }
}
public void onBind(int position, InboxMessage inboxMessage, InboxListAdapter inboxListAdapter) {
  deleteButton.setOnClickListener(v -> {
    //Call `deleteItem` method to remove Notification 
    //with item's position and the `InboxMessage` object.
    inboxListAdapter.deleteItem(position, inboxMessage);
  });
}

Now, your Notification will get deleted from Notification Center and Notification Center will get updated.

  1. Custom notification item click handling

In case you are using the default Notification Center or using the InboxFragment in your app without overriding InboxAdapter, by default the SDK will handle the notification click action but you can opt to handle the click action in your app by setting OnMessageClickListener .

//set the Message click listener
MoEInboxUiHelper.getInstance().setOnMessageClickListener(listener)
//Remove the Message click listener
MoEInboxUiHelper.getInstance().setOnMessageClickListener(null)
//set the Message click listener
MoEInboxUiHelper.getInstance().setOnMessageClickListener(listener);
//Remove the Message click listener
MoEInboxUiHelper.getInstance().setOnMessageClickListener(null);

Self Handled Notification Center

MoEngage SDK provides helper APIs to fetch the relevant inbox data to display, track events, delete messages, etc that can be used to build your Notification Centre.

MavenBadgeMavenBadge

Adding dependency

implementation("com.moengage:inbox-core:$sdkVersion")

where $sdkVersion should be replaced by the latest version of the SDK.

The below helper APIs can be used to build your own Notification Center.

Get all messages

// synchronous API should not be called on the main thread
MoEInboxHelper.getInstance().fetchAllMessages(context)
// asynchronous API, where listener is an instance of `OnMessagesAvailableListener`
MoEInboxHelper.getInstance().fetchAllMessagesAsync(applicationContext, listener)
// synchronous API should not be called on the main thread
MoEInboxHelper.getInstance().fetchAllMessages(context);
// asynchronous API, where listener is an instance of `OnMessagesAvailableListener`
MoEInboxHelper.getInstance().fetchAllMessagesAsync(applicationContext, listener);

Get UnClicked Notifications count

MoEInboxHelper.getInstance().getUnClickedMessagesCount(applicationContext)
MoEInboxHelper.getInstance().getUnClickedMessagesCount(applicationContext)

Track Inbox Notification Clicks

MoEInboxHelper.getInstance().trackMessageClicked(context, inboxMessage)
MoEInboxHelper.getInstance().trackMessageClicked(context, inboxMessage);

Delete Inbox Message

MoEInboxHelper.getInstance().deleteMessage(context, inboxMessage)
MoEInboxHelper.getInstance().deleteMessage(context, inboxMessage);

Check if the notification has a coupon code

MoEInboxHelper.getInstance().hasCouponCode(inboxMessage)
MoEInboxHelper.getInstance().hasCouponCode(inboxMessage);

Get coupon code

MoEInboxHelper.getInstance().getCouponCode(inboxMessage)
MoEInboxHelper.getInstance().getCouponCode(inboxMessage)

Refer to API reference for more details.

Version Compatibility

The inbox-core and inbox-ui artifacts/modules are dependent on the Core SDK or moe-android-sdk artifact/module.
Based on the version of the Core SDK you are using choose the right version of the Inbox module.

inbox-core compatibility.

Core SDK Version

Inbox-Core Version

11.2.00 and above

1.0.00 and above

inbox-ui version compatibity

Core SDK Version

Inbox-Core Version

11.2.00 and above

1.0.00 and above