MaterialScope

public final @NonNull ColorScheme getColorScheme()

Color Scheme used within this scope and its components.

public final @NonNull DeviceParametersBuilders.DeviceParameters getDeviceConfiguration()

The device parameters for where the components will be rendered.

public final @NonNull Shapes getShapes()

Shapes theme used within this scope and its components.

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.

public final @NonNull LayoutElementBuilders.LayoutElement EdgeButtonKt.iconEdgeButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull TypeBuilders.StringProp contentDescription,
    @NonNull EdgeButtonColors 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.icon
import androidx.wear.protolayout.material3.iconEdgeButton
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.text

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

public final @NonNull LayoutElementBuilders.LayoutElement EdgeButtonKt.textEdgeButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull TypeBuilders.StringProp contentDescription,
    @NonNull EdgeButtonColors 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.

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.materialScope
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textEdgeButton

materialScope(context, deviceConfiguration) {
        textEdgeButton(onClick = clickable, contentDescription = "Description of a button".prop()) {
            text("Hello".prop())
        }
    }

public final @NonNull LayoutElementBuilders.LayoutElement IconKt.icon(
    @NonNull MaterialScope receiver,
    @NonNull String protoLayoutResourceId,
    @NonNull DimensionBuilders.ImageDimension size,
    @NonNull ColorBuilders.ColorProp 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").

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.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

materialScope(context, deviceConfiguration) {
        primaryLayout(
            titleSlot = { text("App title".prop()) },
            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(clickable, "Description".prop()) { icon("id") } }
        )
    }

public final @NonNull LayoutElementBuilders.LayoutElement TextKt.text(
    @NonNull MaterialScope receiver,
    @NonNull TypeBuilders.StringProp text,
    @NonNull TypeBuilders.StringLayoutConstraint stringLayoutConstraint,
    int typography,
    @NonNull ColorBuilders.ColorProp color,
    boolean italic,
    boolean underline,
    boolean scalable,
    int maxLines,
    int multilineAlignment,
    int overflow,
    @NonNull ModifiersBuilders.Modifiers 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

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

import androidx.wear.protolayout.TypeBuilders.StringLayoutConstraint
import androidx.wear.protolayout.TypeBuilders.StringProp
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

materialScope(context, deviceConfiguration) {
        text(
            text =
                StringProp.Builder("Static")
                    .setDynamicValue(DynamicString.constant("Dynamic"))
                    .build(),
            stringLayoutConstraint = StringLayoutConstraint.Builder("Constraint").build(),
            typography = Typography.DISPLAY_LARGE,
            color = colorScheme.tertiary,
            underline = true,
            maxLines = 5
        )
    }