Notification Center
 

NOTE

To use these modules you need to use 11.2.00 or a later version of moe-android-sdk. If you are using an older version of moe-android-sdk. For more information about integration with versions lesser than 11.2.00, refer to Notification Center for the 11.1.00 version.

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

Adding dependency

Add the following dependency in build.gradle.

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

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

We recommend integrating the MoEngage Dependency Catalog to easier dependency management. Refer to the documentation to know more.

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.

Kotlin Java
//launching the default InboxActivity
val intent = Intent(this, InboxActivity::class.java)
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.

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

strings.xml
<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

styles.xml
 <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.

color.xml
<!-- 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.

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

XML
<!--  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.

Kotlin
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(Int, InboxMessage) .
    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)
        }
    }
    

    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 .

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

MavenBadge

Adding dependency

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

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

We recommend integrating the MoEngage Dependency Catalog to easier dependency management. Refer to the documentation to know more.

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

Get all messages

Kotlin Java
// 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

Kotlin Java
 MoEInboxHelper.getInstance().getUnClickedMessagesCount(applicationContext)

Track Inbox Notification Clicks

Kotlin Java
MoEInboxHelper.getInstance().trackMessageClicked(context, inboxMessage)

Delete Inbox Message

Kotlin Java
MoEInboxHelper.getInstance().deleteMessage(context, inboxMessage)

Check if the notification has a coupon code

Kotlin Java
MoEInboxHelper.getInstance().hasCouponCode(inboxMessage)

Get coupon code

Kotlin Java
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
 
 
Was this article helpful?
0 out of 0 found this helpful