> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Notification Center

> Add a notification center to your Android app to display push notification history using MoEngage SDK.

# 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 BOM

Integration using BOM  is the recommended way of integration; refer to the [Install Using BOM](https://www.moengage.com/docs/developer-guide/android-sdk/sdk-integration/basic-integration/Install-Using-BOM) document. Once you have configured the BOM add the dependency in the *app/build.gradle* file as shown below

<CodeGroup>
  ```Groovy build.gradle wrap theme={null}
  dependencies {
      ...
      implementation("com.moengage:inbox-ui")
  }
  ```
</CodeGroup>

Once the BOM is configured, include the specific MoEngage modules required for the application. \
Note: Version numbers are not required for these dependencies; the BOM automatically manages them.. 

## Adding the default Notification Center to your app

To use the default Notification Center UI you can either launch the [Activity](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.view/-inbox-activity/index.html) provided by the SDK or add the [Fragment](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.view/-inbox-fragment/index.html) 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.

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  //launching the default InboxActivity
  val intent = Intent(this, InboxActivity::class.java)
  startActivity(intent)
  ```

  ```java Java theme={null}
  Intent intent = new Intent(this, InboxActivity.class);
  startActivity(intent);
  ```
</CodeGroup>

### Use Fragment

You can embed [*InboxFragment*](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.view/-inbox-fragment/index.html) 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](https://developer.android.com/guide/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.

<CodeGroup>
  ```xml XML wrap theme={null}
  //launching the default InboxActivity
  val intent = Intent(this, InboxActivity::class.java)
  startActivity(intent)
  ```
</CodeGroup>

# Customizing Default Notification Center

SDK provides a certain set of UI customization options. The [InboxActivity](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.view/-inbox-activity/index.html) 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.

<CodeGroup>
  ```xml strings.xml wrap theme={null}
  <resources>
    <string name="moe_inbox_notification_title">[LABEL]</string>
  </resources>
  ```
</CodeGroup>

### 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

<CodeGroup>
  ```xml styles.xml wrap theme={null}
   <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>
  ```
</CodeGroup>

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.

<CodeGroup>
  ```xml color.xml wrap theme={null}
  {/*   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>
  ```
</CodeGroup>

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.

<CodeGroup>
  ```xml XML wrap theme={null}
  <color name="moe_inbox_color_primary_dark">[YOUR_COLOR]</color>
  ```
</CodeGroup>

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.

<CodeGroup>
  ```xml XML wrap theme={null}
  {/*   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>
  ```
</CodeGroup>

## InboxAdapter Customization

You can override [*InboxAdapter*](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.adapter/-inbox-adapter/index.html) to customize the look and feel of the notification Items.

<Info>
  In case of using a custom [*InboxAdapter*](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.adapter/-inbox-adapter/index.html), the app should make sure to invoke [*InboxListAdapater.onItemClicked()*](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.adapter/-inbox-list-adapter/on-item-clicked.html) on the 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.
</Info>

Once your custom InboxAdapter is ready, set the custom Adapter in [MoEInboxUiHelper](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui/-mo-e-inbox-ui-helper/index.html) before launching the [InboxActivity](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.view/-inbox-activity/index.html).

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  MoEInboxUiHelper.getInstance().setInboxAdapter(InboxCustomAdapter())
  ```
</CodeGroup>

## Advanced customization options

1. Deleting Notification from Notification Center\
   You can delete a particular notification from Notification Center by calling [deleteItem(](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.adapter/-inbox-list-adapter/delete-item.html)**)**.

   <CodeGroup>
     ```kotlin Kotlin wrap theme={null}
     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)
         }
     }
     ```

     ```java Java theme={null}
     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);
       });
     }
     ```
   </CodeGroup>

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*](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.view/-inbox-fragment/index.html) in your app without overriding [*InboxAdapter*](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.adapter/-inbox-adapter/index.html), 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](https://moengage.github.io/android-api-reference/inbox-ui/com.moengage.inbox.ui.listener/-on-message-click-listener/index.html).

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  //set the Message click listener
  MoEInboxUiHelper.getInstance().setOnMessageClickListener(listener)
  //Remove the Message click listener
  MoEInboxUiHelper.getInstance().setOnMessageClickListener(null)
  ```

  ```java Java theme={null}
  //set the Message click listener
  MoEInboxUiHelper.getInstance().setOnMessageClickListener(listener);
  //Remove the Message click listener
  MoEInboxUiHelper.getInstance().setOnMessageClickListener(null);
  ```
</CodeGroup>

# 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](https://img.shields.io/maven-central/v/com.moengage/inbox-core)

## SDK Installation

### Installing using Catalog

Integration using a Version Catalog is the recommended way of integration. Once you have configured the catalog, add the dependency in the ***app/build.gradle*** file as shown below

<CodeGroup>
  ```auto build.gradle wrap theme={null}
  dependencies {
       ...
      implementation(moengage.inboxCore)
  }
  ```
</CodeGroup>

Alternatively, you can add the dependency using Artifact ID as described in [Installation using Artifact ID](https://www.moengage.com/docs/developer-guide/android-sdk/sdk-integration/advanced-or-optional/installing-sdk-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](https://moengage.github.io/android-api-reference/inbox-core/com.moengage.inbox.core/-mo-e-inbox-helper/index.html).

## Get all messages

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  // 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)
  ```

  ```java Java theme={null}
  // 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);
  ```
</CodeGroup>

## Get UnClicked Notifications count

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  MoEInboxHelper.getInstance().getUnClickedMessagesCount(applicationContext)
  ```

  ```java Java theme={null}
  MoEInboxHelper.getInstance().getUnClickedMessagesCount(applicationContext)
  ```
</CodeGroup>

## Track Inbox Notification Clicks

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  MoEInboxHelper.getInstance().trackMessageClicked(context, inboxMessage)
  ```

  ```java Java theme={null}
  MoEInboxHelper.getInstance().trackMessageClicked(context, inboxMessage);
  ```
</CodeGroup>

## Delete Inbox Message

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  MoEInboxHelper.getInstance().deleteMessage(context, inboxMessage)
  ```

  ```java Java theme={null}
  MoEInboxHelper.getInstance().deleteMessage(context, inboxMessage);
  ```
</CodeGroup>

## Delete All Inbox Message

<Info>
  This feature requires a minimum catalog version **4.5.0**.
</Info>

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  MoEInboxHelper.getInstance().deleteAllMessages(context)
  ```

  ```java Java theme={null}
  MoEInboxHelper.getInstance().deleteAllMessages(context);
  ```
</CodeGroup>

## Check if the notification has a coupon code

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  MoEInboxHelper.getInstance().hasCouponCode(inboxMessage)
  ```

  ```java Java theme={null}
  MoEInboxHelper.getInstance().hasCouponCode(inboxMessage);
  ```
</CodeGroup>

## Get coupon code

<CodeGroup>
  ```kotlin Kotlin wrap theme={null}
  MoEInboxHelper.getInstance().getCouponCode(inboxMessage);
  ```

  ```java Java theme={null}
  MoEInboxHelper.getInstance().getCouponCode(inboxMessage);
  ```
</CodeGroup>

Refer to [API reference](https://moengage.github.io/android-api-reference/inbox-core/com.moengage.inbox.core/-mo-e-inbox-helper/index.html) for more details.