LayoutModifier

abstract @NonNull R <R extends Object> foldRight(
    @NonNull R initial,
    @NonNull Function2<@NonNull R, @NonNull LayoutModifier.Element, @NonNull R> operation
)

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

foldRight may be used to accumulate a value starting from the head of the modifier chain to the final modifier element.

default @NonNull LayoutModifier then(@NonNull LayoutModifier other)

Concatenates this modifier with another.

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

@RequiresSchemaVersion(major = 1, minor = 500)
default final @NonNull LayoutModifier BackgroundKt.background(
    @NonNull LayoutModifier receiver,
    @NonNull ColorBuilders.Brush brush
)

Sets the background brush to brush.

default final @NonNull LayoutModifier BackgroundKt.background(
    @NonNull LayoutModifier receiver,
    @NonNull LayoutColor color
)

Sets the background color to color.

default final @NonNull LayoutModifier BackgroundKt.clip(
    @NonNull LayoutModifier receiver,
    @NonNull ModifiersBuilders.Corner corner
)

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

default final @NonNull LayoutModifier BackgroundKt.clip(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float cornerRadius
)

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

@RequiresSchemaVersion(major = 1, minor = 400)
default final @NonNull LayoutModifier BackgroundKt.clip(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float x,
    @Dimension(unit = 0) float y
)

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.

@RequiresSchemaVersion(major = 1, minor = 400)
default final @NonNull LayoutModifier BackgroundKt.clipBottomLeft(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float x,
    @Dimension(unit = 0) float y
)

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.

@RequiresSchemaVersion(major = 1, minor = 400)
default final @NonNull LayoutModifier BackgroundKt.clipBottomRight(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float x,
    @Dimension(unit = 0) float y
)

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.

@RequiresSchemaVersion(major = 1, minor = 400)
default final @NonNull LayoutModifier BackgroundKt.clipTopLeft(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float x,
    @Dimension(unit = 0) float y
)

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.

@RequiresSchemaVersion(major = 1, minor = 400)
default final @NonNull LayoutModifier BackgroundKt.clipTopRight(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float x,
    @Dimension(unit = 0) float y
)

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.

default final @NonNull LayoutModifier BorderKt.border(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float width,
    @NonNull LayoutColor color
)

Adds a modifier to apply a border around an element.

default final @NonNull LayoutModifier ClickableKt.clickable(
    @NonNull LayoutModifier receiver,
    @NonNull ModifiersBuilders.Clickable clickable
)

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.

default final @NonNull LayoutModifier ClickableKt.clickable(
    @NonNull LayoutModifier receiver,
    @NonNull ActionBuilders.Action action,
    String id
)

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.

@RequiresSchemaVersion(major = 1, minor = 300)
default final @NonNull LayoutModifier ClickableKt.minimumTouchTargetSize(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float minWidth,
    @Dimension(unit = 0) float minHeight
)

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.

default final @NonNull ModifiersBuilders.Modifiers ModifierAppliersKt.toProtoLayoutModifiers(
    @NonNull LayoutModifier receiver
)

Creates a ModifiersBuilders.Modifiers from a LayoutModifier.

@RequiresSchemaVersion(major = 1, minor = 500)
default final @NonNull LayoutModifier OpacityKt.fadeInOnVisibleModifier(
    @NonNull LayoutModifier receiver,
    @NonNull AnimationParameterBuilders.AnimationSpec animationSpec
)

The recommended opacity modifier for Lottie animation or any other element that should appear as the layout is swiped to.

It is recommended to be used when Lottie animation is infinite, so that Lottie animation first becomes visible with fading in, followed by animation show, to avoid showing static state while user swipes to the layout.

import androidx.wear.protolayout.ResourceBuilders.LottieProperty.colorForSlot
import androidx.wear.protolayout.TriggerBuilders.createOnVisibleTrigger
import androidx.wear.protolayout.layout.imageResource
import androidx.wear.protolayout.layout.lottieResource
import androidx.wear.protolayout.material3.backgroundImage
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.materialScopeWithResources
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.background
import androidx.wear.protolayout.modifiers.fadeInOnVisibleModifier

materialScopeWithResources(
        context = context,
        protoLayoutScope = scope,
        deviceConfiguration = deviceConfiguration,
    ) {
        primaryLayout(
            mainSlot = {
                backgroundImage(
                    resource =
                        imageResource(
                            lottie =
                                lottieResource(
                                    rawResourceId = 1234, // Lottie Raw Resource ID,
                                    startTrigger = createOnVisibleTrigger(),
                                    properties =
                                        listOf(colorForSlot("slotID", colorScheme.tertiary.prop)),
                                )
                        ),
                    modifier = LayoutModifier.fadeInOnVisibleModifier(),
                )
            }
        )
    }

@RequiresSchemaVersion(major = 1, minor = 400)
default final @NonNull LayoutModifier OpacityKt.opacity(
    @NonNull LayoutModifier receiver,
    @FloatRange(from = 0.0, to = 1.0) float staticValue,
    DynamicBuilders.DynamicFloat dynamicValue
)

Adds a modifier to specify the opacity of the element with a value from 0 to 1, where 0 means the element is completely transparent and 1 means the element is completely opaque.

default final @NonNull LayoutModifier PaddingKt.padding(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float all
)

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

default final @NonNull LayoutModifier PaddingKt.padding(
    @NonNull LayoutModifier receiver,
    @NonNull ModifiersBuilders.Padding padding
)

Applies additional space along each edge of the content.

default final @NonNull LayoutModifier PaddingKt.padding(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float horizontal,
    @Dimension(unit = 0) float vertical
)

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.

default final @NonNull LayoutModifier PaddingKt.padding(
    @NonNull LayoutModifier receiver,
    @Dimension(unit = 0) float start,
    @Dimension(unit = 0) float top,
    @Dimension(unit = 0) float end,
    @Dimension(unit = 0) float bottom,
    boolean rtlAware
)

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

default final @NonNull LayoutModifier SemanticsKt.clearSemantics(@NonNull LayoutModifier receiver)

Clears the semantics, including contentDescription and semanticsRole, from the modifier.

default final @NonNull LayoutModifier SemanticsKt.contentDescription(
    @NonNull LayoutModifier receiver,
    @NonNull String staticValue,
    @RequiresSchemaVersion(major = 1, minor = 200) DynamicBuilders.DynamicString dynamicValue
)

Adds content description to be read by accessibility services.

@RequiresSchemaVersion(major = 1, minor = 600)
default final @NonNull LayoutModifier SemanticsKt.semanticsHeading(
    @NonNull LayoutModifier receiver,
    boolean heading
)

Mark the element as heading for a section of content for accessibility purpose.

default final @NonNull LayoutModifier SemanticsKt.semanticsRole(
    @NonNull LayoutModifier receiver,
    int semanticsRole
)

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

@RequiresSchemaVersion(major = 1, minor = 200)
@ProtoLayoutExperimental
default final @NonNull LayoutModifier TransitionKt.enterTransition(
    @NonNull LayoutModifier receiver,
    @NonNull ModifiersBuilders.EnterTransition transition
)

Adds a modifier to specify content transition that is triggered when element enters the layout.

Any update to the element or its children will trigger this animation for this element and everything underneath it.

@RequiresSchemaVersion(major = 1, minor = 200)
@ProtoLayoutExperimental
default final @NonNull LayoutModifier TransitionKt.enterTransition(
    @NonNull LayoutModifier receiver,
    ModifiersBuilders.FadeInTransition fadeIn,
    ModifiersBuilders.SlideInTransition slideIn
)

Adds a modifier to specify content transition that is triggered when element enters the layout.

Any update to the element or its children will trigger this animation for this element and everything underneath it.

@RequiresSchemaVersion(major = 1, minor = 200)
@ProtoLayoutExperimental
default final @NonNull LayoutModifier TransitionKt.exitTransition(
    @NonNull LayoutModifier receiver,
    @NonNull ModifiersBuilders.ExitTransition transition
)

Adds a modifier to specify content transition that is triggered when element exits the layout.

Any update to the element or its children will trigger this animation for this element and everything underneath it.

@RequiresSchemaVersion(major = 1, minor = 200)
@ProtoLayoutExperimental
default final @NonNull LayoutModifier TransitionKt.exitTransition(
    @NonNull LayoutModifier receiver,
    ModifiersBuilders.FadeOutTransition fadeOut,
    ModifiersBuilders.SlideOutTransition slideOut
)

Adds a modifier to specify content transition that is triggered when element exits the layout.

Any update to the element or its children will trigger this animation for this element and everything underneath it.

@RequiresSchemaVersion(major = 1, minor = 300)
@ProtoLayoutExperimental
default final @NonNull LayoutModifier VisibilityKt.visibility(
    @NonNull LayoutModifier receiver,
    boolean staticVisibility,
    DynamicBuilders.DynamicBool dynamicVisibility
)

Adds a modifier to specify the visibility of the element. A hidden element still consume space in the layout, but will not render any contents, nor will any of its children render any contents.

Note that hidden elements won't receive input events.