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
Orbiter(
position = Edge.Top,
offset = 10.dp,
alignment = Alignment.End
) {
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"
)