Customizing Content Card Templates style

This tutorial explains how to customize the UI of content cards in your application.

Overview

The Messaging extension provides a way to customize content cards by using Compose modifiers in conjunction with additional parameters provided when creating a style object. Refer to each individual style class to see the customizable settings available for each style.

Setting custom style parameters when creating a `SmallImageUIStyle`

Perform the following steps to customize content card templates:

Create a style object with a Modifier passing in any additional customizations as part of the constructor parameters. If customizing an AepButtonStyle, for example, you may pass customizations such as the enabled state, elevation, shape, border, color, and padding alongside the Modifier.
Use the created style object when invoking the builder of the template style object (e.g. SmallImageUIStyle)

Below is an example implementation:

Kotlin

// create a custom style for the small image card in row
val smallImageCardStyleRow = SmallImageUIStyle.Builder()
    .cardStyle(AepCardStyle(modifier = Modifier.width(400.dp).height(200.dp)))
  .rootRowStyle(AepRowStyle(modifier = Modifier.fillMaxSize()))
    .imageStyle(AepImageStyle(modifier = Modifier.width(100.dp).height(100.dp)))
    .buttonRowStyle(AepRowStyle(modifier = Modifier.fillMaxSize()))
    .buttonStyle(
    arrayOf(
      Pair(
      AepButtonStyle(modifier = Modifier.padding(8.dp)),
      AepTextStyle(textStyle = TextStyle(color = Color.Green, fontSize = 16.sp)))))
    .dismissButtonStyle(AepIconStyle(modifier = Modifier.padding(8.dp)))
  .dismissButtonAlignment(Alignment.TopEnd)
    .textColumnStyle(AepColumnStyle(modifier = Modifier.fillMaxSize()))
    .bodyAepTextStyle(AepTextStyle(textStyle = TextStyle(Color.Yellow)))
    .titleAepTextStyle(AepTextStyle(textStyle = TextStyle(Color.Green)))
    .build()

// Create row with composables from AepUI instances
LazyRow {
  items(reorderedAepUIList) { aepUI ->                   
    when (aepUI) {
      is SmallImageUI -> {
        val state = aepUI.getState()
        if (!state.dismissed) 
        {
          SmallImageCard(ui = aepUI, 
                         style = smallImageCardStyleRow, // setting the custom style here
                         observer = ContentCardEventObserver(contentCardCallback))
        }
      }
    }
  }
}
Copied to your clipboard
// create a custom style for the small image card in row
val smallImageCardStyleRow = SmallImageUIStyle.Builder()
    .cardStyle(AepCardStyle(modifier = Modifier.width(400.dp).height(200.dp)))
  .rootRowStyle(AepRowStyle(modifier = Modifier.fillMaxSize()))
    .imageStyle(AepImageStyle(modifier = Modifier.width(100.dp).height(100.dp)))
    .buttonRowStyle(AepRowStyle(modifier = Modifier.fillMaxSize()))
    .buttonStyle(
    arrayOf(
      Pair(
      AepButtonStyle(modifier = Modifier.padding(8.dp)),
      AepTextStyle(textStyle = TextStyle(color = Color.Green, fontSize = 16.sp)))))
    .dismissButtonStyle(AepIconStyle(modifier = Modifier.padding(8.dp)))
  .dismissButtonAlignment(Alignment.TopEnd)
    .textColumnStyle(AepColumnStyle(modifier = Modifier.fillMaxSize()))
    .bodyAepTextStyle(AepTextStyle(textStyle = TextStyle(Color.Yellow)))
    .titleAepTextStyle(AepTextStyle(textStyle = TextStyle(Color.Green)))
    .build()

// Create row with composables from AepUI instances
LazyRow {
  items(reorderedAepUIList) { aepUI ->                   
    when (aepUI) {
      is SmallImageUI -> {
        val state = aepUI.getState()
        if (!state.dismissed) 
        {
          SmallImageCard(ui = aepUI, 
                         style = smallImageCardStyleRow, // setting the custom style here
                         observer = ContentCardEventObserver(contentCardCallback))
        }
      }
    }
  }
}

Fetch and Display Content Cards

Listening to Content Card Events

Last updated 1/22/2025

Was this helpful?

Yes

Customizing Content Card Templates style

Overview.css-83mclq{margin-left:var(--spectrum-global-dimension-size-100);}

Overview