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. For more information, refer to Cards.

SDK Installation

Add the following dependency in the app/build.gradle file.

implementation("com.moengage:cards:2.1.00")

Replace $sdkVersion with the appropriate SDK version

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

SDK uses Glide for loading images and gifs. Ensure 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 using Activity

The SDK manifest has 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"/>

For more information about how to customize, refer to Customisation.

Integrating using 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.
The following 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 color.xml as described 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 a tab layout; the following 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 properties, you can override the styles or color attributes defined by the SDK in your application 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 three 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 and text formatting (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.

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

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

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.

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.