Subspace modifiers

A SubspaceModifier is similar to a Compose modifier for composables in a Subspace. A SubspaceModifier lets you manipulate composables in 3D space, helping you position, rotate, and add behaviors to 3D layout nodes.

Layout

By default, a Subspace is bounded by the recommended space for viewing an app. These bounds are used when measuring the layout of your subspace components, similar to bounds in 2D Compose layouts.

Fill bounds

The modifiers fillMaxSize, fillMaxWidth, fillMaxHeight, and fillMaxDepth make content (partially) fill the bounds of its parent. Using fill modifiers helps your app layout content that's independent of the XR device's display characteristics.

Set the size and required size

The modifiers size, width, height, and depth declare the preferred size of the content. To declare the exact size of the content, use requiredSize, requiredWidth, requiredHeight, and requiredDepth. These units must be specified in dp; to convert from meters to dp, use Meter.toDp().

Position composables

offset

The offset modifier moves the composable in 3D space along the x, y, and z axes. These units must be specified in dp; to convert from meters to dp, use Meter.toDp().

rotate

The rotate modifier rotates the given composable in space. You can specify the direction and the amount of rotation in different ways:

  • Using pitch, yaw, and roll, which specify the rotation around the x, y, and z axes respectively,
  • Using an axisAngle, which is a Vector3 representing the axis of rotation, and the amount of degrees it should be rotated around,
  • Using a Quaternion that represents the rotation.

Change the appearance of composables

alpha

The alpha modifier sets the opacity of the element and its children, where 0f represents fully transparent and 1.0f represents completely opaque.

scale

The scale modifier scales the contents of the composible along the horizontal, vertical, and depth axes.

Add behaviors to composables

resizable

When the resizable modifier is enabled, draggable UI controls will be shown that allow the user to resize the element. This is similar to using ResizableComponent on an Entity.

movable

When the movable modifier is enabled, UI controls will be added to the component which allow the user to move the element in 3D space. This is similar to using MovableComponent on an Entity.

Testing and accessibility

semantics

The semantics modifier adds semantics to the layout node, for use in testing and accessibility. See Semantics in Jetpack Compose and SemanticsModifier.

testTag

The testTag modifier is a shorthand for SemanticsPropertyReceiver.testTag, which allows test frameworks to find the element in tests.