Jetpack Compose での Cards

dependencies {
    implementation(platform("com.moengage:android-bom:[BOM_VERSION]"))

    implementation("com.moengage:cards-ui-compose")
}

import com.moengage.cards.ui.compose.MoECardComposeActivity
import com.moengage.core.MOENGAGE_ACCOUNT_IDENTIFIER

val intent = Intent(this, MoECardComposeActivity::class.java)
// Pass the extra only if your application is configured with more than one workspace.
intent.putExtra(MOENGAGE_ACCOUNT_IDENTIFIER, "YOUR_WORKSPACE_ID")
startActivity(intent)

import com.moengage.cards.ui.compose.MoECardsScreen

setContent {
    ApplicationTheme {
        Scaffold(topBar = { ApplicationToolbar() }) { paddingValues ->
            Box(modifier = Modifier.padding(paddingValues)) {
                MoECardsScreen(appId = "YOUR_WORKSPACE_ID")
            }
        }
    }
}

import com.moengage.cards.ui.compose.MoECardsList

MoECardsList(category = "Offers", appId = "YOUR_WORKSPACE_ID")

import com.moengage.cards.ui.compose.theme.MoECardColorsLight
import com.moengage.cards.ui.compose.theme.MoECardDefaultTextStyles
import com.moengage.cards.ui.compose.theme.MoECardsThemeSpec
import com.moengage.cards.ui.compose.MoECardsComposeUiHelper

val colors = MoECardColorsLight.copy(
    background = Color(0xFFFFF3E0),
    header = Color(0xFFBF360C),
    cta = Color(0xFF00695C)
)

val textStyles = MoECardDefaultTextStyles.copy(
    header = MoECardDefaultTextStyles.header.copy(fontSize = 20.sp)
)

MoECardsComposeUiHelper.setTheme(
    MoECardsThemeSpec(colors = colors, textStyles = textStyles),
    "YOUR_WORKSPACE_ID"
)

import com.moengage.cards.ui.compose.MoECardsComposeUiHelper

MoECardsComposeUiHelper.setTheme(null, "YOUR_WORKSPACE_ID")

<resources>
    <!-- Toolbar title in MoECardComposeActivity, and the activity label. Default: Inbox -->
    <string name="moe_card_feed_title">Notifications</string>

    <!-- Button shown when new cards arrive while the feed is open. Default: New Updates -->
    <string name="moe_card_new_updates">New messages</string>

    <!-- Empty state. Default: No notifications to show, check again later. -->
    <string name="moe_card_no_message_available">You are all caught up.</string>

    <!-- Delete option on long press. Default: Delete -->
    <string name="moe_card_delete_title">Remove</string>
</resources>

import com.moengage.cards.ui.compose.MoECardsComposeUiHelper

MoECardsComposeUiHelper.setCardContent({ card, onClick ->
    Column(modifier = Modifier.clickable { onClick() }) {
        Text(card.headerText)
        card.messageText?.let { Text(it) }
    }
}, "YOUR_WORKSPACE_ID")

import com.moengage.cards.ui.compose.MoECardsComposeUiHelper

MoECardsComposeUiHelper.setClickListener({ clickData ->
    // clickData.card holds the card that was tapped.
    // clickData.navigationAction holds the configured action.
    false
}, "YOUR_WORKSPACE_ID")

dependencies {
    implementation("io.coil-kt.coil3:coil-compose:3.5.0")
    implementation("io.coil-kt.coil3:coil-network-okhttp:3.5.0")
    implementation("io.coil-kt.coil3:coil-gif:3.5.0") // Required for animated GIFs.
}

dependencies {
    implementation("com.github.bumptech.glide:glide:5.0.7")
}

import com.moengage.cards.core.MoECardHelper

// Call this API on worker thread as it reads from a file.
MoECardHelper.getUnClickedCardCount(context)
// This API returns the count asynchronously in the listener passed as a parameter.
MoECardHelper.getUnClickedCardCountAsync(context, listener)

import com.moengage.cards.core.MoECardHelper

// Call this API on worker thread as it reads from a file.
MoECardHelper.getNewCardCount(context)
// This API returns the count asynchronously in the listener passed as a parameter.
MoECardHelper.getNewCardCountAsync(context, listener)