Android XR: how to make your app XR-ready

Leveraging EnableXrComponentOverrides

Google has announced Android XR and the appropriate development SDK. I wrote about how to setup your development environment. Today I want to show a very effective way to make your app look XR-ready with only a few lines of code.

In deed, the Android Team provide some tools to rapidly migrating existing Android app to XR, so that app take advantage of the new UI-paradigms.

Introduction to the UI-paradigms in Android XR

• Subspace is a container for Spatial components such as Spatial Panels, Spatial Row and Spatial Column.
• Spatial Panel is a fundamental UI element for your XR App. It is similar to the main window of your app.
• Orbiters are floating components that control the content of the Spatial Panel, for example Navigation Rail/Bar.
• https://developer.android.com/design/ui/xr/guides/spatial-ui#orbiters
• https://developer.android.com/develop/xr/jetpack-xr-sdk/develop-ui

The EnableXrComponentOverrides wrapper

If your app uses NavigationRail or NavigationBar, the wrapper can transform the Navigation component into an orbiter, so that it looks more XR ready.

Note: the XR optimisation will only starts when the Spatial UI is enabled.

Implementation

Add gradle dependency

The wrapper is part of Material Design and therefor your need to add the following to your gradle.build.kts:

implementation("androidx.xr.compose.material3:material3:1.0.0-alpha01")

Add the wrapper

Then you need to add the EnableXrComponentOverrides wrapper around your composable code. I recommend to add it inside the Composable you use for your layout structure.

You will also need to opt-in ExperimentalMaterial3XrApi:class

@OptIn(ExperimentalMaterial3XrApi::class)
@Composable
fun CustomNavigationLayout(content: @Composable () -> Unit = {}){
  EnableXrComponentOverrides() {
      Box(
          modifier = Modifier
              .fillMaxHeight()
              .fillMaxWidth()
      ) {
          Column(modifier = Modifier.align(alignment = Alignment.TopCenter)) {
              content()
          }
  
          NavigationBar(modifier = Modifier.align(alignment = Alignment.BottomCenter)) {
              // Navigation items
          }
      }
  }
}

At this stage your app should run just fine, but you won’t see the spatial optimisations yet. You need to request the Spatial Ui mode.

Enable Spatial UI mode

The Spatial UI mode can be enabled with the requestFullSpaceMode() function from the local session. You can bring back the user to HomeSpace by calling requestHomeSpaceMode().

@Composable
fun MyLayout() {
  // Get the session
  val session = LocalSession.current
  // this code allow to switch between Home Space (window) 
  // and Full Space (full screen) mode
  val callback: () -> Unit = if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
        { session?.requestHomeSpaceMode() }
    } else {
        { session?.requestFullSpaceMode() }
    }
  // on click of the button the mode will switch
  Button(onClick = callback) {
            Text("Switch Mode")
        }
}

And thanks to this wrapper, I was able to optimize Android Developers News with less than 10 lines of code!

Left Home Space Mode show the app in one block / Right Full Space Mode show the Navigation Orbiter

Rendering your smartphone app on XR

Android XR experience is like rendering your app on a very large screen, therefore, the same principles apply.

I highly recommend to remove any force portrait orientation code such as:

android:screenOrientation="portrait"

Then you can follow the tablet/foldable guidance and use layouts that are responsive, such as SupportingPaneScaffold, ListDetailPaneScaffold and NavigationSuiteScaffold.

There is already extensive documentation on the subject.

Conclusion

Make an existing app compatible with Full Space mode can be relatively quick if you already use material design component like NavigationBar and Navigation rail. As mobile developers we need to think beyond the vertical screen to take advantage of the incredible large space that is offered to our users with Android XR.