Lleva tu app para Android a 3D con XR

​​

Tu app para Android 2D para dispositivos móviles o pantallas grandes funciona de forma predeterminada en Android XR y se muestra como un panel 2D dentro de un espacio 3D. Puedes agregar funciones de XR envolventes para mejorar tu app para Android 2D existente y pasar de una experiencia de pantalla plana a un entorno 3D dinámico.

Ten en cuenta estos principios importantes cuando lleves tu app para Android a la XR.

  • Funciones espaciales: Android XR ofrece una amplia variedad de funciones espaciales disponibles para tu app, pero no tienes que implementar todas las funciones. Implementa de forma estratégica 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 verdaderamente envolvente. Consulta la guía de diseño de 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 adapte sin problemas a un lienzo infinito y a ventanas de tamaño variable. 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 actualmente 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 para XR se pueda detectar en Play Store, haz lo siguiente: 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

Sugerencias para convertir componentes de IU 2D a 3D

Seguir estas sugerencias puede marcar una gran diferencia en la sensación de que tu app está 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 de tu app en los que la incorporación de funciones espaciales mejorará la experiencia y aprovechará 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 sientan abrumados 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 contextuales y persistentes, como la navegación y los controles. Limita el uso de orbitadores para mantener la claridad y evitar el desorden.
  • Usa la elevación con prudencia: Aplica la elevación espacial a los componentes temporales que permanecen inmóviles y no se desplazan con el contenido. Evita elevar áreas grandes para evitar 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 adaptables, puedes agregar el wrapper "EnableXrComponentOverrides" para habilitar los cambios de XR en tu app. Para obtener más información, lee nuestra documentación de Material Design para XR.

Jetpack Compose para XR presenta nuevos componentes que administran las mejoras de XR para que no tengas que hacerlo. Por ejemplo, puedes usar SpatialPopup y SpatialDialog para reemplazar sus contrapartes 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 línea para reemplazar el elemento de la IU 2D correspondiente.

Convierte un diálogo en SpatialDialog

// Previous approach
Dialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

Cómo convertir un menú emergente en SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

Elementos de la IU 2D elevados

Cuando quieras elevar la IU con un control más detallado, proporcionamos SpatialElevation para que puedas elevar cualquier elemento componible de tu app a un nivel por encima del panel espacial en el eje Z que configuraste 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(spatialElevationLevel = 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 eleve 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 contienen controles para el contenido dentro de los paneles espaciales. Permiten que el contenido tenga más espacio y les 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 a XR)

En el siguiente código de ejemplo, se muestra cómo puedes migrar un componente de IU 2D a un orbitador.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Start
) {
    NavigationRail()
}

Puntos clave sobre los orbitadores

  • Los orbitadores son componentes diseñados para conectar elementos de la IU existentes a un panel espacial.
  • Consulta nuestra guía de diseño de apps para Android XR para verificar qué elementos se deben migrar para los orbitadores y qué patrones se deben evitar.
  • Recomendamos adaptar 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 satélites en órbita no aparecen cuando la IU espacial no está habilitada. Por ejemplo, no aparecerán en Home Space ni en dispositivos como teléfonos, tablets y dispositivos plegables.

Cómo migrar 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 de elementos de la IU, componentes interactivos y contenido envolvente. Cuando diseñas, puedes agregar componentes como orbitadores para los controles del usuario y elevar espacialmente los elementos de la IU para llamar la atención a 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 los paneles y qué patrones evitar.
  • Sigue las prácticas recomendadas para la colocación de paneles espaciales:
    • Los paneles deben aparecer en el centro a 1.5 m de los ojos del usuario.
    • El contenido debe aparecer en el centro de 41° del campo de visión del usuario.
  • Los paneles permanecen en su lugar mientras el usuario se mueve. El anclaje solo está disponible para la transferencia.
  • Usa las esquinas redondeadas de 32 dp recomendadas para los paneles.
  • Los objetivos táctiles deben tener 56 dp y no ser más pequeños que 48 dp.
  • Mantén las relaciones de contraste para facilitar la legibilidad, en especial si usas fondos transparentes.
  • Sigue los principios de color de diseño de Android y usa el sistema de colores de Material Design para implementar temas oscuros y claros en tu app.
  • Usa la API de paneles espaciales con elementos de IU existentes.

Cómo migrar la IU 2D a un solo panel espacial

De forma predeterminada, tu app se muestra con un solo panel en Home Space. Obtén información para realizar la transición entre el espacio principal y el espacio completo. Para llevar ese contenido al espacio completo, puedes usar SpatialPanel.

Este es un ejemplo de cómo puedes hacerlo.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {    
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
         ) {
            AppContent(appContainer, widthSizeClass)
        }
    }
} else {
    AppContent(appContainer, widthSizeClass)
}

Cómo migrar 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 posicionar y rotar los paneles (análogo a la disposición de la IU en 2D). Comenzarás con una visión de diseño clara de lo que deseas 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 querrás evitar cuando implementes varios paneles.

  • Evita superponer paneles que impidan que el usuario vea información crítica.
  • Evita abrumar al usuario con paneles.
  • Evita colocar paneles en posiciones incómodas o imperceptibles. Ejemplo: Los paneles ubicados detrás del usuario son difíciles de notar.
  • Para obtener más información sobre el desarrollo de tu IU espacial, consulta nuestra guía completa.
Contenido no espacializado
Controles de contenido multimedia espacializados (adaptados a XR) dentro de un orbitador y contenido dividido en varios paneles espaciales
SpatialRow(curveRadius = 825.dp) {
    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. La verificación de 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 aparezcan 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 los entornos. Agregar un entorno en el código es un cambio sencillo que puedes realizar sin afectar de manera significativa la IU existente de tu app. Para obtener más información sobre la configuración de entornos, asegúrate de consultar nuestra guía completa.

Agrega modelos 3D

El contenido en 3D puede ayudar a crear una experiencia más envolvente y agregar comprensión espacial. Al igual que otras funciones espaciales y 3D, tu app solo puede mostrar modelos 3D cuando el contenido 3D está habilitado, por lo que debes asegurarte de que tu app siga proporcionando una experiencia excelente sin los objetos 3D que agregues.

Agrega modelos 3D con SceneViewer

Cuando quieras presentar modelos 3D a tus usuarios, existen varias formas de abordar el problema. Cuando tengas un glTF listo para usar en tu servidor, la forma más directa es usar SceneViewer XR. Para ello, crea un intent explícito, que iniciará la aplicación de SceneViewer XR en el dispositivo. Esto le permitirá al usuario ver el objeto y moverlo y cambiar su tamaño libremente en su entorno.

Agrega modelos 3D directamente con el volumen de entidades

Cuando quieras tener más control sobre elementos como la posición del modelo 3D, el tamaño relativo o las animaciones detalladas, puedes cargar un recurso glTF directamente en tu app. Una vez que se cargue el modelo 3D, puedes usar el elemento componible de volumen para unir una entidad de modelo glTF y aplicar modificadores de subespacio para controlar cómo se presenta. El uso de Volume te permite colocar modelos 3D de forma declarativa en relación con tu IU espacial. Para obtener más información sobre cómo mostrar modelos 3D en tu app, consulta Cómo crear, controlar y administrar entidades.