CardKt

Added in 1.3.0-alpha06

public final class CardKt

Summary

Public methods
static final @NonNull LayoutElementBuilders.LayoutElement
appCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> avatar,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> label,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> time,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull AppCardStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 app card that offers up to 5 slots, usually text based.
static final @NonNull LayoutElementBuilders.LayoutElement

ProtoLayout Material3 clickable component card that offers a single slot to take any content.
static final @NonNull LayoutElementBuilders.LayoutElement
graphicDataCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> graphic,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @NonNull GraphicDataCardStyle style,
    int horizontalAlignment,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 graphic data card that offers a slot for graphic data such as progress indicator and up to 2 vertically stacked slots, usually for textual description.
static final @NonNull LayoutElementBuilders.LayoutElement
iconDataCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryIcon,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull DataCardStyle style,
    @NonNull TitleContentPlacementInDataCard titleContentPlacement,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 data card that offers up to 3 vertically stacked slots, usually text or numeral based, with icon.
static final @NonNull LayoutElementBuilders.LayoutElement
textDataCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryText,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull DataCardStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 data card that offers up to 3 vertically stacked slots, usually text or numeral based.
static final @NonNull LayoutElementBuilders.LayoutElement
titleCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> time,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull TitleCardStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding,
    int horizontalAlignment
)

Opinionated ProtoLayout Material3 title card that offers 1 to 3 slots, usually text based.

Public methods

appCard

public static final @NonNull LayoutElementBuilders.LayoutElement appCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> avatar,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> label,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> time,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull AppCardStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 app card that offers up to 5 slots, usually text based.

Those are vertically stacked title and content, and additional side slot for a time.

The first row of the card has three slots:

  1. a small optional image, such as avatarImage

  2. label, which is expected to be a short text

  3. time, end aligned.

The second row shows a title, this is expected to be a single row of start aligned text.

The rest of the appCard contains the content which should be text.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.AppCardStyle
import androidx.wear.protolayout.material3.CardDefaults.filledTonalCardColors
import androidx.wear.protolayout.material3.appCard
import androidx.wear.protolayout.material3.card
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                appCard(
                    onClick = clickable,
                    modifier = LayoutModifier.contentDescription("App Card"),
                    height = expand(),
                    colors = filledTonalCardColors(),
                    style = AppCardStyle.largeAppCardStyle(),
                    title = { text("This is title of the app card".layoutString) },
                    time = { text("NOW".layoutString) },
                    label = { text("Label".layoutString) },
                    content = { text("Content of the Card!".layoutString) },
                )
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the card is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title

A slot for displaying the title of the card, expected to be one line of text. Uses CardColors.title color by default.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content

The optional body content of the card. Uses CardColors.content color by default.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> avatar

An optional slot in header for displaying small image, such as avatarImage.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> label

An optional slot in header for displaying short, label text. Uses CardColors.label color by default.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> time

An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Uses CardColors.time color by default.
@NonNull DimensionBuilders.ContainerDimension height

The height of this card. It's highly recommended to leave this with default value as wrap if there's only 1 card on the screen. If there are two cards, it is highly recommended to set this to expand and use the smaller styles.
@NonNull ModifiersBuilders.Corner shape

Defines the card's shape, in other words the corner radius for this card.
@NonNull CardColors colors

The colors to be used for a background and inner content of this card. If the background image is also specified, the image will be laid out on top of the background color. In case of the fully opaque background image, then the background color will not be shown. Specified colors can be CardDefaults.filledCardColors for high emphasis card, CardDefaults.filledVariantCardColors for high/medium emphasis card, CardDefaults.filledTonalCardColors for low/medium emphasis card, CardDefaults.imageBackgroundCardColors for card with image as a background or custom built CardColors.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent

The background object to be used behind the content in the card. It is recommended to use the default styling that is automatically provided by only calling backgroundImage with the content. It can be combined with the specified colors's background color behind it.
@NonNull AppCardStyle style

The style which provides the attribute values required for constructing this title card and its inner content. It also provides default style for the inner content, that can be overridden by each content slot.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the card's edge. It's highly recommended to keep the default.

card

public static final @NonNull LayoutElementBuilders.LayoutElement card(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull LayoutModifier modifier,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull ModifiersBuilders.Padding contentPadding,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content
)

ProtoLayout Material3 clickable component card that offers a single slot to take any content.

It can be used as the container for more opinionated Card components that take specific content such as icons, images, primary label, secondary label, etc.

The Card is Rectangle shaped with some rounded corners by default. It is highly recommended to set its width and height to fill the available space, by expand or weight for optimal experience across different screen sizes.

It can be used for displaying any clickable container with additional data, text or graphics.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.backgroundImage
import androidx.wear.protolayout.material3.card
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                card(
                    onClick = clickable,
                    modifier =
                        LayoutModifier.contentDescription("Card with image background")
                            .clickable(id = "card"),
                    width = expand(),
                    height = expand(),
                    backgroundContent = { backgroundImage(protoLayoutResourceId = "id") }
                ) {
                    text("Content of the Card!".layoutString)
                }
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the card is clicked it will fire the associated action.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription. If LayoutModifier.background modifier is used and the the background image is also specified, the image will be laid out on top of this color. In case of the fully opaque background image, then the background color will not be shown.
@NonNull DimensionBuilders.ContainerDimension width

The width of this card. It's highly recommended to set this to expand or weight
@NonNull DimensionBuilders.ContainerDimension height

The height of this card. It's highly recommended to set this to expand or weight
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent

The background object to be used behind the content in the card. It is recommended to use the default styling that is automatically provided by only calling backgroundImage with the content. It can be combined with the specified LayoutModifier.background behind it.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the card's edge. It's highly recommended to keep the default.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content

The inner content to be put inside of this card.

graphicDataCard

public static final @NonNull LayoutElementBuilders.LayoutElement graphicDataCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> graphic,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @NonNull GraphicDataCardStyle style,
    int horizontalAlignment,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 graphic data card that offers a slot for graphic data such as progress indicator and up to 2 vertically stacked slots, usually for textual description.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.CardDefaults.filledVariantCardColors
import androidx.wear.protolayout.material3.GraphicDataCardStyle.Companion.largeGraphicDataCardStyle
import androidx.wear.protolayout.material3.graphicDataCard
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                graphicDataCard(
                    onClick = clickable,
                    modifier = LayoutModifier.contentDescription("Data Card with graphic"),
                    height = expand(),
                    colors = filledVariantCardColors(),
                    style = largeGraphicDataCardStyle(),
                    title = { text("1,234".layoutString) },
                    content = { icon("steps") },
                    // TODO: b/368272767 - Use CPI here
                    graphic = { text("Run".layoutString) },
                )
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the card is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> graphic

A slot for displaying graphic data, such as progress indicator.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title

A slot for displaying the title of the card, expected to be one line of text. Uses CardColors.title color by default.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content

The optional body content of the card. Uses CardColors.content color by default.
@NonNull DimensionBuilders.ContainerDimension height

The width of this card. It's highly recommended to set this to expand for the most optimal experience across different screen sizes.
@NonNull ModifiersBuilders.Corner shape

Defines the card's shape, in other words the corner radius for this card.
@NonNull CardColors colors

The colors to be used for a background and inner content of this card. Specified colors can be CardDefaults.filledCardColors for high emphasis card, CardDefaults.filledVariantCardColors for high/medium emphasis card, CardDefaults.filledTonalCardColors for low/medium emphasis card, CardDefaults.imageBackgroundCardColors for card with image as a background or custom built CardColors.
@NonNull GraphicDataCardStyle style

The style which provides the attribute values required for constructing this data card and its inner content. It also provides default style for the inner content, that can be overridden by each content slot. It is highly recommended to use one of GraphicDataCardStyle.defaultGraphicDataCardStyle or GraphicDataCardStyle.largeGraphicDataCardStyle.
int horizontalAlignment

The horizontal placement of the graphic content. This can be either HORIZONTAL_ALIGN_START (when graphic is on the start side), or HORIZONTAL_ALIGN_END (when it is on the end side).
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the card's edge. It's highly recommended to keep the default.

iconDataCard

public static final @NonNull LayoutElementBuilders.LayoutElement iconDataCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryIcon,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull DataCardStyle style,
    @NonNull TitleContentPlacementInDataCard titleContentPlacement,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 data card that offers up to 3 vertically stacked slots, usually text or numeral based, with icon.

Slots can have multiple placements, depending on their presence and titleContentPlacement:

This card works well in buttonGroup with cards width and height set to expand.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.DimensionBuilders.weight
import androidx.wear.protolayout.material3.CardDefaults.filledTonalCardColors
import androidx.wear.protolayout.material3.CardDefaults.filledVariantCardColors
import androidx.wear.protolayout.material3.DataCardStyle.Companion.extraLargeDataCardStyle
import androidx.wear.protolayout.material3.DataCardStyle.Companion.largeCompactDataCardStyle
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.buttonGroup
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconDataCard
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textDataCard
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                buttonGroup {
                    buttonGroupItem {
                        textDataCard(
                            onClick = clickable,
                            modifier = LayoutModifier.contentDescription("Data Card with text"),
                            width = weight(1f),
                            height = expand(),
                            colors = filledTonalCardColors(),
                            style = extraLargeDataCardStyle(),
                            title = { this.text("1km".layoutString) },
                            content = { this.text("Run".layoutString) },
                            secondaryText = { this.text("Nice!".layoutString) }
                        )
                    }
                    buttonGroupItem {
                        iconDataCard(
                            onClick = clickable,
                            modifier = LayoutModifier.contentDescription("Data Card with icon"),
                            width = weight(1f),
                            height = expand(),
                            colors = filledTonalCardColors(),
                            style = extraLargeDataCardStyle(),
                            title = { this.text("2km".layoutString) },
                            secondaryIcon = { icon("id") },
                            content = { this.text("Run".layoutString) },
                        )
                    }
                    buttonGroupItem {
                        textDataCard(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Compact Data Card without icon or secondary label"
                                ),
                            width = weight(3f),
                            height = expand(),
                            colors = filledVariantCardColors(),
                            style = largeCompactDataCardStyle(),
                            title = { this.text("10:30".layoutString) },
                            content = { this.text("PM".layoutString) },
                        )
                    }
                }
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the card is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title

A slot for displaying the title of the card, expected to be one line of text. Uses CardColors.title color by default.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content

The optional body content of the card. Uses CardColors.content color by default.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryIcon

An optional slot for displaying small icon, such as secondaryIcon. Uses CardColors.secondaryIcon tint color by default.
@NonNull DimensionBuilders.ContainerDimension width

The width of this card. It's highly recommended to set this to expand or weight for the most optimal experience across different screen sizes.
@NonNull DimensionBuilders.ContainerDimension height

The height of this card. It's highly recommended to set this to expand for the most optimal experience across different screen sizes.
@NonNull ModifiersBuilders.Corner shape

Defines the card's shape, in other words the corner radius for this card.
@NonNull CardColors colors

The colors to be used for a background and inner content of this card. If the background image is also specified, the image will be laid out on top of the background color. In case of the fully opaque background image, then the background color will not be shown. Specified colors can be CardDefaults.filledCardColors for high emphasis card, CardDefaults.filledVariantCardColors for high/medium emphasis card, CardDefaults.filledTonalCardColors for low/medium emphasis card, CardDefaults.imageBackgroundCardColors for card with image as a background or custom built CardColors.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent

The background object to be used behind the content in the card. It is recommended to use the default styling that is automatically provided by only calling backgroundImage with the content. It can be combined with the specified colors's background color behind it.
@NonNull DataCardStyle style

The style which provides the attribute values required for constructing this data card and its inner content. It also provides default style for the inner content, that can be overridden by each content slot. It is highly recommended to use one of DataCardStyle.smallDataCardStyle, DataCardStyle.defaultDataCardStyle, DataCardStyle.largeDataCardStyle or DataCardStyle.extraLargeDataCardStyle styles when secondaryIconis present. If it's not present, it's highly recommended to use DataCardStyle.smallCompactDataCardStyle, DataCardStyle.defaultCompactDataCardStyle or DataCardStyle.largeCompactDataCardStyle.
@NonNull TitleContentPlacementInDataCard titleContentPlacement

The placement of the title and content slots, relative to the given secondaryIcon.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the card's edge. It's highly recommended to keep the default.

textDataCard

public static final @NonNull LayoutElementBuilders.LayoutElement textDataCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryText,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull DataCardStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 data card that offers up to 3 vertically stacked slots, usually text or numeral based.

This card works well in buttonGroup with cards width and height is set to expand.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.DimensionBuilders.weight
import androidx.wear.protolayout.material3.CardDefaults.filledTonalCardColors
import androidx.wear.protolayout.material3.CardDefaults.filledVariantCardColors
import androidx.wear.protolayout.material3.DataCardStyle.Companion.extraLargeDataCardStyle
import androidx.wear.protolayout.material3.DataCardStyle.Companion.largeCompactDataCardStyle
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.buttonGroup
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconDataCard
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textDataCard
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                buttonGroup {
                    buttonGroupItem {
                        textDataCard(
                            onClick = clickable,
                            modifier = LayoutModifier.contentDescription("Data Card with text"),
                            width = weight(1f),
                            height = expand(),
                            colors = filledTonalCardColors(),
                            style = extraLargeDataCardStyle(),
                            title = { this.text("1km".layoutString) },
                            content = { this.text("Run".layoutString) },
                            secondaryText = { this.text("Nice!".layoutString) }
                        )
                    }
                    buttonGroupItem {
                        iconDataCard(
                            onClick = clickable,
                            modifier = LayoutModifier.contentDescription("Data Card with icon"),
                            width = weight(1f),
                            height = expand(),
                            colors = filledTonalCardColors(),
                            style = extraLargeDataCardStyle(),
                            title = { this.text("2km".layoutString) },
                            secondaryIcon = { icon("id") },
                            content = { this.text("Run".layoutString) },
                        )
                    }
                    buttonGroupItem {
                        textDataCard(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Compact Data Card without icon or secondary label"
                                ),
                            width = weight(3f),
                            height = expand(),
                            colors = filledVariantCardColors(),
                            style = largeCompactDataCardStyle(),
                            title = { this.text("10:30".layoutString) },
                            content = { this.text("PM".layoutString) },
                        )
                    }
                }
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the card is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title

A slot for displaying the title of the card, expected to be one line of text. Uses CardColors.title color by default.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content

The optional body content of the card. Uses CardColors.content color by default.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryText

An optional slot for displaying short, secondary text. Uses CardColors.secondaryText color by default.
@NonNull DimensionBuilders.ContainerDimension width

The width of this card. It's highly recommended to set this to expand or weight for the most optimal experience across different screen sizes.
@NonNull DimensionBuilders.ContainerDimension height

The height of this card. It's highly recommended to set this to expand for the most optimal experience across different screen sizes.
@NonNull ModifiersBuilders.Corner shape

Defines the card's shape, in other words the corner radius for this card.
@NonNull CardColors colors

The colors to be used for a background and inner content of this card. If the background image is also specified, the image will be laid out on top of the background color. In case of the fully opaque background image, then the background color will not be shown. Specified colors can be CardDefaults.filledCardColors for high emphasis card, CardDefaults.filledVariantCardColors for high/medium emphasis card, CardDefaults.filledTonalCardColors for low/medium emphasis card, CardDefaults.imageBackgroundCardColors for card with image as a background or custom built CardColors.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent

The background object to be used behind the content in the card. It is recommended to use the default styling that is automatically provided by only calling backgroundImage with the content. It can be combined with the specified colors's background color behind it.
@NonNull DataCardStyle style

The style which provides the attribute values required for constructing this data card and its inner content. It also provides default style for the inner content, that can be overridden by each content slot. It is highly recommended to use one of DataCardStyle.smallDataCardStyle, DataCardStyle.defaultDataCardStyle, DataCardStyle.largeDataCardStyle or DataCardStyle.extraLargeDataCardStyle styles when either icon or secondaryText are present. If they are not present, it's highly recommended to use DataCardStyle.smallCompactDataCardStyle, DataCardStyle.defaultCompactDataCardStyle or DataCardStyle.largeCompactDataCardStyle.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the card's edge. It's highly recommended to keep the default.

titleCard

public static final @NonNull LayoutElementBuilders.LayoutElement titleCard(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> time,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull CardColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull TitleCardStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding,
    int horizontalAlignment
)

Opinionated ProtoLayout Material3 title card that offers 1 to 3 slots, usually text based.

Those are vertically stacked title and content, and additional side slot for a time.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.CardDefaults.filledVariantCardColors
import androidx.wear.protolayout.material3.TitleCardStyle.Companion.largeTitleCardStyle
import androidx.wear.protolayout.material3.card
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.titleCard
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                titleCard(
                    onClick = clickable,
                    modifier = LayoutModifier.contentDescription("Title Card"),
                    height = expand(),
                    colors = filledVariantCardColors(),
                    style = largeTitleCardStyle(),
                    title = { text("This is title of the title card".layoutString) },
                    time = { text("NOW".layoutString) },
                    content = { text("Content of the Card!".layoutString) }
                )
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the card is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> title

A slot for displaying the title of the card, expected to be one or two lines of text. Uses CardColors.title color by default.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content

The optional body content of the card. Uses CardColors.content color by default.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> time

An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Uses CardColors.time color by default.
@NonNull DimensionBuilders.ContainerDimension height

The height of this card. It's highly recommended to set this to expand or weight
@NonNull ModifiersBuilders.Corner shape

Defines the card's shape, in other words the corner radius for this card.
@NonNull CardColors colors

The colors to be used for a background and inner content of this card. If the background image is also specified, the image will be laid out on top of the background color. In case of the fully opaque background image, then the background color will not be shown. Specified colors can be CardDefaults.filledCardColors for high emphasis card, CardDefaults.filledVariantCardColors for high/medium emphasis card, CardDefaults.filledTonalCardColors for low/medium emphasis card, CardDefaults.imageBackgroundCardColors for card with image as a background or custom built CardColors.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent

The background object to be used behind the content in the card. It is recommended to use the default styling that is automatically provided by only calling backgroundImage with the content. It can be combined with the specified colors's background color behind it.
@NonNull TitleCardStyle style

The style which provides the attribute values required for constructing this title card and its inner content. It also provides default style for the inner content, that can be overridden by each content slot.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the card's edge. It's highly recommended to keep the default.
int horizontalAlignment

The horizontal alignment of title and content. Default to centered when time is not present. When time is present, defaults to start aligned, which is highly recommended.