androidx.wear.protolayout.modifiers

fun clickable(
    action: ActionBuilders.Action = loadAction(),
    id: String? = null,
    @RequiresSchemaVersion(major = 1, minor = 300) minClickableWidth: @Dimension(unit = 0) Float = Float.NaN,
    @RequiresSchemaVersion(major = 1, minor = 300) minClickableHeight: @Dimension(unit = 0) Float = Float.NaN
): ModifiersBuilders.Clickable

Creates a Clickable that allows the modified element to have actions associated with it, which will be executed when the element is tapped.

fun loadAction(
    @RequiresSchemaVersion(major = 1, minor = 200) requestedStateMap: DynamicDataMap? = null
): ActionBuilders.LoadAction

Creates an action used to load (or reload) the layout contents.

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

Creates a Padding that applies all dp of additional space along each edge of the content, left, top, right and bottom.

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

Creates a Padding that 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.

fun 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
): ModifiersBuilders.Padding

Creates a Padding that applies additional space along each edge of the content in DP: start, top, end and bottom

@RequiresSchemaVersion(major = 1, minor = 500)
fun LayoutModifier.background(brush: ColorBuilders.Brush): LayoutModifier

Sets the background brush to brush.

fun LayoutModifier.background(color: LayoutColor): LayoutModifier

Sets the background color to color.

fun LayoutModifier.border(width: @Dimension(unit = 0) Float, color: LayoutColor): LayoutModifier

Adds a modifier to apply a border around an element.

fun LayoutModifier.clearSemantics(): LayoutModifier

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

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.

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.

fun ProtoLayoutScope.clickable(
    pendingIntent: PendingIntent,
    id: String,
    fallbackAction: ActionBuilders.Action? = null,
    minClickableWidth: @Dimension(unit = 0) Float = Float.NaN,
    minClickableHeight: @Dimension(unit = 0) Float = Float.NaN
): ModifiersBuilders.Clickable

Creates a Clickable that allows the modified element to have a PendingIntent associated with it, which will be sent when the element is tapped.

This clickable requires to be created in a ProtoLayoutScope receiver scope which handles internal details of ProtoLayout layout and tiles. In Tiles cases, this scope object can be obtained via androidx.wear.tiles.RequestBuilders#TileRequest.getScope.

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

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

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

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

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

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

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

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

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

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

Adds content description to be read by accessibility services.

@RequiresSchemaVersion(major = 1, minor = 200)
@ProtoLayoutExperimental
fun LayoutModifier.enterTransition(
    transition: ModifiersBuilders.EnterTransition
): LayoutModifier

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
fun LayoutModifier.enterTransition(
    fadeIn: ModifiersBuilders.FadeInTransition? = null,
    slideIn: ModifiersBuilders.SlideInTransition? = null
): LayoutModifier

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
fun LayoutModifier.exitTransition(
    transition: ModifiersBuilders.ExitTransition
): LayoutModifier

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
fun LayoutModifier.exitTransition(
    fadeOut: ModifiersBuilders.FadeOutTransition? = null,
    slideOut: ModifiersBuilders.SlideOutTransition? = null
): LayoutModifier

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 = 500)
fun LayoutModifier.fadeInOnVisibleModifier(
    animationSpec: AnimationParameterBuilders.AnimationSpec = AnimationParameterBuilders.AnimationSpec.Builder()
            .setAnimationParameters(
                AnimationParameterBuilders.AnimationParameters.Builder()
                    .setDurationMillis(150)
                    .build()
            )
            .build()
): LayoutModifier

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

@RequiresSchemaVersion(major = 1, minor = 400)
fun LayoutModifier.opacity(
    staticValue: @FloatRange(from = 0.0, to = 1.0) Float,
    dynamicValue: DynamicBuilders.DynamicFloat? = null
): LayoutModifier

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.

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.

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

Applies additional space along each edge of the content.

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.

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

@RequiresSchemaVersion(major = 1, minor = 600)
fun LayoutModifier.semanticsHeading(heading: Boolean): LayoutModifier

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

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.

fun LayoutModifier.toProtoLayoutModifiers(): ModifiersBuilders.Modifiers

Creates a ModifiersBuilders.Modifiers from a LayoutModifier.

@RequiresSchemaVersion(major = 1, minor = 300)
@ProtoLayoutExperimental
fun LayoutModifier.visibility(
    staticVisibility: Boolean,
    dynamicVisibility: DynamicBuilders.DynamicBool? = null
): LayoutModifier

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.