CardKt

Added in 1.3.0-alpha05

public final class CardKt

Summary

Public methods
static final @NonNull LayoutElementBuilders.LayoutElement

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

Public methods

card

public static final @NonNull LayoutElementBuilders.LayoutElement card(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull TypeBuilders.StringProp contentDescription,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    ColorBuilders.ColorProp backgroundColor,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> background,
    @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.prop
import androidx.wear.protolayout.material3.text

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

Associated Clickable for click events. When the card is clicked it will fire the associated action.
@NonNull TypeBuilders.StringProp contentDescription

The content description to be read by Talkback.
@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
@NonNull ModifiersBuilders.Corner shape

Defines the card's shape, in other words the corner radius for this card.
ColorBuilders.ColorProp backgroundColor

The color to be used as a background of this card. If the background image is also specified, it will be laid out on top of this color.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> background

The background object to be used behind the content in the card. It is recommended the default styling that is automatically provided by only calling backgroundImage with the content. It can be combined with the specified backgroundColor 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.