When building an Android XR differentiated app, you may want to use spatial UI to place content in a user's physical or virtual environment. You can break out your app into spatial panels, orbiters, and add spatial elevation (described in more detail on this page).
Use Material Design components and layouts
Take advantage of Material Design's component library and adaptive layouts when designing your Android XR app. These interactive building blocks help speed up development so you can focus on core functionality and innovation.
Material Design for XR enhances Material 3 components and adaptive layouts with spatial UI behaviors. These can make your app feel more native to the platform and optimize for space.
You may also spatialize existing UI components by placing them in orbiters and applying spatial elevation, as described on this page.
Download the Material 3 Design Kit to get started.
Spatial panels
Spatial panels are the fundamental building blocks of Android XR apps. You can use them to build an XR-differentiated experience on an unlimited display, with content expanding across a user's space. Spatial panels serve as containers for UI elements, interactive components, and immersive content.
Understand how UI scales and moves
Spatial panels automatically adjust their size based on their distance from the user. This dynamic scaling ensures that UI elements remain legible and interactive when viewed from different distances. The size stays consistent between 0.75 meters and 1.75 meters. Then the scaling rate grows at 0.5 meters per meter, and elements will appear smaller.
To avoid conflicts with the system UI, keep within the default panel movement limits:
- Minimum depth: 0.75 meters from user
- Maximum depth: 5 meters from user
Users can scale a spatial panel up or down so it's large enough to see clearly, no matter the distance from the user. When a user moves a spatial panel, Android XR automatically scales its size.
Spatial panel sizes
Android XR is designed to make your app comfortable, legible, and accessible to a wide audience. For an optimal experience, the system uses 0.868 dp-to-dmm. When viewed on a headset, your app will appear farther away from a user than when they view an app on a phone or tablet, so it must be larger for ease of use.
In Full Space, there's no minimum size for a spatial panel, and the maximum is 2560dp x 1800dp due to physical limitations.
Where to place spatial panels
In Full Space, you can determine panel placement in both passthrough and virtual environments. When users switch from Home Space to Full Space, elements stay in the same predictable position, unless you assign a custom position.
Spawn the panel center 1.75 meters from a user's line of sight. Place the panel's vertical center 5° below a user's eye level to maximize comfort, as users tend to look downward.
For optimal comfort, place content in the center 41° of a user's field of view. This will ensure clear visibility and minimize the need for excessive head or body movement.
A user can move around in their space, and spatial panels will stay in place.
Android XR includes ready-to-go interaction patterns to make it easy for users to manipulate elements and to simplify your development process. A user can move elements to adapt to their personal space. You can configure move and resize behaviors.
To help users feel stable and well-oriented, you can allow users to anchor a spatial panel to a specific location in the real world, such as the floor, chair, wall, ceiling, or table. Anchoring is available in passthrough only.
Create your own spatial layout
You can decompose your app into multiple spatial panels, in any layout you choose. The spatial UI APIs don't limit the number panels. They include the ability to create layouts with rows and columns, and flat and curved rows. Spatial panel positions can be specific or arbitrary. Learn how to develop spatial UI layouts.
|
|
|
Flat row layout |
Curved row layout |
Arbitrary positions layout |
Orbiters
Orbiters are floating UI elements that control the content within spatial panels. They allow the content to have more space, and users can quickly access features while the main content remains visible. Orbiters give you the versatility to integrate existing UI components or to create new ones.
Orbiters should be used sparingly and with careful consideration of user needs and intent. A large number of spatialized UI elements can lead to content fatigue and overwhelm users with excessive competing actions. It's recommended to adapt a few key navigational components, such as the navigation rail or navigation bar.
Guidelines
- Adjust the padding to the panel to determine its flex or percentage position.
- Determine the Y-axis position of orbiters. 20dp is the recommended visual distance.
- Adjust the orbiter elevation level if needed via the spatial elevation levels. By default, they are elevated 15dp in Z-depth.
- Size can be fixed or flexible when the panel is resized.
- Determine if you want an orbiter to dynamically expand to fit the content.
Design patterns to avoid
- Avoid overlapping an orbiter by more than 50% of its size.
- Avoid placing orbiters too far from the spatial panel.
- Don't use absolute X or Y coordinates.
- Avoid using too many orbiters.
Spatial elevation
When you add spatial elevation to a component, it displays above the spatial panel on the Z-axis. This helps get a user's attention, creates better hierarchy, and improves legibility.
Design patterns to avoid
- Avoid spatializing or elevating big areas and planes such as bottom sheets and side sheets.
- Avoid elevating UI elements with scrollable content.
Design large target sizes
In an XR app, a target is the pointable area that users interact with. Android XR adheres to Material Design's target guidelines, and recommends larger targets to increase precision, comfort, and usability.
Learn about XR targets and hover states.
Make typography accessible
Font legibility is critical to a comfortable user experience in XR. We recommend using typescale options with a font size of 14dp or larger, and a font weight of normal or higher for improved legibility.
If your existing app follows Material Design guidelines, it's already optimized for Android XR. You can define a new app's typography based on Material Design.