OpacityKt

Added in 1.3.0

public final class OpacityKt

Summary

Public methods
static final @NonNull LayoutModifier
@RequiresSchemaVersion(major = 1, minor = 500)
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.
static final @NonNull LayoutModifier
@RequiresSchemaVersion(major = 1, minor = 400)
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.

Public methods

fadeInOnVisibleModifier

@RequiresSchemaVersion(major = 1, minor = 500)
public static final @NonNull LayoutModifier 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(),
                )
            }
        )
    }

opacity

@RequiresSchemaVersion(major = 1, minor = 400)
public static final @NonNull LayoutModifier 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.

Parameters
@FloatRange(from = 0.0, to = 1.0) float staticValue

The static value for opacity. This value will be used if dynamicValue is null, or if can't be resolved.
DynamicBuilders.DynamicFloat dynamicValue

The dynamic value for opacity. This can be used to change the opacity of the element dynamically (without changing the layout definition). To create a smooth transition for the dynamic change, you can use one of DynamicFloat.animate methods.