Create targeted or automated App Inbox/NewsFeed messages that can be grouped into various categories, and target your users with different updates or offers that can stay in the Inbox/Feed over a designated period of time. Refer to the help article to learn more about cards.

SDK Installation

MavenBadgeMavenBadge

Add the below dependency in the app/build.gradle file.
Note: The cards artifact should be compatible with the moe-android-sdk artifact you have already added. Make sure you check the version compatibility table below and pick the right version for your application.

implementation("com.moengage:cards:$sdkVersion")

replace $sdkVersion with the appropriate SDK version

SDK uses the Glide for loading images and gifs. Please make sure you add Glide to your application in case you don't have it already. SDK is compiled using library version 4.9.0 we recommend you use the same version or higher in your application.

Adding the UI Component

You can integrate the card UI into your application either by inflating the activity provided by the SDK or attaching the Fragment provided by the SDK to an existing Activity in the application.

Integrating via Activity

The SDK's manifest has already declared the activity in the manifest file and nothing additional is required until and unless you want to customize the theme of the Activity or any other launch property.
The default declaration is as below.

<activity
        android:name="com.moengage.cards.ui.CardActivity"
        android:label="@string/moe_card_feed_title"
        android:theme="@style/MoECardTheme.NoActionBar"/>

Refer to the Customisation section to know more about how to customize the theme or the label etc.

Integrating via Fragment

To integrate the Card UI as a fragment you can inflate the com.moengage.cards.ui.CardFragment from the appropriate place inside your application

UI Customizations

SDK provides a certain set of UI customizations.

Activity Customization

If you are integrating the activity provided by the SDK you can customize the label, theme, etc.
To customize the theme, label you can either re-declare the activity in your app's manifest and provide the desired theme or label.
Alternatively, you can override the SDK defaults as described below.

Activity Label

The default label for the activity is Inbox. In case you want to change the label add the moe_card_feed_title string in your strings.xml file with the label name.

<string name="moe_card_feed_title">[YOUR_LABEL_NAME]</string>

Activity Theme

The default theme applied to the Activity is MoECardTheme.NoActionBar.
Below is the theme definition.

<style name="MoECardTheme" parent="Theme.AppCompat.Light" />

  <style name="MoECardTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="colorPrimary">@color/moe_card_color_primary</item>
    <item name="colorPrimaryDark">@color/moe_card_color_primary_dark</item>
    <item name="colorAccent">@color/moe_card_color_accent</item>
    <item name="colorControlNormal">@color/moe_card_control_color</item>
  </style>

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

  <style name="MoETheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<!-- Theme customisation -->
  <color name="moe_card_color_accent">#1C64D0</color>
  <color name="moe_card_color_primary_dark">@color/moe_black</color>
  <color name="moe_card_color_primary">@color/moe_white</color>
  <color name="moe_card_control_color">@color/moe_black</color>

To customize the theme override any of the color attributes.
To override define the attribute with the same name in the colors.xml file of the application and specify the desired color.
For example, if you want to customize the accent color define moe_card_color_accent in your application's color.xml as shown below and replace [YOUR_COLOR] with the desired color.

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

Activity Toolbar

The CardActvity has a toolbar in the layout with the below style. In case, you want to customize any of the properties override the below style completely or you can override the individual items are well.

<style name="MoECardToolbarTextStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textColor">@color/moe_card_toolbar_text_color</item>
    <item name="android:fontFamily">@font/roboto</item>
    <item name="android:textSize">@dimen/moe_card_tab_font_size</item>
  </style>

The background color of the toolbar is set to the primary color of the theme.

Tab Customisation

The Card UI is built with tab layout, below is the list of customization options provided by the SDK.

  • Text Appearance
    • Font
    • Text Size
  • Tab Text-color selected/unselected
  • Tab background-color selected/unselected

To customize the above properties you can override the styles or color attributes defined by the SDK in your applications colors.xml or styles.xml file.

<style name="MoECardTabTextStyle">
    <item name="android:textColor">@color/moe_card_toolbar_text_color</item>
    <item name="android:fontFamily">@font/roboto</item>
    <item name="android:textSize">@dimen/moe_card_tab_font_size</item>
  </style>
<color name="moe_card_tab_selected_text_color">#1C64D0</color>
  <color name="moe_card_tab_unselected_text_color">#8E8E8E</color>
  <color name="moe_card_tab_background_selected">@color/moe_white</color>
  <color name="moe_card_tab_background_unselected">@color/moe_white</color>

Text Customization

Each card has 3 text fields and a button

  • Header
  • Message
  • Call to Action Button(CTA)
  • Timestamp
    The default style for each of these components can be overridden by overriding the below styles completely or overriding the individual items.
    Certain styling components like color, text formattings(like bold, italic, etc) for these fields are customizable from the MoEngage Dashboard while others like font and text size fixed on the SDK side. values for these can be overridden and will be applied to all cards.

Note: The color defined in these styles are default colors and will be overridden by the colors selected during campaign creation.

<!-- Header style -->
  <style name="MoECardHeaderTextStyle">
    <item name="android:textSize">@dimen/moe_card_header_font_size</item>
    <item name="android:singleLine">true</item>
    <item name="android:ellipsize">marquee</item>
    <item name="android:textColor">@color/moe_card_header_color</item>
    <item name="android:fontFamily">@font/roboto</item>
  </style>
  <!-- Message style -->
  <style name="MoECardMessageTextStyle">
    <item name="android:textSize">@dimen/moe_card_content_font_size</item>
    <item name="android:maxLines">3</item>
    <item name="android:ellipsize">end</item>
    <item name="android:textColor">@color/moe_card_message_color</item>
    <item name="android:fontFamily">@font/roboto</item>
  </style>
  <!-- Button style -->
  <style name="MoECardCtaStyle">
    <item name="android:textColor">@color/moe_card_cta_color</item>
    <item name="android:fontFamily">@font/roboto</item>
    <item name="android:textSize">@dimen/moe_card_cta_font_size</item>
    <item name="android:singleLine">true</item>
    <item name="android:ellipsize">marquee</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:foreground">?android:attr/selectableItemBackground</item>
  </style>
  <!-- Timestamp Style -->
  <style name="MoECardTimeTextStyle">
    <item name="android:textSize">@dimen/moe_card_time_font_size</item>
    <item name="android:singleLine">true</item>
    <item name="android:ellipsize">marquee</item>
    <item name="android:textColor">@color/moe_card_timestamp_color</item>
    <item name="android:fontFamily">@font/roboto</item>
  </style>
<!-- Text Color -->
  <color name="moe_card_header_color">#424242</color>
  <color name="moe_card_message_color">#616161</color>
  <color name="moe_card_timestamp_color">#9E9E9E</color>

Timestamp format can be customization
The default format for the timestamp shown on each card is MMM dd, hh:mm a this can be customized by passing the custom format to configureCards() of the MoEngage.Builder object while initializing the SDK.

Card Customization

You can customize the following properties for a given card

  • Un-clicked Indicator Color
  • Card Background Color (overridden by the color selected during the campaign creation)
    Override the below color resources in the colors.xml to use the desired color.
<color name="moe_card_unclicked_indicator_color">#5956D6</color>
  <color name="moe_card_background_color">@color/moe_white</color>

Empty State

If the inbox does not contain any cards SDK shows an empty screen with an image and message as shown below.

The image and message can be customized if required.

Image Customization

To customize the image pass in the resource id of the image to setEmptyInboxImageForCard() in the MoEngage.Builder object while initializing the SDK.

Message Customisation

To customize the message override the moe_card_no_message_available in your applications strings.xml file.

<string name="moe_card_no_message_available">[YOUR_STRING_GOES_HERE]</string>

Customise Delete Text

To customize the message of the delete button override the below string resource in the strings.xml of your application.

<string name="moe_card_delete_title">[YOUR_STRING_GOES_HERE]</string>

Note: This customization is only available from SDK version 2.0.02

Disable Pull to Refresh

By default, the Card Activity/Fragment has the pull to refresh feature enabled, you can disable pull to refresh by passing the required flag in the configureCards() of the MoEngage.Builder object while initializing the SDK.
Refer to the Card Config API reference for more details.

Note: This customization is only available from SDK version 2.0.02

APIs

Unclicked Count

The SDK provides an API to fetch the number of cards which hasn't been clicked by the users. To get the count you can use the below API

MoECardHelper.getInstance().getUnClickedCardCount(context)
MoECardHelper.Companion.getInstance().getUnClickedCardCount(context);

The result of the API call is given in the onUnClickedCountAvailable() callback of the CardListener, make sure to register the callback before calling this API. Refer to the Callbacks section below to know more about how to register the callback.

New Card Count

The SDK provides an API to get the new cards for the user on the device. To get the count to use the below API

MoECardHelper.getInstance().getNewCardCount(context)
MoECardHelper.Companion.getInstance().getNewCardCount(context);

The result of the API call is given in the onNewCardCountAvailable() callback of the CardListener, make sure to register the callback before calling this API. Refer to the Callbacks section below to know more about how to register the callback.

We suggest you call the above APIs once the SDK completes syncing all the new Cards. SDK provides a callback onSyncComplete() whenever the cards are refreshed on Application Open or Launch.

Callbacks

The SDK provides callbacks when

  • Cards are successfully synced
  • Card is deleted by the user
  • Card is clicked by the user

Extend the CardListener class and register the callback using MoECardHelper.getInstance().registerListener()

Refer to the API reference of CardListener for details around API signature etc.

Version Compatibility

The cards artifact/module is 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 Cards module.

Core SDK Version

Cards Version

11.2.00 and above

2.1.00 and above

11.0.00 - 11.1.00

2.0.00 - 2.0.02

10.6.00

1.2.00

10.3.02 - 10.5.00

1.1.00

10.2.01 - 10.3.02

1.0.01

10.1.00 - 10.2.00

1.0.00