Ya está disponible el Samsung Galaxy XR, con tecnología de Android XR. Esta entrada de blog forma parte de nuestra Semana de Destacados de Android XR, en la que proporcionamos recursos (entradas de blog, videos, código de muestra y mucho más) diseñados para ayudarte a aprender, compilar y preparar tus apps para Android XR.

Con el lanzamiento del Samsung Galaxy XR , el primer dispositivo con tecnología de Android XR ya está disponible. Ahora las personas pueden disfrutar de muchas de sus apps favoritas de Play Store en una dimensión completamente nueva: la tercera dimensión.

La tercera dimensión es espaciosa y tiene mucho lugar para tus apps. Comienza hoy mismo con las herramientas que funcionen para tu app. Por ejemplo, puedes usar el SDK de Jetpack XR para compilar experiencias de realidad extendida inmersivas con herramientas modernas de desarrollo de Android, como Kotlin y Compose.

En esta entrada de blog, te contaremos sobre nuestro propio recorrido mientras llevábamos la fantasía de nuestra querida app de Androidify a la XR, y también abarcaremos los conceptos básicos de lo que se necesita para llevar tus apps a la XR.

Un recorrido por Androidify

Androidify es una app de código abierto que te permite crear bots de Android con algunas de las tecnologías más recientes, como Gemini, CameraX, Navigation 3 y, por supuesto, Jetpack Compose. En un principio, Androidify se diseñó para verse bien en teléfonos, dispositivos plegables y tablets creando diseños adaptativos.

Androidify se ve genial en varios factores de forma

Un pilar clave de los diseños adaptables son los elementos componibles reutilizables. Jetpack Compose te ayuda a crear componentes de IU pequeños que se pueden diseñar de diferentes maneras para crear experiencias del usuario intuitivas, sin importar el tipo de dispositivo que use el usuario. De hecho, Androidify es compatible con Android XR sin modificaciones en la app.

Androidify se adapta a la XR con su diseño responsivo para pantallas grandes sin cambios de código

Las apps que no tienen un control especial para Android XR pueden realizar varias tareas en una ventana del tamaño adecuado y funcionan de manera muy similar a como lo harían en una pantalla grande. Por este motivo, Androidify ya cuenta con todas las funciones en Android XR sin necesidad de trabajo adicional. Pero no queríamos detenernos ahí, así que decidimos ir más allá y crear una app diferenciada para XR que brindara una experiencia agradable a nuestros usuarios de XR.

Cómo orientarte en la realidad extendida

Repasemos los conceptos básicos clave de Android XR, comenzando por los dos modos en los que se pueden ejecutar las apps: espacio principal y espacio completo.

En Espacio principal, se pueden ejecutar varias apps una al lado de la otra para que los usuarios puedan realizar varias tareas a la vez en diferentes ventanas. En ese sentido, se parece mucho al modo de ventanas de escritorio en un dispositivo Android de pantalla grande, pero en el espacio virtual.

En el espacio completo, la app no tiene límites de espacio y puede usar todas las funciones espaciales de Android XR, como la IU espacial y el control del entorno virtual.

Si bien puede parecer tentador hacer que tu app se ejecute solo en Espacio completo, es posible que los usuarios quieran realizar varias tareas a la vez con tu app, por lo que admitir ambos modos promueve una mejor experiencia del usuario.

Diseño para la nueva dimensión de Androidify

Una app agradable comienza con un diseño excelente. Ivy Knight, defensora principal del diseño en DevRel de Android, asumió la tarea de tomar los diseños existentes de Androidify y crear un nuevo diseño para XR. ¡Adelante, Ivy!

El diseño para XR requirió un enfoque único, pero, en realidad, tenía mucho en común con el diseño para dispositivos móviles. Comenzamos pensando en la contención: cómo organizar y agrupar nuestros elementos de la IU en el subespacio, ya sea mostrando límites claramente o insinuándolos de forma sutil. También aprendimos a adoptar todos los tamaños diferentes de los elementos de la IU espacial, que están diseñados para ajustarse y moverse en respuesta al usuario. Al igual que con Androidify, crea diseños adaptativos para que puedas dividir tus diseños en partes para tu IU espacial.

Cómo comenzar el diseño con Espacio principal

Por suerte, Android XR te permite comenzar con tu app tal como está hoy para el espacio principal, por lo que pudimos hacer la transición a los diseños expandidos de XR con solo agregar una barra de herramientas de ventana y un botón de transición de espacio completo.

También consideramos las posibles funciones de hardware y cómo interactuaría el usuario con ellas. Los diseños para dispositivos móviles de Androidify se adaptan a varias posturas, tamaños de clase y cantidad de cámaras para ofrecer más opciones de fotos. Siguiendo este modelo, también tuvimos que adaptar el diseño de la cámara para los dispositivos de auriculares. También tuvimos que hacer ajustes para que el texto funcionara y tener en cuenta la proximidad de la IU al usuario.

Diseño para el cambio más grande a Espacio completo

El cambio más grande fue el de Espacio completo, pero nos brindó el espacio más creativo para adaptar nuestro diseño. 

Androidify usa la contención visual, o paneles, para agrupar funciones con un fondo y un contorno, como el panel "Tomar o elegir una foto". También usamos componentes como la barra superior de la aplicación para crear una contención natural enmarcando los otros paneles. Por último, la contención intrínseca se sugiere por la proximidad de ciertos elementos a otros, como el botón inferior "Iniciar transformación", que está cerca del panel "Elige el color de mi bot".

Paneles espaciales diseñados para una separación sencilla Para decidir cómo adaptar tus diseños para dispositivos móviles a los paneles espaciales, intenta quitar superficies comenzando por la que está más atrás y, luego, avanza. Observa cuántos fondos puedes quitar y qué queda. Después de hacer este ejercicio para Androidify, lo que quedó fue la gran garabato verde de Android. El garabato no solo funcionó como un momento de desarrollo de la marca y un fondo, sino también como un ancla para el contenido en el espacio 3D.

Establecer este ancla facilitó imaginar cómo los elementos podían moverse a su alrededor y cómo podíamos usar la proximidad para destacar y traducir el resto de la experiencia del usuario.

Otras sugerencias de diseño para que tu app sea espacial

• Permite que las cosas no estén contenidas: Separa los componentes y dales espacio real (espacial). Es hora de darles a esos elementos de la IU un espacio para respirar.
• Quitar superficies: Oculta el fondo para ver cómo afecta a tus diseños.
• Motiva con movimiento: ¿Cómo usas las transiciones en tu app? Usa ese personaje para imaginar tu app en RV.
• Elige un ancla: No pierdas a tus usuarios en el espacio. Tener un elemento que ayude a recopilar o fundamentar la IU

Para obtener más información sobre los patrones de diseño de la IU de XR, consulta Diseño para Android XR en Android Developers.

Conceptos básicos de la IU espacial

Ahora que analizamos la experiencia de Ivy adaptando su mentalidad mientras diseñaba Androidify para XR, hablemos sobre el desarrollo de la IU espacial. Desarrollar una IU espacial con el SDK de Jetpack XR debería resultarte familiar si estás acostumbrado a trabajar con herramientas y bibliotecas modernas de Android. Encontrarás conceptos con los que ya estás familiarizado, como la creación de diseños con Compose. De hecho, los diseños espaciales son muy similares a los diseños 2D que usan filas, columnas y separadores:

Estos elementos se organizan en SpatialRows y SpatialColumns

Los elementos espaciales que se muestran aquí son elementos SpatialPanel componibles, que te permiten mostrar contenido 2D, como texto, botones y videos.

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

Un SpatialPanel es un elemento componible de subespacio. Los elementos componibles de subespacio deben estar contenidos dentro de un Subspace y se modifican con objetos SubspaceModifier. Los subespacios se pueden colocar en cualquier lugar dentro de la jerarquía de la IU de tu app y solo pueden contener elementos componibles de Subspace.Los objetos SubspaceModifier también son muy similares a los objetos Modifier: controlan parámetros como el tamaño y el posicionamiento.

Un Orbiter se puede adjuntar a un SpatialPanel y moverse junto con el contenido al que está adjunto. A menudo, se usan para proporcionar controles contextuales sobre el contenido al que están adjuntos, lo que le da al contenido el enfoque principal. Se pueden colocar en cualquiera de los cuatro lados del contenido, a una distancia configurable.

Hay muchos más elementos de IU espaciales, pero estos son los principales que usamos para crear diseños espaciales para Androidify.

Comienza a desarrollar para XR

Comencemos con la configuración del proyecto. Agregamos la dependencia de Jetpack XR Compose, que puedes encontrar en la página Dependencias de Jetpack XR.

Agregamos código para un botón que hace que el usuario pase al espacio completo, comenzando por detectar la capacidad para hacerlo:

@Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

Luego, creamos un nuevo componente de botón que usa el ícono Expandir contenido en nuestros diseños existentes y le asignamos un comportamiento onClick:

@Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

Ahora, cuando haces clic en ese botón, solo se muestra el diseño medio en el espacio completo. Podemos verificar las capacidades espaciales y determinar si se puede mostrar la IU espacial. En ese caso, mostraremos nuestro nuevo diseño espacial:

@Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

Implementación del diseño de la pantalla principal

Volvamos al diseño espacial de la pantalla principal en Espacio completo para comprender cómo se implementó.

Aquí identificamos dos elementos SpatialPanel: un panel en el que se encuentra la tarjeta de video a la derecha y otro que contiene la IU principal. Por último, hay un Orbiter conectado a la parte superior. Comencemos con el panel del reproductor de video:

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

Simplemente reutilizamos el componente VideoPlayer 2D de los diseños normales en un SpatialPanel sin cambios adicionales. A continuación, te mostramos cómo se ve por sí sola:

El panel de contenido principal siguió la misma historia: reutilizamos el contenido del panel mediano en un SpatialPanel.

SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

Le dimos a este panel un ResizePolicy, que le da al panel algunos controladores cerca de los bordes que le permiten al usuario cambiar el tamaño del panel. También tiene un MovePolicy, que permite al usuario arrastrarlo.

Colocarlos en el mismo subespacio los hace independientes entre sí, por lo que hicimos que el panel VideoPlayer sea secundario del panel de contenido principal. Esto hace que el panel VideoPlayer se mueva cuando el panel de contenido principal se arrastra a través de una relación principal-secundario.

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

Así es como hicimos la primera pantalla.

Cómo pasar a las otras pantallas

También repasaré brevemente algunas de las otras pantallas y destacaré las consideraciones específicas que se hicieron para cada una.

Aquí, usamos los elementos componibles SpatialRow y SpatialColumn para crear un diseño que se ajuste al espacio de visualización recomendado, y volvimos a usar componentes del diseño Medium.

Pantalla de resultados en espacio completo: Un bot generado con una instrucción: gorra de béisbol roja, lentes de sol de aviador, camiseta celeste, shorts a cuadros rojos y blancos, sandalias verdes y una raqueta de tenis.

La pantalla de resultados muestra las cotizaciones sin costo adicional con un efecto de difuminación, lo que permite que se desvanezcan cerca de los bordes de la pantalla. También usa una transición 3D real cuando se ve la entrada que se usó, lo que hace que la imagen se voltee en el espacio.

Publicación en Google Play Store

Ahora que la app está lista para XR con los diseños espaciales, la lanzamos en Play Store. Hay un último cambio importante que hicimos en el archivo AndroidManifest.xml de la app:

<!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

Esto le permite a Play Store saber que esta app tiene funciones diferenciadas para XR, y se muestra una insignia que les indica a los usuarios que la app se creó teniendo en cuenta la realidad extendida:

Cuando subas la versión, no necesitaremos ningún paso especial para lanzarla para XR: la misma app se distribuirá de forma normal a los usuarios del segmento para dispositivos móviles y a los usuarios de un dispositivo XR. Sin embargo, puedes agregar capturas de pantalla específicas para XR de tu app o, incluso, subir una vista previa inmersiva de ella con un recurso de video espacial. En los dispositivos Android XR, Play Store muestra automáticamente una vista previa inmersiva en 3D, lo que permite que los usuarios experimenten la profundidad y la escala de tu contenido antes de instalar la app.

Comienza a crear tus propias experiencias hoy mismo

Androidify es un excelente ejemplo de cómo espacializar una app existente de Jetpack Compose en 2D. Hoy mostramos el proceso completo de desarrollo de una IU espacial para Androidify, desde el diseño hasta el código y la publicación. Modificamos los diseños existentes para que funcionaran con paradigmas espaciales, usamos los elementos componibles SpatialPanel y Orbiter para crear diseños espaciales que se muestran cuando el usuario ingresa al espacio completo y, por último, lanzamos la nueva versión de la app en Play Store.

Esperamos que esta entrada de blog te haya ayudado a comprender cómo puedes llevar tus propias apps a Android XR. Aquí tienes algunos vínculos más que pueden ayudarte en tu camino:

• Consulta el código fuente de Androidify y crea tu propio bot con Androidify en Google Play.
• Comienza a usar nuestra documentación para desarrolladores y obtén más información sobre Jetpack Compose para XR.
• Descarga el emulador de Android XR y prueba tu propia app.