Lleva tu app para Android a 3D con XR

Dispositivos de realidad extendida correspondientes

Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.

Más información sobre los tipos de dispositivos de realidad extendida →

Más información sobre los tipos de dispositivos de realidad extendida →

Tu app para Android para dispositivos móviles o pantallas grandes en 2D funciona de forma predeterminada en Android XR, y se muestra como un panel en 2D dentro de un espacio en 3D. Puedes agregar funciones de RE inmersivas para mejorar tu app para Android en 2D existente y pasar 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 RE.

• Funciones espaciales: Android XR ofrece una amplia variedad de funciones espaciales disponibles para tu app, pero no es necesario que las implementes todas. Implementa de forma estratégica los 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 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 RE te brinda la flexibilidad de 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 con el objetivo de optimizar el diseño de tu app para este entorno amplio. 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 maneras de optimizar tu app para Android XR.
• Framework de IU: Te recomendamos que compiles tu IU con Jetpack Compose para RE. Si tu app se basa en vistas, consulta Cómo trabajar con vistas en XR para obtener más información sobre cómo aprovechar la interoperabilidad de Compose cuando trabajas con vistas, o bien evalúa trabajar directamente con la biblioteca de Jetpack SceneCore.
• Publicación en Play Store: Para verificar 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.
  • Verifica que tu app no esté inhabilitada para la publicación de XR en Google Play Console para evitar que se excluya de los resultados de la búsqueda de Play Store.

Cómo convertir componentes de IU 2D en 3D

Seguir estas sugerencias puede marcar una gran diferencia para que tu app se sienta como si estuviera optimizada para la RE.

• 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 RE expansivos.
• Usa las funciones espaciales de forma estratégica: Identifica los momentos clave en el 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 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 los diseños espaciales: Utiliza conceptos de IU adaptable, como paneles y revelación progresiva, para descomponer de forma 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 orbitadores para elementos de UX persistentes y contextuales, 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 fijos y no se desplazan con el contenido. Evita elevar áreas grandes para evitar molestias visuales y mantener una jerarquía visual equilibrada.

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 contrapartes 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 realizar un cambio de una 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()
}
SpatialDialog.kt

Cómo convertir un elemento emergente en un SpatialPopup

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

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

Eleva los elementos de la IU en 2D

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 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()
}
SpatialElevation.kt

Puntos clave sobre el código

• No espacialices ni eleves áreas y planos grandes, como hojas inferiores y laterales.
• No eleves los elementos de la IU que se pueden desplazar con el contenido.

Migra 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 que los usuarios accedan rápidamente a las funciones sin obstruir el contenido principal.

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

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterPosition.TopStart(
        horizontalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
        offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding))
    )
) {
    NavigationRail()
}
Orbiter.kt

Puntos clave sobre los orbitadores

• Los orbitadores son componentes diseñados para adjuntar 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 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 superior de la app o la barra inferior de la app.
• Los orbitadores no aparecen cuando la IU espacial no está habilitada. Por ejemplo, no aparecerán en el Espacio de Home 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 ubicación de los 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 del campo visual del usuario, en un ángulo de 41°.
• 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 que recomienda el sistema para los paneles.
• Los objetivos táctiles deben ser de 56 dp y no menos de 48 dp.
• Mantén las relaciones de contraste para mejorar la legibilidad, en especial si usas fondos transparentes.
• Sigue los principios de color del 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 la IU existentes.

Migra la IU en 2D a un solo panel espacial

De forma predeterminada, la app se muestra con un solo panel en el espacio principal. Obtén más información para cambiar entre el espacio principal y el 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(
            modifier = SubspaceModifier.movable().resizable(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

Migra tu IU en 2D a varios paneles espaciales

Puedes usar un solo panel espacial para la IU de tu app o migrar tu IU en 2D a varios paneles espaciales. Si decides usar varios paneles para la IU de tu app, puedes posicionarlos y rotarlos (de forma similar a como diseñarías 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 la IU espacial (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) y los modificadores de subespacio para posicionar y rotar paneles. Existen algunos patrones clave que querrás evitar cuando implementes varios paneles.

• Evita superponer paneles que impidan que el usuario vea información importante.
• Evita abrumar al usuario con paneles.
• Evita colocar paneles en ubicaciones incómodas o poco visibles. Por ejemplo, los paneles que se colocan detrás del usuario son difíciles de notar.
• Para obtener más información sobre cómo desarrollar tu IU espacial, consulta nuestra guía completa.

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()
    }
}
SpatialRow.kt

Agrega capacidades espaciales

Después de conceptualizar y comenzar a convertir tus componentes de IU en 2D en 3D, también puedes empezar a buscar otras funciones espaciales que puedes agregar a tu app para crear una experiencia más diferenciada para Android XR.

Verifica las funciones espaciales

Cuando decidas si mostrar un elemento de la IU específico, evita verificar si hay dispositivos de RE o modos 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 RE sin necesidad de actualizaciones cada vez que surjan dispositivos nuevos o cambien las capacidades.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

// Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
SpatialCapabilities.kt

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 forma 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 contenido en 3D

El contenido en 3D, como los modelos 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 funciones espaciales están disponibles, por lo que primero deberás verificar si las funciones espaciales están disponibles.

Consulta la guía correspondiente para agregar modelos 3D, videos espaciales o audio espacial.