Develop UI for Android Views-based Apps

Try the Compose way
Jetpack Compose using the Jetpack XR SDK is the recommended UI toolkit for Android XR.

Using the Android Jetpack Compose framework is the best way to take advantage of the latest advancements in Android UI development and ensure your application remains current with industry best practices.

However, if you haven't migrated, and are working to spatialize an Android Views based app, there are a few approaches you can take.

Reuse your existing Views within SpatialPanels

While SpatialPanels are part of the Jetpack Compose for XR library, they also accept Views. When using setSubspaceContent in your MainActivity, place an existing view into a SpatialPanel as shown in the following example.

setSubspaceContent {
   SpatialPanel(
       view = MyCustomView(this),
       modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
   )
}

Use Android Views and Compose interoperability APIs

Consult guidance on interoperability between Views and Compose. This documentation covers using these frameworks together and contains links to code samples you can use.

Use a ComposeView to add spatial panels and orbiters to an existing fragment

Use a ComposeViewin your XML layout to add Composables and create new XR content. Use [ViewBinding][ViewBinding] to call the ComposeView in the onCreateView function.

Read more about ComposeView guidance.

override fun onCreateView(
   inflater: LayoutInflater,
   container: ViewGroup?,
   savedInstanceState: Bundle?
): View {
   val view = inflater.inflate(R.layout.fragment_first, container, false)
   val composeView = view.findViewById<ComposeView>(R.id.compose_view)
   composeView.apply {
       // Dispose of the Composition when the view's LifecycleOwner
       // is destroyed
       setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
       setContent {
           // In Compose world
        SpatialPanel(SubspaceModifier.height(500.dp).width(500.dp)) {
            Text("Spatial Panel with Orbiter")
            }
            return view
        }
    }
}

Work directly with the Jetpack SceneCore library

Compose for XR is built on top of Jetpack SceneCore. If you are spatializing a Views based app, you may continue to use your existing UI code within Compose for XR or choose to work directly with Jetpack SceneCore's Session instead.

You can build panels directly from SceneCore using PanelEntity. Make the panels movable or resizable by using components. For more information, see Add common behavior to entities.

val panelContent = MyCustomView(this)
val panelEntity = xrSession.createPanelEntity(
   panelContent,
   surfaceDimensionsPx = Dimensions(500f,500f,500f),
   dimensions = Dimensions(1f,1f,1f),
   name = "panel entity"
)