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.

Develop with the Jetpack XR SDK →

Using the Android Jetpack Compose framework is the best way to take advantage of the latest advancements in Android UI development and to verify that 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 Subspace in your MainActivity, place an existing view into a SpatialPanel as shown in the following example.

setContent {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
        ) { MyCustomView(this@ActivityWithSubspaceContent) }
    }
}
Views.kt

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 ComposeView in your XML layout to add Composables and create new XR content. Use View binding or findViewById to find 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.example_fragment, container, false)
    view.findViewById<ComposeView>(R.id.compose_view).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
}
Views.kt

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. Set the size of the panel in meters using dimensions, or in pixels using pixelDimensions. You can choose to make the panels movable or resizable by using the corresponding components. For more information, see Add common behavior to entities.

val panelContent = MyCustomView(this)
val panelEntity = PanelEntity.create(
    session = xrSession,
    view = panelContent,
    pixelDimensions = IntSize2d(500, 500),
    name = "panel entity"
)
Views.kt