Learn How to Enhance a Single Screen App and Offer an Immersive User Experience for Android XR Headsets

This article will be taking readers/developers through the steps on how to use Jetpack Compose XR library, how to adapt apps for Android XR headsets, and on how to create an immersive user experience. Using the below given codelab, readers/developers will be able to boost their Android XR development skills and learn how to enhance a single screen app to provide an immersive user experience for Android XR headsets.

Read more about it below.

Enhance Single Screen Apps for Android XR Headsets and Offer an Immersive User Experience

As mentioned this codelab will be taking readers/developers step by step on how they can convert a single screen app and provide an immersive user experience on Android XR headsets. For this purpose, they will require Android Studio preview, a PC device that can run Android XR emulator, familiarity with Kotlin and Jetpack Compose, and experience in creating Android virtual devices and also running apps on them.

As the first step, start by getting the code for this codelab in the xr-fundamentals directory that can be found within the xr-codelabs GitHub repository. Using this command –  git clone https://github.com/android/xr-codelabs.git, clone the repository. Readers/developers can also download the repository as a zip file too as an alternative step.

Next launch Android Studio and import the project by selecting the xr-fundamentals/start directory. If by chance at any point you get stuck or want to see the full project, the solution code is present within the xr-fundamentals/part1. Then opening the project in Android Studio, familiarize yourself with the code.

Before proceeding, know about XR concepts like Modes and Spatial Panels. There are two modes in which apps run on Android XR headsets – Home Space Mode and Full Space Mode. In Home Space Mode, multiple apps run side by side for offering multitasking. On the other hand, in Full Space Mode, a single app is only being run making use of additional capabilities without any boundaries. Spatial Panels serve as fundamental building blocks for Android XR apps. An app is contained in a single panel when in Home Space Mode, while users will be able to break an app content into one or more panels in Full Space Mode.

To know how the app looks in Home Space Mode, it can be run in the Android XR emulator. For this, first install the Android XR system image and create an Android XR virtual device. Users can move into the enhancing process after this. Also, before adding XR-specific functionality, users will have to add a dependency – androidx.xr.compose:compose for XR library on the Jetpack Compose. Furthermore, update with libs.version.toml and build.gradle.kts (Module :app) files, and then perform a Gradle sync.

The app must run in Full Space Mode to use XR features such as Panels, and this can be done either programmatically or by adding a directive to the app manifest. To enter Full Space Mode programmatically, affordances can be provided in the UI to control the action. For this, create a new file – ToggleSpaceModeButton.kt in the com.example.android.xrfundamentals.ui.component package, and add ToggleSpaceModeButton.kt and XRFundamentalsTopAppBar.kt composables. After this, run the app and enter Full Space Mode by clicking on the icon at the top right corner.

To instruct and start an activity in Full Space Mode, include <property> and <activity> elements. Following the process, when the app is launched, it directly takes users to full Space Mode. To go back to the default behavior, remove the <property> element.

With all these above mentioned steps, the app has received the capability to enter and exit Full Space Mode. Users can now make use of the capability and one way to do so is to split app contents into multiple panels. Begin the process by adding a Subspace composable after the Scaffold composable in the XRFundamentalsApp composable. Then add a SpatialPanel within the Subspace composable, and include the Scaffold within it to bring the controls to the top of the app bar. Run the app to see the SpatialPanel in Full Space Mode – but in a very small appearance.

Supply a SubspaceModifier to make it larger, and run it again to see the change. Use Surface for adding a panel for secondary content. Make use of SpatialRow and SpatialColumn composables to layout the panels in a row. Add resizable subspace modifier, and then set appropriate minimumSize and maximumSize parameters. In the same way, use the movable subspace modifier to make the panels moveable.

To know more about the detailed steps, visit this given link.