Jetpack Compose for XR includes a variety of spatialized components to help you build spatial UI and layouts for your app.
Subspace composables
Subspace composables are a special type of spatialized components that can
only be rendered in a subspace and must be enclosed within Subspace
before being placed within a 2D layout. A SubspaceModifier lets you add
attributes like depth, offset, and positioning to your subspace
composables.
Other spatialized components
Other spatialized components don't require being called inside a subspace. They consist of conventional 2D elements wrapped within a spatial container. These elements can be used within 2D or 3D layouts if defined for both. When spatialization is not enabled, their spatialized features will be ignored and they will fall back to their 2D counterparts.
Spatialized components can be placed anywhere in your app's UI hierarchy. These elements can be reused in your 2D UI, and their spatial attributes are only visible when spatial capabilities are enabled. This lets you add elevation to menus, dialogs, and other components without the need to write your code twice. Here are some examples of how different spatialized components change their behavior when spatialization is enabled or not:
Spatialized component |
When spatialization is enabled |
In 2D environment |
|---|---|---|
|
Panel pushes slightly back in z-depth to display an elevated dialog |
Falls back to 2D |
|
Panel pushes slightly back in z-depth to display an elevated popup |
Falls back to a 2D |
|
|
Shows without spatial elevation. |
Guides
This section includes the following developer guides: