Develop
Modify the UI and layout
Updated: Oct 2, 2024
In this tutorial, you learn how to customize the content of a Spatial SDK panel and reposition it with the Spatial Editor. Existing Android UIs work out of the box with Spatial SDK Panels, which can render layout XML or even full Android Activities.
Before you begin
- Complete Add a cube.
Step 1: Edit the Android UI layout file
In your scene, there’s a panel that says “Welcome” on it. The panel is generated by standard Android UI code. The layout for this UI is in
main/res/layout/ui_example.xml. Edit the text in ui_example.xml to display “Hello, Spatial!” instead of “Welcome”.- In Android Studio, open
ui_example.xml.
- Change the XML in either “Code” view (shown below in the image) or “Design” view (if you want to edit the layout visually) to “Welcome”.
- Rebuild the app to see the changes in your headset.
Step 2: Lay out your 3D scene with Spatial Editor
Earlier in this tutorial series, you downloaded Spatial Editor, the 3D scene editor for Spatial SDK. Let’s use it to modify the layout of your scene.
- On your computer, open the Spatial Editor app.
- Select Open Project, and then navigate to the
Main.metaspatialfile stored inside of/StarterSample/app/scenes.Note: Most of the sample projects come with aMain.metaspatialfile stored inside of/app/scenes.
- Open the
Main.metaspatialfile in Spatial Editor to see your scene.
- To move the panel up, in the 3D viewport, select the transform gizmo’s green arrow and drag it upwards.
- In the toolbar, select File > Save to save your composition.
- In Android Studio, rerun your app and put on your headset to see your changes.
Next steps
Did you find this page helpful?
Virtual reality / Meta Horizon
Support and legal
Virtual reality / Meta Horizon
Support and legal
Virtual reality / Meta Horizon
Support and legal
English (US)
© 2025 Meta