Create a Spatial layout for ResultsScreen

[devbridie]

This PR adds a ResultsScreenSpatial layout for XR devices.
In particular, when using the Spatial layout, the flipping card is a 3D panel that flips out of the screen using real depth.

Screen_recording_20250917_120226.webm.mov

Screen_recording_20250917_120400.webm.mov

Screen_recording_20250917_120458.webm.mov

[gemini-code-assist]

Summary of Changes

Hello @devbridie, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the ResultsScreen by introducing a new 'Spatial' layout tailored for XR devices. This layout transforms the traditional flipping card into an interactive 3D panel, providing a more immersive and depth-aware experience. The changes also include refactoring common UI elements into reusable components, improving the modularity and maintainability of the codebase, and updating XR-related utilities to better integrate with spatial interactions.

Highlights

• New Spatial Layout for XR Devices: Introduced ResultsScreenSpatial to provide a dedicated layout for Extended Reality (XR) devices, enhancing the user experience with 3D elements.
• 3D Flipping Card: The flipping card mechanism in the Spatial layout now utilizes a 3D panel that flips out of the screen, leveraging real depth for a more immersive interaction.
• Reusable Horizontal Toolbar: Refactored the HorizontalToolbar into a generic, reusable component (core/theme/src/main/java/com/android/developers/androidify/theme/components/HorizontalToolbar.kt) to reduce code duplication across different screens, such as PromptTypePager and ResultOption.
• Enhanced Spatial Components: Updated core XR components (SpatialComponents.kt) to support onMove events for spatial panels, allowing for more interactive and dynamic spatial UI elements.
• Dynamic Layout Selection: Implemented a mechanism to dynamically determine the appropriate ResultsLayoutType (Verbose, Constrained, or Spatial) based on device capabilities and XR enablement.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new spatial layout for the ResultsScreen, designed for XR devices, which features a 3D flipping card effect. The changes are well-structured, with significant refactoring in ResultsScreen.kt to accommodate different layout types (Verbose, Constrained, and Spatial). New reusable components like HorizontalToolbar and several XR-specific composables have been added, which is a great approach. My review includes a few suggestions to improve robustness and maintainability, including a critical fix for a potential crash in BackgroundRandomQuotes and visual improvements for the new FlippablePanel.

[riggaroo]

Thanks @devbridie , looks great! Approving.. qq: we could do some movement of the text in XR, have some kind of like soft edges that it disappears into. What do you think about that?

[devbridie]

Addressed the comments:

• I've changed the text to marquee even if the text fits within the bounds. This was happening even in non-XR contexts (large desktop) where the text would not marquee because it's smaller than the width of the container.
• In the Spatial layout, the edges of the quotes panel are a little feathered!

Screen_recording_20250918_161845.webm.mov