Create a Spatial layout for ResultsScreen

core/theme/src/main/java/com/android/developers/androidify/theme/components/HorizontalToolbar.kt

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2025 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.android.developers.androidify.theme.components
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.FloatingToolbarColors
+import androidx.compose.material3.HorizontalFloatingToolbar
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.ToggleButton
+import androidx.compose.material3.ToggleButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import kotlin.enums.enumEntries
+
+@Composable
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+inline fun <reified T : Enum<T>> HorizontalToolbar(
+    selectedOption: T,
+    crossinline label: @Composable (T) -> String,
+    crossinline onOptionSelected: (T) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val options = enumEntries<T>()
+    HorizontalFloatingToolbar(
+        modifier = modifier.border(
+            2.dp,
+            color = MaterialTheme.colorScheme.outline,
+            shape = MaterialTheme.shapes.large,
+        ),
+        colors = FloatingToolbarColors(
+            toolbarContainerColor = MaterialTheme.colorScheme.surface,
+            toolbarContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
+            fabContainerColor = MaterialTheme.colorScheme.tertiary,
+            fabContentColor = MaterialTheme.colorScheme.onTertiary,
+        ),
+        expanded = true,
+    ) {
+        options.forEachIndexed { index, item ->
+            ToggleButton(
+                modifier = Modifier,
+                checked = selectedOption == item,
+                onCheckedChange = { onOptionSelected(item) },
+                shapes = ToggleButtonDefaults.shapes(checkedShape = MaterialTheme.shapes.large),
+                colors = ToggleButtonDefaults.toggleButtonColors(
+                    checkedContainerColor = MaterialTheme.colorScheme.onSurface,
+                    containerColor = MaterialTheme.colorScheme.surface,
+                ),
+            ) {
+                Text(label(options[index]), maxLines = 1)
+            }
+            if (index != options.size - 1) {
+                Spacer(Modifier.width(8.dp))
+            }
+        }
+    }
+}

core/xr/src/main/java/com/android/developers/androidify/xr/SpatialComponents.kt

@@ -34,6 +34,7 @@ import androidx.xr.compose.subspace.SpatialBox
 import androidx.xr.compose.subspace.SpatialBoxScope
 import androidx.xr.compose.subspace.SpatialPanel
 import androidx.xr.compose.subspace.SubspaceComposable
+import androidx.xr.compose.subspace.layout.MoveEvent
 import androidx.xr.compose.subspace.layout.SubspaceModifier
 import androidx.xr.compose.subspace.layout.aspectRatio
 import androidx.xr.compose.subspace.layout.fillMaxSize
@@ -52,13 +53,15 @@ import com.android.developers.androidify.theme.AndroidifyTheme
 @Composable
 fun SquiggleBackgroundSubspace(
     minimumHeight: Dp,
+    onMove: ((MoveEvent) -> Boolean)? = null,
     content:
     @SubspaceComposable @Composable
     SpatialBoxScope.() -> Unit,
 ) {
     BackgroundSubspace(
         aspectRatio = 1.7f,
         drawable = R.drawable.squiggle_full,
+        onMove = onMove,
         minimumHeight = minimumHeight,
         content = content,
     )
@@ -69,14 +72,15 @@ fun BackgroundSubspace(
     aspectRatio: Float,
     @DrawableRes drawable: Int,
     minimumHeight: Dp,
+    onMove: ((MoveEvent) -> Boolean)? = null,
     content:
     @SubspaceComposable @Composable
     SpatialBoxScope.() -> Unit,
 ) {
     Subspace {
         SpatialPanel(
             SubspaceModifier
-                .movable()
+                .movable(onMove = onMove)
                 .resizable(
                     minimumSize = DpVolumeSize(0.dp, minimumHeight, 0.dp),
                     maintainAspectRatio = true,

core/xr/src/main/java/com/android/developers/androidify/xr/SpatialUiModes.kt

@@ -27,7 +27,6 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
-import androidx.xr.compose.platform.SpatialCapabilities
 import androidx.xr.scenecore.scene
 
 /** Check if the device is XR-enabled, but is not yet rendering spatial UI. */
@@ -38,9 +37,8 @@ fun couldRequestFullSpace(): Boolean {
 
 /** Check if the device is XR-enabled and is rendering spatial UI. */
 @Composable
-fun SpatialCapabilities.couldRequestHomeSpace(): Boolean {
-    if (!LocalSpatialConfiguration.current.hasXrSpatialFeature) return false
-    return isSpatialUiEnabled
+fun couldRequestHomeSpace(): Boolean {
+    return LocalSpatialConfiguration.current.hasXrSpatialFeature && LocalSpatialCapabilities.current.isSpatialUiEnabled
 }
 
 /** Default styling for an IconButton with a home space button and behavior. */
@@ -68,19 +66,26 @@ fun RequestHomeSpaceIconButton(
     }
 }
 
-/** Default styling for an TopAppBar Button with a full space button and behavior. */
+/** Default styling for an IconButton with a full space button and behavior. */
 @Composable
-fun RequestFullSpaceIconButton(modifier: Modifier = Modifier) {
+fun RequestFullSpaceIconButton(
+    modifier: Modifier = Modifier,
+    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
+) {
     val session = LocalSession.current ?: return
 
     IconButton(
         modifier = modifier,
+        colors = colors,
         onClick = {
             session.scene.requestFullSpaceMode()
         },
     ) {
         Icon(
-            ImageVector.vectorResource(R.drawable.expand_content_24px),
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(8.dp),
+            imageVector = ImageVector.vectorResource(R.drawable.expand_content_24px),
             contentDescription = stringResource(R.string.xr_to_full_space_mode),
         )
     }

feature/creation/src/main/java/com/android/developers/androidify/creation/PromptTypePager.kt

@@ -57,6 +57,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.android.developers.androidify.data.DropBehaviourFactory
 import com.android.developers.androidify.theme.AndroidifyTheme
+import com.android.developers.androidify.theme.components.HorizontalToolbar
 import kotlinx.coroutines.launch
 
 @Composable
@@ -167,39 +168,12 @@ fun PromptTypeToolbar(
     modifier: Modifier = Modifier,
     onOptionSelected: (PromptType) -> Unit,
 ) {
-    val options = PromptType.entries
-    HorizontalFloatingToolbar(
-        modifier = modifier.border(
-            2.dp,
-            color = MaterialTheme.colorScheme.outline,
-            shape = MaterialTheme.shapes.large,
-        ),
-        colors = FloatingToolbarColors(
-            toolbarContainerColor = MaterialTheme.colorScheme.surface,
-            toolbarContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
-            fabContainerColor = MaterialTheme.colorScheme.tertiary,
-            fabContentColor = MaterialTheme.colorScheme.onTertiary,
-        ),
-        expanded = true,
-    ) {
-        options.forEachIndexed { index, label ->
-            ToggleButton(
-                modifier = Modifier,
-                checked = selectedOption == label,
-                onCheckedChange = { onOptionSelected(label) },
-                shapes = ToggleButtonDefaults.shapes(checkedShape = MaterialTheme.shapes.large),
-                colors = ToggleButtonDefaults.toggleButtonColors(
-                    checkedContainerColor = MaterialTheme.colorScheme.onSurface,
-                    containerColor = MaterialTheme.colorScheme.surface,
-                ),
-            ) {
-                Text(label.displayName, maxLines = 1)
-            }
-            if (index != options.size - 1) {
-                Spacer(Modifier.width(8.dp))
-            }
-        }
-    }
+    HorizontalToolbar<PromptType>(
+        selectedOption = selectedOption,
+        modifier = modifier,
+        label = { item -> item.displayName },
+        onOptionSelected = onOptionSelected,
+    )
 }
 
 @Preview

feature/results/build.gradle.kts

@@ -66,6 +66,7 @@ dependencies {
     implementation(libs.androidx.lifecycle.process)
     implementation(libs.mlkit.segmentation)
     implementation(libs.timber)
+    implementation(libs.androidx.xr.compose)
     ksp(libs.hilt.compiler)
 
     implementation(libs.androidx.ui.tooling)
@@ -78,6 +79,7 @@ dependencies {
 
     implementation(projects.core.theme)
     implementation(projects.core.util)
+    implementation(projects.core.xr)
     implementation(projects.data)
     implementation(projects.wear.common)
     implementation(projects.watchface)