MaterialScope

Artifact: androidx.wear.protolayout:protolayout-material3

Kotlin |Java

@MaterialScopeMarker
public class MaterialScope

Receiver scope which is used by all ProtoLayout Material3 components and layout to support opinionated defaults and to provide the global information for styling Material3 components.

The MaterialScope includes:

theme, which is used to retrieve the color, typography or shape values.
DeviceParameters, which contains screen size, font scale, renderer schema version etc.
Default usage of system theme, with the option to opt out.

Summary

Public methods
`final @NonNull ColorScheme`	`getColorScheme()` Color Scheme used within this scope and its components.
`final @NonNull DeviceParametersBuilders.DeviceParameters`	`getDeviceConfiguration()` The device parameters for where the components will be rendered.
`final @NonNull Shapes`	`getShapes()` Shapes theme used within this scope and its components.

Public methods

getColorScheme

Added in 1.3.0-alpha06

public final @NonNull ColorScheme getColorScheme()

Color Scheme used within this scope and its components.

getDeviceConfiguration

Added in 1.3.0-alpha06

public final @NonNull DeviceParametersBuilders.DeviceParameters getDeviceConfiguration()

The device parameters for where the components will be rendered.

getShapes

Added in 1.3.0-alpha06

public final @NonNull Shapes getShapes()

Shapes theme used within this scope and its components.

Extension functions

ButtonGroupKt.buttonGroup

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement ButtonGroupKt.buttonGroup(
    @NonNull MaterialScope receiver,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @Dimension(unit = 0) float spacing,
    @ExtensionFunctionType @NonNull Function1<@NonNull ButtonGroupScope, Unit> content
)

ProtoLayout Material3 component-layout that places its children in a horizontal sequence.

These behave as a group which fill the available space to maximize on screen real estate. The color and size of the child elements should be changed in order to create hierarchy and priority.

The width and height of the Button/Card should be flexible (set to androidx.wear.protolayout.DimensionBuilders.expand or androidx.wear.protolayout.DimensionBuilders.weight) and their proportion should be either equal or weight based. However the buttonGroup displays correctly too if the sizes of elements provided are set to a fixed width/height, although it can lead to more empty space on large screen sizes.

A buttonGroup with more than one row can be created by using multiple buttonGroup and Spacers inside a androidx.wear.protolayout.LayoutElementBuilders.Column:

Column.Builder()
  .setWidth(expand())
  .setHeight(expand())
  .addContent(buttonGroup {...})
  .addContent(DEFAULT_SPACER_BETWEEN_BUTTON_GROUPS)
  .addContent(buttonGroup {...})
  .build()
}

Note that, having more than 2 rows in a Column could lead to too small height of elements that aren't in line with minimum tap target.

Parameters
`@NonNull DimensionBuilders.ContainerDimension width`	The width of this button group
`@NonNull DimensionBuilders.ContainerDimension height`	The height of this button group
`@Dimension(unit = 0) float spacing`	The amount of spacing between buttons
`@ExtensionFunctionType @NonNull Function1<@NonNull ButtonGroupScope, Unit> content`	The content for each child. The UX guidance is to use no more than 3 elements within a this button group.

ButtonKt.button

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

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

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

The button is usually stadium or circle shaped with fully 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, and use buttonGroup to arrange them.

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

This button can also be used to create image button that only has a background image and no inner content, see androidx.wear.protolayout.material3.samples.imageButtonSample

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.button
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.backgroundColor
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                button(
                    onClick = clickable,
                    modifier =
                        LayoutModifier.contentDescription("Big button with image background")
                            .backgroundColor(colorScheme.primary),
                    width = expand(),
                    height = expand(),
                    content = { text("Button!".layoutString) }
                )
            }
        )
    }

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.backgroundImage
import androidx.wear.protolayout.material3.button
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

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                button(
                    onClick = clickable,
                    modifier =
                        LayoutModifier.contentDescription("Big button with image background"),
                    width = expand(),
                    height = expand(),
                    backgroundContent = { backgroundImage(protoLayoutResourceId = "id") }
                )
            }
        )
    }

Parameters
`@NonNull ModifiersBuilders.Clickable onClick`	Associated `Clickable` for click events. When the button 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.
`@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content`	The inner content to be put inside of this button.
`@NonNull DimensionBuilders.ContainerDimension width`	The width of this button. It's highly recommended to set this to `expand` or `weight`
`@NonNull DimensionBuilders.ContainerDimension height`	The height of this button. 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 button. 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 button's edge. It's highly recommended to keep the default.

ButtonKt.iconButton

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement ButtonKt.iconButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent,
    @NonNull LayoutModifier modifier,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull IconButtonStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 icon button that offers a single slot to take content representing icon, for example icon.

The button is usually either a circular shape with the same width and height, or highly recommended stadium shape occupying available space with width and height set to expand or weight, usually used in the buttonGroup to arrange them

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.buttonGroup
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconButton
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textButton
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 {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            iconContent = { icon("id1") }
                        )
                    }
                    buttonGroupItem {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            iconContent = { icon("id2") }
                        )
                    }
                    buttonGroupItem {
                        textButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            labelContent = { text("Dec".layoutString) }
                        )
                    }
                }
            }
        )
    }

Parameters
`@NonNull ModifiersBuilders.Clickable onClick`	Associated `Clickable` for click events. When the button is clicked it will fire the associated action.
`@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent`	The icon slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling `icon` with the resource ID.
`@NonNull LayoutModifier modifier`	Modifiers to set to this element. It's highly recommended to set a content description using `contentDescription`.
`@NonNull DimensionBuilders.ContainerDimension width`	The width of this button. It's highly recommended to set this to `expand` or `weight`
`@NonNull DimensionBuilders.ContainerDimension height`	The height of this button. It's highly recommended to set this to `expand` or `weight`
`@NonNull ModifiersBuilders.Corner shape`	Defines the button's shape, in other words the corner radius for this button.
`@NonNull ButtonColors colors`	The colors used for this button. If not set, `ButtonDefaults.filledButtonColors` will be used as high emphasis button. Other recommended colors are `ButtonDefaults.filledTonalButtonColors` and `ButtonDefaults.filledVariantButtonColors`. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast.
`@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent`	The background object to be used behind the content in the button. 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 `ButtonColors.container` behind it.
`@NonNull IconButtonStyle style`	The style which provides the attribute values required for constructing this icon button 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 button's edge. It's highly recommended to keep the default.

ButtonKt.textButton

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement ButtonKt.textButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent,
    @NonNull LayoutModifier modifier,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull TextButtonStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 text button that offers a single slot to take content representing short text, for example text.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.buttonGroup
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconButton
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textButton
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 {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            iconContent = { icon("id1") }
                        )
                    }
                    buttonGroupItem {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            iconContent = { icon("id2") }
                        )
                    }
                    buttonGroupItem {
                        textButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            labelContent = { text("Dec".layoutString) }
                        )
                    }
                }
            }
        )
    }

Parameters
`@NonNull ModifiersBuilders.Clickable onClick`	Associated `Clickable` for click events. When the button is clicked it will fire the associated action.
`@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent`	The text slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling `text` with the resource ID. This should be small, usually up to 3 characters text.
`@NonNull LayoutModifier modifier`	Modifiers to set to this element. It's highly recommended to set a content description using `contentDescription`.
`@NonNull DimensionBuilders.ContainerDimension width`	The width of this button. It's highly recommended to set this to `expand` or `weight`
`@NonNull DimensionBuilders.ContainerDimension height`	The height of this button. It's highly recommended to set this to `expand` or `weight`
`@NonNull ModifiersBuilders.Corner shape`	Defines the button's shape, in other words the corner radius for this button.
`@NonNull ButtonColors colors`	The colors used for this button. If not set, `ButtonDefaults.filledButtonColors` will be used as high emphasis button. Other recommended colors are `ButtonDefaults.filledTonalButtonColors` and `ButtonDefaults.filledVariantButtonColors`. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast.
`@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent`	The background object to be used behind the content in the button. 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 `ButtonColors.container` behind it.
`@NonNull TextButtonStyle style`	The style which provides the attribute values required for constructing this icon button 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 button's edge. It's highly recommended to keep the default.

CardKt.appCard

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement CardKt.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:

a small optional image, such as avatarImage
label, which is expected to be a short text
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.

CardKt.card

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement CardKt.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.

CardKt.graphicDataCard

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement CardKt.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.

CardKt.iconDataCard

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement CardKt.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:

If secondaryIcon are set, it will be placed first when titleContentPlacement is set to TitleContentPlacementInDataCard.Bottom, or last if titleContentPlacement is set to TitleContentPlacementInDataCard.Top.
If secondaryIcon is not set, this textDataCard is considered as compact data card, with title and content only.

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 `secondaryIcon`is 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.

CardKt.textDataCard

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement CardKt.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.

CardKt.titleCard

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement CardKt.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.

CircularProgressIndicatorKt.circularProgressIndicator

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement CircularProgressIndicatorKt.circularProgressIndicator(
    @NonNull MaterialScope receiver,
    float staticProgress,
    DynamicBuilders.DynamicFloat dynamicProgress,
    @NonNull LayoutModifier modifier,
    float startAngleDegrees,
    float endAngleDegrees,
    @Dimension(unit = 0) float strokeWidth,
    @Dimension(unit = 0) float gapSize,
    @NonNull ProgressIndicatorColors colors,
    @NonNull DimensionBuilders.ContainerDimension size
)

Protolayout Material3 design circular progress indicator.

import androidx.wear.protolayout.DimensionBuilders.dp
import androidx.wear.protolayout.expression.DynamicBuilders.DynamicFloat
import androidx.wear.protolayout.material3.CircularProgressIndicatorDefaults
import androidx.wear.protolayout.material3.CircularProgressIndicatorDefaults.filledVariantProgressIndicatorColors
import androidx.wear.protolayout.material3.circularProgressIndicator
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.text

materialScope(context, deviceParameters) {
        circularProgressIndicator(
            dynamicProgress =
                DynamicFloat.animate(
                    0.0F,
                    1.1F,
                    CircularProgressIndicatorDefaults.recommendedAnimationSpec
                ),
            startAngleDegrees = 200F,
            endAngleDegrees = 520F,
            colors = filledVariantProgressIndicatorColors(),
            size = dp(85F)
        )
    }

Parameters
`float staticProgress`	The static progress of this progress indicator where 0 represent no progress and 1 represents completion. Progress above 1 is also allowed. If `dynamicProgress` is also set, this static value will be ignored. By default it equals to 0.
`DynamicBuilders.DynamicFloat dynamicProgress`	The static progress of this progress indicator where 0 represent no progress and 1 represents completion. Progress above 1 is also allowed. If not provided, the `staticProgress` is used.
`@NonNull LayoutModifier modifier`	Modifiers to set to this element. It's highly recommended to set a content description using `contentDescription`.
`float startAngleDegrees`	The starting position of the progress arc, measured clockwise in degrees from the 12 o'clock position.
`float endAngleDegrees`	The ending position of the progress arc, measured clockwise in degrees from 12 o'clock position. Its value must be bigger than `startAngleDegrees`, otherwise an exception would be thrown. By default it equals to 'startAngleDegrees + 360'.
`@Dimension(unit = 0) float strokeWidth`	The stroke width for the progress indicator. The recommended values are `CircularProgressIndicatorDefaults.LARGE_STROKE_WIDTH` and `CircularProgressIndicatorDefaults.SMALL_STROKE_WIDTH`.
`@Dimension(unit = 0) float gapSize`	The size in dp of the gap between the ends of the progress indicator and the track. The stroke end caps are not included in this distance.
`@NonNull ProgressIndicatorColors colors`	`ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator.
`@NonNull DimensionBuilders.ContainerDimension size`	The bounding box size of this progress indicator, applies to both width and height. The indicator arc and track arc are located on the largest circle that can be inscribed inside. It is highly recommended for the progress indicator in a graphics card to have its size as `ExpandedDimensionProp`, which is the default, to fill the available space for the best result across different screen sizes. Setting `size` with a `WrappedDimensionProp` instance will cause failure and throws an `IllegalArgumentException`.

Throws
`kotlin.IllegalArgumentException`	When `size` is set to be `WrappedDimensionProp` instance or the provided `endAngleDegrees` is smaller than the `startAngleDegrees`.

EdgeButtonKt.iconEdgeButton

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement EdgeButtonKt.iconEdgeButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull LayoutModifier modifier,
    @NonNull ButtonColors colors,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent
)

ProtoLayout Material3 component edge button that offers a single slot to take an icon or similar round, small content.

The edge button is intended to be used at the bottom of a round screen. It has a special shape with its bottom almost follows the screen's curvature. It has fixed height, and takes 1 line of text or a single icon. This button represents the most important action on the screen, and it must occupy the whole horizontal space in its position as well as being anchored to the screen bottom.

This component is not intended to be used with an image background.

import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconEdgeButton
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription

materialScope(context, deviceConfiguration) {
        iconEdgeButton(
            onClick = clickable,
            modifier = LayoutModifier.contentDescription("Description of a button")
        ) {
            icon(protoLayoutResourceId = "id")
        }
    }

Parameters
`@NonNull ModifiersBuilders.Clickable onClick`	Associated `Clickable` for click events. When the button 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`.
`@NonNull ButtonColors colors`	The colors used for this button. If not set, `ButtonDefaults.filledButtonColors` will be used as high emphasis button. Other recommended colors are `ButtonDefaults.filledTonalButtonColors` and `ButtonDefaults.filledVariantButtonColors`. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast.
`@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent`	The icon slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling `icon` with the resource ID.

EdgeButtonKt.textEdgeButton

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement EdgeButtonKt.textEdgeButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull LayoutModifier modifier,
    @NonNull ButtonColors colors,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent
)

ProtoLayout Material3 component edge button that offers a single slot to take a text or similar long and wide content.

This component is not intended to be used with an image background.

import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textEdgeButton
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) {
        textEdgeButton(
            onClick = clickable,
            modifier = LayoutModifier.contentDescription("Description of a button")
        ) {
            text("Hello".layoutString)
        }
    }

Parameters
`@NonNull ModifiersBuilders.Clickable onClick`	Associated `Clickable` for click events. When the button 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`.
`@NonNull ButtonColors colors`	The colors used for this button. If not set, `ButtonDefaults.filledButtonColors` will be used as high emphasis button. Other recommended colors are `ButtonDefaults.filledTonalButtonColors` and `ButtonDefaults.filledVariantButtonColors`. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast.
`@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent`	The label slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling `text` with the content.

IconKt.icon

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement IconKt.icon(
    @NonNull MaterialScope receiver,
    @NonNull String protoLayoutResourceId,
    @NonNull DimensionBuilders.ImageDimension size,
    @NonNull LayoutColor tintColor
)

Returns the icon components with the defined style.

Material components provide proper defaults for this icon. In order to take advantage of those, this should be used with the resource ID only: icon("id").

Parameters
`@NonNull String protoLayoutResourceId`	The protolayout resource id of the icon. Node that, this is not an Android resource id.
`@NonNull DimensionBuilders.ImageDimension size`	The side of an icon that will be used for width and height.
`@NonNull LayoutColor tintColor`	The color used to tint the icon.

ImageKt.avatarImage

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement ImageKt.avatarImage(
    @NonNull MaterialScope receiver,
    @NonNull String protoLayoutResourceId,
    @NonNull DimensionBuilders.ImageDimension width,
    @NonNull DimensionBuilders.ImageDimension height,
    @NonNull LayoutModifier modifier,
    int contentScaleMode
)

Returns the avatar image with the defined style.

Material components such as appCard provide proper defaults for the small avatar image. In order to take advantage of those defaults, this should be used with the resource ID only: avatarImage("id").

Parameters
`@NonNull String protoLayoutResourceId`	The protolayout resource id of the image. Node that, this is not an Android resource id.
`@NonNull DimensionBuilders.ImageDimension width`	The width of an image. Usually, a small image that fit into the component's slot.
`@NonNull DimensionBuilders.ImageDimension height`	The height of an image. Usually, a small image that fit into the component's slot.
`@NonNull LayoutModifier modifier`	Modifiers to set to this element.
`int contentScaleMode`	The content scale mode for the image to define how image will adapt to the given size

ImageKt.backgroundImage

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement ImageKt.backgroundImage(
    @NonNull MaterialScope receiver,
    @NonNull String protoLayoutResourceId,
    @NonNull LayoutModifier modifier,
    @NonNull DimensionBuilders.ImageDimension width,
    @NonNull DimensionBuilders.ImageDimension height,
    @NonNull LayoutColor overlayColor,
    @NonNull DimensionBuilders.ContainerDimension overlayWidth,
    @NonNull DimensionBuilders.ContainerDimension overlayHeight,
    int contentScaleMode
)

Returns the image background with the defined style.

Material components provide proper defaults for the background image. In order to take advantage of those defaults, this should be used with the resource ID only: backgroundImage("id").

Parameters
`@NonNull String protoLayoutResourceId`	The protolayout resource id of the image. Node that, this is not an Android resource id.
`@NonNull LayoutModifier modifier`	Modifiers to set to this element.
`@NonNull DimensionBuilders.ImageDimension width`	The width of an image. Usually, this matches the width of the parent component this is used in.
`@NonNull DimensionBuilders.ImageDimension height`	The height of an image. Usually, this matches the height of the parent component this is used in.
`@NonNull LayoutColor overlayColor`	The color used to provide the overlay over the image for better readability. It's recommended to use `ColorScheme.background` color with 60% opacity.
`@NonNull DimensionBuilders.ContainerDimension overlayWidth`	The width of the overlay on top of the image background
`@NonNull DimensionBuilders.ContainerDimension overlayHeight`	The height of the overlay on top of the image background
`int contentScaleMode`	The content scale mode for the image to define how image will adapt to the given size

PrimaryLayoutKt.primaryLayout

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement PrimaryLayoutKt.primaryLayout(
    @NonNull MaterialScope receiver,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> mainSlot,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> titleSlot,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> bottomSlot,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelForBottomSlot,
    ModifiersBuilders.Clickable onClick
)

ProtoLayout Material3 full screen layout that represents a suggested Material3 layout style that is responsive and takes care of the elements placement, together with the recommended margin and padding applied.

This layout is meant to occupy the whole screen, so nothing else should be added on top of it.

On the top, there is an icon that will be automatically placed by the system, followed by the optional title slot. The icon slot needs to be reserved for the whole ProtoLayout Layout and no other content should be added at the top of the screen as it will be overlapped with the system placed icon.

At the bottom, there is an optional fixed slot for either {@link EdgeButton} as a main action or small non tappable content.

The middle of the layout is main content, that will fill the available space. For the best results across different screen sizes, it's recommended that this content's dimension are also DimensionBuilders.expand or DimensionBuilders.weight. Additional content in the main one can be added after a 225dp breakpoint.

import androidx.wear.protolayout.LayoutElementBuilders
import androidx.wear.protolayout.LayoutElementBuilders.LayoutElement
import androidx.wear.protolayout.ModifiersBuilders
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.buttonGroup
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconEdgeButton
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(
            titleSlot = { text("App title".layoutString) },
            mainSlot = {
                buttonGroup {
                    // To be populated with proper components
                    buttonGroupItem {
                        LayoutElementBuilders.Box.Builder()
                            .setModifiers(
                                ModifiersBuilders.Modifiers.Builder()
                                    .setBackground(
                                        ModifiersBuilders.Background.Builder()
                                            .setCorner(shapes.full)
                                            .build()
                                    )
                                    .build()
                            )
                            .build()
                    }
                }
            },
            bottomSlot = {
                iconEdgeButton(
                    onClick = clickable,
                    modifier = LayoutModifier.contentDescription("Description")
                ) {
                    icon("id")
                }
            }
        )
    }

Parameters
`@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> mainSlot`	The main, central content for this layout. It's recommended for this content to fill the available width and height for the best result across different screen size. This layout places proper padding to prevent content from being cropped by the screen. Note that depending on the corner shapes and different elements on the screen, there might be a need to change padding on some of the elements in this slot. The content passed here can also have an additional content value added to it, after `225dp` breakpoint. Some of the examples of content that can be passed in here are: * `buttonGroup` with buttons or cards * two [buttonGroup * Expanded card
`@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> titleSlot`	The app title in the top slot, just below the icon. This should be one line of `text` with `Typography.TITLE_SMALL` typography, describing the main purpose of this layout. Title is an optional slot which can be omitted to make space for other elements. Defaults to `ColorScheme.onBackground` color.
`@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> bottomSlot`	The content for bottom slot in this layout, that will be anchored to the bottom edge of the screen. This should be either a small non tappable content such as Text with optional label for it or tappable main action with `textEdgeButton` or `iconEdgeButton` which is designed to have its bottom following the screen's curvature. This bottom slot is optional, if unset the main content will expand more towards the edge of the screen.
`@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelForBottomSlot`	The label displayed just above the `bottomSlot`. Default will be one line of `text` with `Typography.TITLE_SMALL` typography, `ColorScheme.onSurface` color that should contain additional description of this layout. When the `bottomSlot` is not provided or it an edge button, the given label will be ignored.
`ModifiersBuilders.Clickable onClick`	The clickable action for whole layout. If any area (outside of other added tappable components) is clicked, it will fire the associated action.

TextKt.text

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public final @NonNull LayoutElementBuilders.LayoutElement TextKt.text(
    @NonNull MaterialScope receiver,
    @NonNull LayoutString text,
    int typography,
    @NonNull LayoutColor color,
    boolean italic,
    boolean underline,
    boolean scalable,
    int maxLines,
    int multilineAlignment,
    int overflow,
    @NonNull LayoutModifier modifiers
)

ProtoLayout component that represents text object holding any information.

There are pre-defined typography styles that can be obtained from Materials token system in Typography.

import androidx.wear.protolayout.material3.Typography
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        text(text = "Hello Material3".layoutString, typography = Typography.DISPLAY_LARGE)
    }

import androidx.wear.protolayout.expression.DynamicBuilders.DynamicString
import androidx.wear.protolayout.material3.Typography
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.types.LayoutString
import androidx.wear.protolayout.types.asLayoutConstraint

materialScope(context, deviceConfiguration) {
        this.text(
            text =
                LayoutString(
                    "Static",
                    DynamicString.constant("Dynamic"),
                    "LongestConstraint".asLayoutConstraint()
                ),
            typography = Typography.DISPLAY_LARGE,
            color = colorScheme.tertiary,
            underline = true,
            maxLines = 5
        )
    }

Parameters
`@NonNull LayoutString text`	The text content for this component.
`int typography`	The typography from `Typography` to be applied to this text. This will have predefined default value specified by each components that uses this text, to achieve the recommended look.
`@NonNull LayoutColor color`	The color to be applied to this text. It is recommended to use predefined default styles created by each component or `getColorProp(token)`.
`boolean italic`	Whether text should be displayed as italic.
`boolean underline`	Whether text should be displayed as underlined.
`boolean scalable`	Whether text should scale with the user font size.
`int maxLines`	The maximum number of lines that text can occupy.
`int multilineAlignment`	The horizontal alignment of the multiple lines of text.
`int overflow`	The overflow strategy when text doesn't have enough space to be shown.
`@NonNull LayoutModifier modifiers`	Modifiers to set to this element.

Extension functions
`final @NonNull LayoutElementBuilders.LayoutElement`	`ButtonGroupKt.buttonGroup( @NonNull MaterialScope receiver, @NonNull DimensionBuilders.ContainerDimension width, @NonNull DimensionBuilders.ContainerDimension height, @Dimension(unit = 0) float spacing, @ExtensionFunctionType @NonNull Function1<@NonNull ButtonGroupScope, Unit> content )` ProtoLayout Material3 component-layout that places its children in a horizontal sequence.
`final @NonNull LayoutElementBuilders.LayoutElement`	ButtonKt.button( @NonNull MaterialScope receiver, @NonNull ModifiersBuilders.Clickable onClick, @NonNull LayoutModifier modifier, @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> content, @NonNull DimensionBuilders.ContainerDimension width, @NonNull DimensionBuilders.ContainerDimension height, @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent, @NonNull ModifiersBuilders.Padding contentPadding ) ProtoLayout Material3 clickable component button that offers a single slot to take any content.
`final @NonNull LayoutElementBuilders.LayoutElement`	ButtonKt.iconButton( @NonNull MaterialScope receiver, @NonNull ModifiersBuilders.Clickable onClick, @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent, @NonNull LayoutModifier modifier, @NonNull DimensionBuilders.ContainerDimension width, @NonNull DimensionBuilders.ContainerDimension height, @NonNull ModifiersBuilders.Corner shape, @NonNull ButtonColors colors, @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent, @NonNull IconButtonStyle style, @NonNull ModifiersBuilders.Padding contentPadding ) Opinionated ProtoLayout Material3 icon button that offers a single slot to take content representing icon, for example `icon`.
`final @NonNull LayoutElementBuilders.LayoutElement`	ButtonKt.textButton( @NonNull MaterialScope receiver, @NonNull ModifiersBuilders.Clickable onClick, @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent, @NonNull LayoutModifier modifier, @NonNull DimensionBuilders.ContainerDimension width, @NonNull DimensionBuilders.ContainerDimension height, @NonNull ModifiersBuilders.Corner shape, @NonNull ButtonColors colors, @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent, @NonNull TextButtonStyle style, @NonNull ModifiersBuilders.Padding contentPadding ) Opinionated ProtoLayout Material3 text button that offers a single slot to take content representing short text, for example `text`.
`final @NonNull LayoutElementBuilders.LayoutElement`	CardKt.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.
`final @NonNull LayoutElementBuilders.LayoutElement`	CardKt.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.
`final @NonNull LayoutElementBuilders.LayoutElement`	CardKt.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.
`final @NonNull LayoutElementBuilders.LayoutElement`	CardKt.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.
`final @NonNull LayoutElementBuilders.LayoutElement`	CardKt.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.
`final @NonNull LayoutElementBuilders.LayoutElement`	CardKt.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.
`final @NonNull LayoutElementBuilders.LayoutElement`	CircularProgressIndicatorKt.circularProgressIndicator( @NonNull MaterialScope receiver, float staticProgress, DynamicBuilders.DynamicFloat dynamicProgress, @NonNull LayoutModifier modifier, float startAngleDegrees, float endAngleDegrees, @Dimension(unit = 0) float strokeWidth, @Dimension(unit = 0) float gapSize, @NonNull ProgressIndicatorColors colors, @NonNull DimensionBuilders.ContainerDimension size ) Protolayout Material3 design circular progress indicator.
`final @NonNull LayoutElementBuilders.LayoutElement`	`EdgeButtonKt.iconEdgeButton( @NonNull MaterialScope receiver, @NonNull ModifiersBuilders.Clickable onClick, @NonNull LayoutModifier modifier, @NonNull ButtonColors colors, @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent )` ProtoLayout Material3 component edge button that offers a single slot to take an icon or similar round, small content.
`final @NonNull LayoutElementBuilders.LayoutElement`	`EdgeButtonKt.textEdgeButton( @NonNull MaterialScope receiver, @NonNull ModifiersBuilders.Clickable onClick, @NonNull LayoutModifier modifier, @NonNull ButtonColors colors, @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent )` ProtoLayout Material3 component edge button that offers a single slot to take a text or similar long and wide content.
`final @NonNull LayoutElementBuilders.LayoutElement`	`IconKt.icon( @NonNull MaterialScope receiver, @NonNull String protoLayoutResourceId, @NonNull DimensionBuilders.ImageDimension size, @NonNull LayoutColor tintColor )` Returns the icon components with the defined style.
`final @NonNull LayoutElementBuilders.LayoutElement`	`ImageKt.avatarImage( @NonNull MaterialScope receiver, @NonNull String protoLayoutResourceId, @NonNull DimensionBuilders.ImageDimension width, @NonNull DimensionBuilders.ImageDimension height, @NonNull LayoutModifier modifier, int contentScaleMode )` Returns the avatar image with the defined style.
`final @NonNull LayoutElementBuilders.LayoutElement`	`ImageKt.backgroundImage( @NonNull MaterialScope receiver, @NonNull String protoLayoutResourceId, @NonNull LayoutModifier modifier, @NonNull DimensionBuilders.ImageDimension width, @NonNull DimensionBuilders.ImageDimension height, @NonNull LayoutColor overlayColor, @NonNull DimensionBuilders.ContainerDimension overlayWidth, @NonNull DimensionBuilders.ContainerDimension overlayHeight, int contentScaleMode )` Returns the image background with the defined style.
`final @NonNull LayoutElementBuilders.LayoutElement`	PrimaryLayoutKt.primaryLayout( @NonNull MaterialScope receiver, @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> mainSlot, @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> titleSlot, @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> bottomSlot, @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelForBottomSlot, ModifiersBuilders.Clickable onClick ) ProtoLayout Material3 full screen layout that represents a suggested Material3 layout style that is responsive and takes care of the elements placement, together with the recommended margin and padding applied.
`final @NonNull LayoutElementBuilders.LayoutElement`	`TextKt.text( @NonNull MaterialScope receiver, @NonNull LayoutString text, int typography, @NonNull LayoutColor color, boolean italic, boolean underline, boolean scalable, int maxLines, int multilineAlignment, int overflow, @NonNull LayoutModifier modifiers )` ProtoLayout component that represents text object holding any information.