Skip to content

Content Cards with Jetpack Compose

This reference article covers the Content Card integration using Jetpack Compose for your Android or FireOS application.

In Android, you can add the Content Card feed to your Compose application using ContentCardsList(). For example:

1
2
3

setContent {
    ContentCardsList()
}

Styling Content Cards

You can apply styling in one of two ways. The first is to pass a ContentCardListStyling and ContentCardStyling to ContentCardsList(), like in the following example:

1
2
3
4
5
6
7
8
9
10
11
12
13

ContentCardsList(
    style = ContentCardListStyling(listBackgroundColor = Color.Red),
    cardStyle = ContentCardStyling(
        titleTextStyle = TextStyle(
            fontFamily = fontFamily,
            fontSize = 25.sp
        ),
        shadowRadius = 10.dp,
        shortNewsContentCardStyle = BrazeShortNewsContentCardStyling(
            shadowRadius = 15.dp
        )
    )
)

The second is to use BrazeStyle to create a global styling for Braze components, like in the following example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

BrazeStyle(
    contentCardStyle = ContentCardStyling(
        textAnnouncementContentCardStyle = BrazeTextAnnouncementContentCardStyling(
            cardBackgroundColor = Color.Red,
            descriptionTextStyle = TextStyle(
                fontFamily = fontFamily,
                fontSize = 25.sp,
            )
        ),
        titleTextColor = Color.Magenta
    )
) {
    // Your app here, including any ContentCardsList() in it
}

Further customization

Handling card clicks

To handle card clicks, pass in a function that takes a Card and returns a Boolean to onCardClicked. If true is returned, Braze will not process anything on the click besides logging it for analytics. If false is returned, Braze will handle the the click.

1
2
3
4
5
6
7
8
9
10
11

ContentCardsList(
    onCardClicked = { card ->
        if (card.extras.containsKey("mySpecialKey")) {
            // handle the click here
            true
        } else {
            // Let Braze handle the click
            false
        }
    }
)

Enabling notifications for dismissals

To be notified when a card is dismissed, pass a function to the onCardDismissed function.

1
2
3
4
5

ContentCardsList(
    onCardDismissed = { card ->
        // Do what you need with the card
    }
)
  Edit this page on GitHub
HOW HELPFUL WAS THIS PAGE?
New Stuff!