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. 

Using MoEngage's default Notification Center

SDK Installation

Installing using Catalog

Integration using a Version Catalog is the recommended way of integration; refer to the Configure Version Catalog document to configure a catalog if not done already. Once you have configured the catalog add the dependency in the app/build.gradle file as shown below

dependencies {
     ...
    implementation(moengage.inboxUi)
}

Alternatively, you can add the dependency using Artifact ID as described in Installation using Artifact ID. However, installation using Catalog ID is the recommended approach as installing using Artifact ID may lead to version mismatch if mapped incorrectly. 

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. For information on how to add a Fragment to an Activity, refer to Google documentation on Fragments.

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.

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

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 style.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.

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

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

Advanced customization options

1. Deleting Notification from Notification Center
   You can delete a particular notification from Notification Center by calling deleteItem().
   Kotlin Java

   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.

2. 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.

   Kotlin Java

   //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.

SDK Installation

Installing using Catalog

Integration using a Version Catalog is the recommended way of integration; refer to the Configure Version Catalog document to configure a catalog if not done already. Once you have configured the catalog, add the dependency in the app/build.gradle file as shown below

dependencies {
     ...
    implementation(moengage.inboxCore)
}

Alternatively, you can add the dependency using Artifact ID as described in Installation using Artifact ID. However, installation using Catalog ID is the recommended approach as installing using Artifact ID may lead to version mismatch if mapped incorrectly.

Build Your Notification Center

The below helper APIs can be used to build your own Notification Center. For more information on available helper APIs refer here.

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);

Delete All Inbox Message

MoEInboxHelper.getInstance().deleteAllMessages(context)

MoEInboxHelper.getInstance().deleteAllMessages(context);

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.