interface LayoutModifier

Known direct subclasses
LayoutModifier.Companion

The companion object LayoutModifier is the empty, default, or starter LayoutModifier that contains no elements.
LayoutModifier.Element

A single element contained within a LayoutModifier chain.

An ordered, immutable collection of modifier elements that decorate or add behavior to ProtoLayout layout elements. For example, backgrounds, padding and click actions. When a single modifier is applied multiple times, the last one wins.

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")
        }
    }

Summary

Nested types

The companion object LayoutModifier is the empty, default, or starter LayoutModifier that contains no elements.

A single element contained within a LayoutModifier chain.

Public companion functions
open R
<R : Any?> foldIn(initial: R, operation: (LayoutModifier.Element, R) -> R)

Accumulates a value starting with initial and applying operation to the current value and each element from outside in.
open infix LayoutModifier

Concatenates this modifier with another.
open String

Public functions
R
<R : Any?> foldIn(initial: R, operation: (LayoutModifier.Element, R) -> R)

Accumulates a value starting with initial and applying operation to the current value and each element from outside in.
open infix LayoutModifier

Concatenates this modifier with another.

Extension functions
LayoutModifier

Sets the background color and clipping.
LayoutModifier

Sets the background color to color.
LayoutModifier

Clips the element to a rounded rectangle with corners specified in corner.
LayoutModifier
LayoutModifier.clip(cornerRadius: @Dimension(unit = 0) Float)

Clips the element to a rounded rectangle with four corners with cornerRadius radius.
LayoutModifier
@RequiresSchemaVersion(major = 1, minor = 400)
LayoutModifier.clip(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float
)

Clips the element to a rounded shape with x as the radius on the horizontal axis and y as the radius on the vertical axis for the four corners.
LayoutModifier
@RequiresSchemaVersion(major = 1, minor = 400)
LayoutModifier.clipBottomLeft(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float
)

Clips the bottom left corner of the element with x as the radius on the horizontal axis and y as the radius on the vertical axis.
LayoutModifier
@RequiresSchemaVersion(major = 1, minor = 400)
LayoutModifier.clipBottomRight(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float
)

Clips the bottom right corner of the element with x as the radius on the horizontal axis and y as the radius on the vertical axis.
LayoutModifier
@RequiresSchemaVersion(major = 1, minor = 400)
LayoutModifier.clipTopLeft(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float
)

Clips the top left corner of the element with x as the radius on the horizontal axis and y as the radius on the vertical axis.
LayoutModifier
@RequiresSchemaVersion(major = 1, minor = 400)
LayoutModifier.clipTopRight(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float
)

Clips the top right corner of the element with x as the radius on the horizontal axis and y as the radius on the vertical axis.
LayoutModifier

Adds the clickable property of the modified element.
LayoutModifier

Adds the clickable property of the modified element.
LayoutModifier
@RequiresSchemaVersion(major = 1, minor = 300)
LayoutModifier.minimumTouchTargetSize(
    minWidth: @Dimension(unit = 0) Float,
    minHeight: @Dimension(unit = 0) Float
)

Sets the minimum width and height of the clickable area.
ModifiersBuilders.Modifiers

Creates a ModifiersBuilders.Modifiers from a LayoutModifier.
LayoutModifier

Applies all dp of additional space along each edge of the content, left, top, right and bottom.
LayoutModifier

Applies additional space along each edge of the content.
LayoutModifier
LayoutModifier.padding(
    horizontal: @Dimension(unit = 0) Float,
    vertical: @Dimension(unit = 0) Float
)

Applies horizontal dp of additional space along the left and right edges of the content and vertical dp of additional space along the top and bottom edges of the content.
LayoutModifier
LayoutModifier.padding(
    start: @Dimension(unit = 0) Float,
    top: @Dimension(unit = 0) Float,
    end: @Dimension(unit = 0) Float,
    bottom: @Dimension(unit = 0) Float,
    rtlAware: Boolean
)

Applies additional space along each edge of the content in DP: start, top, end and bottom
LayoutModifier
LayoutModifier.contentDescription(
    staticValue: String,
    @RequiresSchemaVersion(major = 1, minor = 200) dynamicValue: DynamicBuilders.DynamicString?
)

Adds content description to be read by Talkback.
LayoutModifier

Adds the semantic role of user interface element.

Public companion functions

foldIn

Added in 1.3.0-alpha06
open fun <R : Any?> foldIn(initial: R, operation: (LayoutModifier.Element, R) -> R): R

Accumulates a value starting with initial and applying operation to the current value and each element from outside in.

Elements wrap one another in a chain from left to right; an Element that appears to the left of another in a + expression or in operation's parameter order affects all of the elements that appear after it. foldIn may be used to accumulate a value starting from the parent or head of the modifier chain to the final wrapped child.

then

open infix fun then(other: LayoutModifier): LayoutModifier

Concatenates this modifier with another.

Returns a LayoutModifier representing this modifier followed by other in sequence.

toString

open fun toString(): String

Public functions

foldIn

Added in 1.3.0-alpha06
fun <R : Any?> foldIn(initial: R, operation: (LayoutModifier.Element, R) -> R): R

Accumulates a value starting with initial and applying operation to the current value and each element from outside in.

Elements wrap one another in a chain from left to right; an Element that appears to the left of another in a + expression or in operation's parameter order affects all of the elements that appear after it. foldIn may be used to accumulate a value starting from the parent or head of the modifier chain to the final wrapped child.

then

Added in 1.3.0-alpha06
open infix fun then(other: LayoutModifier): LayoutModifier

Concatenates this modifier with another.

Returns a LayoutModifier representing this modifier followed by other in sequence.

Extension functions

background

fun LayoutModifier.background(
    color: LayoutColor,
    corner: ModifiersBuilders.Corner? = null
): LayoutModifier

Sets the background color and clipping.

Parameters
color: LayoutColor

for the background
corner: ModifiersBuilders.Corner? = null

to use for clipping the background

backgroundColor

fun LayoutModifier.backgroundColor(color: LayoutColor): LayoutModifier

Sets the background color to color.

clip

fun LayoutModifier.clip(corner: ModifiersBuilders.Corner): LayoutModifier

Clips the element to a rounded rectangle with corners specified in corner.

clip

fun LayoutModifier.clip(cornerRadius: @Dimension(unit = 0) Float): LayoutModifier

Clips the element to a rounded rectangle with four corners with cornerRadius radius.

clip

@RequiresSchemaVersion(major = 1, minor = 400)
fun LayoutModifier.clip(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float
): LayoutModifier

Clips the element to a rounded shape with x as the radius on the horizontal axis and y as the radius on the vertical axis for the four corners.

clipBottomLeft

@RequiresSchemaVersion(major = 1, minor = 400)
fun LayoutModifier.clipBottomLeft(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float = x
): LayoutModifier

Clips the bottom left corner of the element with x as the radius on the horizontal axis and y as the radius on the vertical axis.

clipBottomRight

@RequiresSchemaVersion(major = 1, minor = 400)
fun LayoutModifier.clipBottomRight(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float = x
): LayoutModifier

Clips the bottom right corner of the element with x as the radius on the horizontal axis and y as the radius on the vertical axis.

clipTopLeft

@RequiresSchemaVersion(major = 1, minor = 400)
fun LayoutModifier.clipTopLeft(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float = x
): LayoutModifier

Clips the top left corner of the element with x as the radius on the horizontal axis and y as the radius on the vertical axis.

clipTopRight

@RequiresSchemaVersion(major = 1, minor = 400)
fun LayoutModifier.clipTopRight(
    x: @Dimension(unit = 0) Float,
    y: @Dimension(unit = 0) Float = x
): LayoutModifier

Clips the top right corner of the element with x as the radius on the horizontal axis and y as the radius on the vertical axis.

clickable

fun LayoutModifier.clickable(clickable: ModifiersBuilders.Clickable): LayoutModifier

Adds the clickable property of the modified element. It allows the modified element to have actions associated with it, which will be executed when the element is tapped.

clickable

fun LayoutModifier.clickable(
    action: ActionBuilders.Action = loadAction(),
    id: String? = null
): LayoutModifier

Adds the clickable property of the modified element. It allows the modified element to have actions associated with it, which will be executed when the element is tapped.

Parameters
action: ActionBuilders.Action = loadAction()

is triggered whenever the element is tapped. By default adds an empty LoadAction.
id: String? = null

is the associated identifier for this clickable. This will be passed to the action handler.

minimumTouchTargetSize

@RequiresSchemaVersion(major = 1, minor = 300)
fun LayoutModifier.minimumTouchTargetSize(
    minWidth: @Dimension(unit = 0) Float,
    minHeight: @Dimension(unit = 0) Float
): LayoutModifier

Sets the minimum width and height of the clickable area. The default value is 48dp, following the Material design accessibility guideline. Note that this value does not affect the layout, so the minimum clickable width/height is not guaranteed unless there is enough space around the element within its parent bounds.

toProtoLayoutModifiers

fun LayoutModifier.toProtoLayoutModifiers(): ModifiersBuilders.Modifiers

Creates a ModifiersBuilders.Modifiers from a LayoutModifier.

padding

fun LayoutModifier.padding(all: @Dimension(unit = 0) Float): LayoutModifier

Applies all dp of additional space along each edge of the content, left, top, right and bottom.

padding

fun LayoutModifier.padding(padding: ModifiersBuilders.Padding): LayoutModifier

Applies additional space along each edge of the content.

padding

fun LayoutModifier.padding(
    horizontal: @Dimension(unit = 0) Float,
    vertical: @Dimension(unit = 0) Float
): LayoutModifier

Applies horizontal dp of additional space along the left and right edges of the content and vertical dp of additional space along the top and bottom edges of the content.

padding

fun LayoutModifier.padding(
    start: @Dimension(unit = 0) Float = Float.NaN,
    top: @Dimension(unit = 0) Float = Float.NaN,
    end: @Dimension(unit = 0) Float = Float.NaN,
    bottom: @Dimension(unit = 0) Float = Float.NaN,
    rtlAware: Boolean = true
): LayoutModifier

Applies additional space along each edge of the content in DP: start, top, end and bottom

Parameters
start: @Dimension(unit = 0) Float = Float.NaN

The padding on the start of the content, depending on the layout direction, in DP and the value of rtlAware.
top: @Dimension(unit = 0) Float = Float.NaN

The padding at the top, in DP.
end: @Dimension(unit = 0) Float = Float.NaN

The padding on the end of the content, depending on the layout direction, in DP and the value of rtlAware.
bottom: @Dimension(unit = 0) Float = Float.NaN

The padding at the bottom, in DP.
rtlAware: Boolean = true

specifies whether the start/end padding is aware of RTL support. If true, the values for start/end will follow the layout direction (i.e. start will refer to the right hand side of the container if the device is using an RTL locale). If false, start/end will always map to left/right, accordingly.

contentDescription

fun LayoutModifier.contentDescription(
    staticValue: String,
    @RequiresSchemaVersion(major = 1, minor = 200) dynamicValue: DynamicBuilders.DynamicString? = null
): LayoutModifier

Adds content description to be read by Talkback.

Parameters
staticValue: String

The static content description. This value will be used if dynamicValue is null, or if can't be resolved.
@RequiresSchemaVersion(major = 1, minor = 200) dynamicValue: DynamicBuilders.DynamicString? = null

The dynamic content description. This is useful when content of the element itself is dynamic.

semanticsRole

fun LayoutModifier.semanticsRole(semanticsRole: Int): LayoutModifier

Adds the semantic role of user interface element. Accessibility services might use this to describe the element or do customizations.