Tu app para Android de pantalla grande o para dispositivos móviles en 2D funciona de forma predeterminada en Android XR y se muestra como un panel en 2D dentro de un espacio 3D. Puedes agregar funciones de XR inmersivas para mejorar tu app existente para Android en 2D y hacer la transición de una experiencia de pantalla plana a un entorno dinámico en 3D.
Ten en cuenta estos principios importantes cuando lleves tu app para Android a la XR.
- Capacidades espaciales: Android XR ofrece una amplia variedad de funciones espaciales disponibles para tu app, pero no es necesario que implementes todas las capacidades. Implementa estratégicamente aquellos que complementen la jerarquía visual, los diseños y los recorridos del usuario de tu app. Considera incorporar entornos personalizados y varios paneles para crear una experiencia realmente inmersiva. Consulta la guía de diseño de la IU espacial para determinar la integración óptima de los elementos espaciales.
- IU adaptable: La XR te brinda la flexibilidad para diseñar una IU espaciosa que se adapta sin problemas a un lienzo infinito y a ventanas que se pueden cambiar de tamaño libremente. Una de las consideraciones más importantes es usar nuestra guía de diseño para pantallas grandes para optimizar el diseño de tu app para este entorno expansivo. Incluso si tu app solo está disponible para dispositivos móviles, puedes usar entornos cautivadores para mejorar la experiencia del usuario, pero una IU optimizada para pantallas grandes es una de las mejores formas de optimizar tu app para Android XR.
- Framework de IU: Te recomendamos que construyas tu IU con Jetpack Compose para XR. Si tu app depende de Views, consulta Cómo trabajar con Views en XR para obtener más información sobre cómo aprovechar la interoperabilidad de Compose cuando trabajas con Views, o bien evalúa trabajar directamente con la biblioteca de Jetpack SceneCore.
- Publicación en Play Store: Para asegurarte de que tu app mejorada con XR se pueda descubrir en Play Store, haz lo siguiente:
- Considera optimizar tu app quitando los requisitos de funciones innecesarios.
- Asegúrate de que tu app no esté inhabilitada para la publicación de contenido en XR desde Google Play Console para evitar que se excluya de los resultados de la búsqueda de Play Store.
Sugerencias para convertir componentes de IU 2D a 3D
Seguir estas sugerencias puede marcar una gran diferencia para que tu app se sienta optimizada para XR.
- Prioriza la compatibilidad con pantallas grandes: Asegúrate de que la IU de tu app cumpla con los principios de diseño para pantallas grandes para garantizar una legibilidad óptima del texto y el contenido en entornos de XR expansivos.
- Usa las funciones espaciales de forma estratégica: Identifica los momentos clave del recorrido del usuario en tu app en los que incorporar funciones espaciales mejorará la experiencia y aprovecha las capacidades únicas de la plataforma.
- Coloca los paneles espaciales teniendo en cuenta la comodidad del usuario: Cuando diseñes tu diseño con paneles espaciales, colócalos a una distancia cómoda del usuario para evitar que se sienta abrumado o demasiado cerca.
- Usa una IU adaptable para diseños espaciales: Utiliza conceptos de IU adaptable, como paneles y revelación progresiva, para descomponer de manera eficaz tu diseño en varios paneles espaciales y optimizar la presentación de la información.
- Usa orbitadores para elementos y patrones persistentes: Reserva los orbitadores para elementos de UX persistentes y contextuales, como la navegación y los controles. Limita el uso de los orbitadores para mantener la claridad y evitar el desorden.
- Usa la elevación con criterio: Aplica elevación espacial a los componentes temporales que permanecen fijos y no se desplazan con el contenido. Evita elevar áreas grandes para prevenir la incomodidad visual y mantener una jerarquía visual equilibrada.
- Compila con Material Design: Si compilas con la versión alfa más reciente de los componentes de Material Design y los diseños adaptativos, puedes agregar el wrapper "EnableXrComponentOverrides" para habilitar los cambios de XR en tu app. Lee nuestra documentación sobre Material Design para XR para obtener más información.
Jetpack Compose para XR presenta nuevos componentes que administran las mejoras de XR para que no tengas que hacerlo tú. Por ejemplo, puedes usar SpatialPopup y SpatialDialog para reemplazar sus equivalentes en 2D. Estos componentes aparecen como una IU 2D típica cuando la IU espacial no está disponible y muestran la IU espacial de tu app cuando pueden. Usarlos es tan sencillo como hacer un cambio de una sola línea para reemplazar el elemento de la IU en 2D correspondiente.
Cómo convertir un diálogo en SpatialDialog
// Previous approach Dialog( onDismissRequest = onDismissRequest ) { MyDialogContent() } // New XR differentiated approach SpatialDialog( onDismissRequest = onDismissRequest ) { MyDialogContent() }
Cómo convertir un elemento emergente en SpatialPopup
// Previous approach Popup(onDismissRequest = onDismissRequest) { MyPopupContent() } // New XR differentiated approach SpatialPopup(onDismissRequest = onDismissRequest) { MyPopupContent() }
Cómo elevar elementos de la IU en 2D
Cuando quieras elevar la IU con un control más detallado, te proporcionamos SpatialElevation para que puedas elevar cualquier elemento componible de tu app a un nivel superior al panel espacial en el eje Z que establezcas con SpatialElevationLevel.
Esto ayuda a captar la atención del usuario, crea una mejor jerarquía y mejora la legibilidad, como se muestra en el siguiente ejemplo.
// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr). SpatialElevation(elevation = SpatialElevationLevel.Level4) { ComposableThatShouldElevateInXr() }
Puntos clave sobre el código
- No espacialices ni eleves áreas y planos grandes, como las hojas inferiores y las hojas laterales.
- No eleves los elementos de la IU que se pueden desplazar con el contenido.
Cómo migrar componentes 2D a orbitadores
Los orbitadores son elementos flotantes que suelen contener controles con los que el usuario puede interactuar. Los orbitadores se pueden anclar a paneles espaciales o a otras entidades, como diseños espaciales. Permiten que el contenido tenga más espacio y brindan a los usuarios acceso rápido a las funciones sin obstruir el contenido principal.
Riel de navegación no espacializado
Riel de navegación espacializado (adaptado para XR)
En el siguiente código de ejemplo, se muestra cómo podrías migrar un componente de IU 2D a un orbitador.
// Previous approach NavigationRail() // New XR differentiated approach Orbiter( position = ContentEdge.Start, offset = dimensionResource(R.dimen.start_orbiter_padding), alignment = Alignment.Top ) { NavigationRail() }
Puntos clave sobre los orbitadores
- Los orbitadores son componentes diseñados para adjuntar elementos de IU existentes a un panel espacial.
- Consulta nuestra guía de diseño de apps para Android XR para verificar qué elementos migrar para los orbitadores y qué patrones evitar.
- Te recomendamos que adaptes solo algunos componentes de navegación, como el riel de navegación, la barra de la app superior o la barra de la app inferior.
- Los orbitadores no aparecen cuando la IU espacial no está habilitada. Por ejemplo, no aparecerán en el espacio personal ni en dispositivos como teléfonos, tablets y plegables.
Migra componentes 2D a paneles espaciales
Los paneles espaciales son los componentes básicos de la IU de las apps para Android XR.
Los paneles sirven como contenedores para elementos de la IU, componentes interactivos y contenido envolvente. Cuando diseñes, puedes agregar componentes como orbitadores para los controles del usuario y elevar espacialmente los elementos de la IU para llamar la atención sobre interacciones específicas.
Puntos clave sobre el código
- Consulta la guía de diseño de apps para Android XR para verificar qué elementos migrar a paneles y qué patrones evitar.
- Sigue las prácticas recomendadas para la colocación de paneles espaciales:
- Los paneles deben aparecer a 1.5 m del centro de los ojos del usuario.
- El contenido debe aparecer en el centro de 41° del campo visual del usuario.
- Los paneles permanecen en su lugar mientras el usuario se mueve. El anclaje solo está disponible para la transmisión directa.
- Utiliza las esquinas redondeadas de 32 dp recomendadas por el sistema para los paneles.
- Los objetivos táctiles deben tener 56 dp y no menos de 48 dp.
- Mantén las relaciones de contraste para facilitar la legibilidad, en especial si usas fondos transparentes.
- Sigue los principios de color del diseño de Android y usa el sistema de color de Material Design para implementar temas oscuros y claros en tu app.
- Usar la API de paneles espaciales con elementos de la IU existentes
Migra la IU 2D a un solo panel espacial
De forma predeterminada, tu app se muestra con un solo panel en el espacio principal. Obtén más información para cambiar entre el modo de espacio principal y el modo de espacio completo. Para llevar ese contenido a Full Space, puedes usar SpatialPanel.
Este es un ejemplo de cómo podrías hacerlo.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { Subspace { SpatialPanel( dragPolicy = MovePolicy(), resizePolicy = ResizePolicy(), ) { AppContent() } } } else { AppContent() }
Migra tu IU 2D a varios paneles espaciales
Puedes usar un solo panel espacial para la IU de tu app o migrar tu IU 2D a varios paneles espaciales. Si decides usar varios paneles para la IU de tu app, puedes posicionarlos y rotarlos (de forma análoga a la disposición de tu IU en 2D). Comenzarás con una visión de diseño clara de lo que quieres lograr y, luego, podrás usar las APIs de diseño de IU espacial (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) y los modificadores de subespacio para posicionar y rotar paneles.
Hay algunos patrones clave que deberás evitar cuando implementes varios paneles.
- Evita los paneles superpuestos que impidan que el usuario vea información importante.
- Evita abrumar al usuario con paneles.
- Evita colocar paneles en posiciones incómodas o imperceptibles. Ejemplo: Es difícil notar los paneles colocados detrás del usuario.
- Para obtener más información sobre el desarrollo de tu IU espacial, consulta nuestra guía completa.
Contenido no espacializado
Controles multimedia espacializados (adaptados para XR) dentro de un orbitador y contenido dividido en varios paneles espaciales
SpatialRow { SpatialPanel( SubspaceModifier .width(384.dp) .height(592.dp) ) { StartSupportingPanelContent() } SpatialPanel( SubspaceModifier .height(824.dp) .width(1400.dp) ) { App() } SpatialPanel( SubspaceModifier .width(288.dp) .height(480.dp) ) { EndSupportingPanelContent() } }
Verifica las capacidades espaciales
Cuando decidas si mostrar un elemento de la IU específico, evita verificar dispositivos o modos de XR específicos. Verificar dispositivos o modos en lugar de capacidades puede causar problemas cuando las capacidades de un dispositivo determinado cambian con el tiempo. En su lugar, usa LocalSpatialCapabilities.current.isSpatialUiEnabled para verificar directamente las capacidades de espacialización necesarias, como se muestra en el siguiente ejemplo.
Este enfoque garantiza que tu app se adapte correctamente a una amplia variedad de experiencias de XR sin necesidad de actualizaciones cada vez que surjan nuevos dispositivos o cambien las capacidades.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { SupportingInfoPanel() } else { ButtonToPresentInfoModal() } // Similar check for audio val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
Usa entornos para cambiar el entorno del usuario
Cuando quieras crear una sensación de inmersión en tu app cambiando el entorno del usuario, puedes hacerlo con entornos. Agregar un entorno en el código es un cambio sencillo que puedes realizar sin afectar significativamente la IU existente de tu app. Para obtener más información sobre la configuración de entornos, consulta nuestra guía completa.
Agrega contenido 3D
El contenido en 3D, como los modelos en 3D y los videos espaciales, puede ayudar a crear una experiencia más envolvente y agregar comprensión espacial. Tu app solo puede mostrar contenido en 3D cuando las capacidades espaciales están disponibles, por lo que primero deberás verificar si las capacidades espaciales están disponibles.
Consulta la guía correspondiente para agregar modelos 3D, video espacial o audio espacial.