<br />

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 →](https://developer.android.com/develop/xr/jetpack-xr-sdk)  
![](https://developer.android.com/static/images/android-compose-ui-logo.png)

<br />

Using the[Android Jetpack Compose framework](https://developer.android.com/jetpack/compose)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](https://developer.android.com/develop/ui/views/layout/declaring-layout)based app, there are a few approaches you can take.

## Reuse your existing Views within SpatialPanels

While[`SpatialPanel`s](https://developer.android.com/reference/kotlin/androidx/xr/compose/subspace/package-summary#SpatialPanel(androidx.xr.compose.subspace.layout.SubspaceModifier,androidx.xr.compose.subspace.layout.SpatialShape,androidx.xr.compose.subspace.DragPolicy,androidx.xr.compose.subspace.ResizePolicy,kotlin.Function0))are part of the Jetpack Compose for XR library, they also accept Views. When using[`Subspace`](https://developer.android.com/reference/kotlin/androidx/xr/compose/spatial/package-summary#Subspace(kotlin.Function1))in your MainActivity, place an existing view into a[`SpatialPanel`](https://developer.android.com/reference/kotlin/androidx/xr/compose/subspace/package-summary#SpatialPanel(androidx.xr.compose.subspace.layout.SubspaceModifier,androidx.xr.compose.subspace.layout.SpatialShape,androidx.xr.compose.subspace.DragPolicy,androidx.xr.compose.subspace.ResizePolicy,kotlin.Function0))as shown in the following example.

<br />

```kotlin
setContent {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
        ) { MyCustomView(this@ActivityWithSubspaceContent) }
    }
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/xr/src/main/java/com/example/xr/compose/Views.kt#L48-L54
```

<br />

## Use Android Views and Compose interoperability APIs

Consult[guidance on interoperability between Views and Compose](https://developer.android.com/develop/ui/compose/migrate/interoperability-apis). 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`](https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/ComposeView)in your XML layout to add Composables and create new XR content. Use[View binding](https://developer.android.com/topic/libraries/view-binding)or[`findViewById`](https://developer.android.com/reference/android/view/View#findViewById(int))to find the[`ComposeView`](https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/ComposeView)in the[`onCreateView()`](https://developer.android.com/reference/android/app/Fragment#onCreateView(android.view.LayoutInflater,%20android.view.ViewGroup,%20android.os.Bundle))function.

[Read more about`ComposeView`guidance](https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/compose-in-views#compose-in-fragments).

<br />

```kotlin
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
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/xr/src/main/java/com/example/xr/compose/Views.kt#L61-L79
```

<br />

## Work directly with the Jetpack SceneCore library

[Compose for XR](https://developer.android.com/develop/xr/jetpack-xr-sdk#jetpack-compose)is built on top of[Jetpack SceneCore](https://developer.android.com/develop/xr/jetpack-xr-sdk#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`](https://developer.android.com/reference/kotlin/androidx/xr/runtime/Session)instead.

You can build panels directly from SceneCore using[`PanelEntity`](https://developer.android.com/reference/kotlin/androidx/xr/scenecore/PanelEntity). Set the size of the panel in meters using[`dimensions`](https://developer.android.com/reference/kotlin/androidx/xr/scenecore/PanelEntity#create(androidx.xr.runtime.Session,android.view.View,androidx.xr.runtime.math.FloatSize2d,kotlin.String,androidx.xr.runtime.math.Pose)), or in pixels using[`pixelDimensions`](https://developer.android.com/reference/kotlin/androidx/xr/scenecore/PanelEntity#create(androidx.xr.runtime.Session,android.view.View,androidx.xr.runtime.math.IntSize2d,kotlin.String,androidx.xr.runtime.math.Pose)). You can choose to make the panels movable or resizable by using the corresponding components. For more information, see[Add common behavior to entities](https://developer.android.com/develop/xr/jetpack-xr-sdk/work-with-entities#add-common).

<br />

```kotlin
val panelContent = MyCustomView(this)
val panelEntity = PanelEntity.create(
    session = xrSession,
    view = panelContent,
    pixelDimensions = IntSize2d(500, 500),
    name = "panel entity"
)https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/xr/src/main/java/com/example/xr/compose/Views.kt#L85-L91
```

<br />