EdgeButtonKt

Added in 1.3.0-alpha03

---

Kotlin |Java

public final class EdgeButtonKt

---

Summary

Public methods
static final @NonNull LayoutElementBuilders.LayoutElement	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.
static final @NonNull LayoutElementBuilders.LayoutElement	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.

Public methods

iconEdgeButton

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public static final @NonNull LayoutElementBuilders.LayoutElement 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")
        }
    }

Parameters
@NonNull ModifiersBuilders.Clickable onClick	Associated Clickable for click events. When the button is clicked it will fire the associated action.
@NonNull TypeBuilders.StringProp contentDescription	The content description to be read by Talkback.
@NonNull EdgeButtonColors colors	The colors used for this button. If not set, EdgeButtonDefaults.filled will be used as high emphasis button. Other recommended colors are EdgeButtonDefaults.filledTonal and EdgeButtonDefaults.filledVariant. 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.

textEdgeButton

Artifact: androidx.wear.protolayout:protolayout-material3

View Source

public static final @NonNull LayoutElementBuilders.LayoutElement 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())
        }
    }

Parameters
@NonNull ModifiersBuilders.Clickable onClick	Associated Clickable for click events. When the button is clicked it will fire the associated action.
@NonNull TypeBuilders.StringProp contentDescription	The content description to be read by Talkback.
@NonNull EdgeButtonColors colors	The colors used for this button. If not set, EdgeButtonDefaults.filled will be used as high emphasis button. Other recommended colors are EdgeButtonDefaults.filledTonal and EdgeButtonDefaults.filledVariant. 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.