Samsung Galaxy XR ya está aquí con la tecnología de Android XR. Esta entrada de blog forma parte de nuestra semana especial de Android XR, en la que proporcionamos recursos (entradas de blog, vídeos, código de muestra y más) diseñados para ayudarte a aprender, desarrollar y preparar tus aplicaciones para Android XR.

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

La tercera dimensión es espaciosa y ofrece mucho espacio para tus aplicaciones. Empieza hoy mismo con las herramientas que mejor se adapten a tu aplicación. Por ejemplo, puedes usar el SDK Jetpack XR para crear experiencias de realidad extendida inmersivas con herramientas de desarrollo de Android modernas, como Kotlin y Compose.

En esta entrada de blog, te contaremos nuestra experiencia al llevar la fantasía de nuestra querida aplicación Androidify a la realidad extendida y te explicaremos los pasos básicos para llevar tus aplicaciones a la RE.

Un recorrido por Androidify

Androidify es una aplicación de código abierto que te permite crear robots Android con algunas de las tecnologías más recientes, como Gemini, CameraX, Navigation 3 y, por supuesto, Jetpack Compose. Androidify se diseñó inicialmente para que se viera bien en teléfonos, plegables y tablets mediante la creación de diseños adaptables.

Androidify tiene un aspecto genial en varios factores de forma

Un pilar fundamental de los diseños adaptables son los elementos componibles reutilizables. Jetpack Compose te ayuda a crear componentes de interfaz de usuario pequeños que se pueden diseñar de diferentes formas para crear experiencias de usuario intuitivas, independientemente del tipo de dispositivo que utilice el usuario. De hecho, Androidify es compatible con Android XR sin necesidad de modificar la aplicación.

Androidify se adapta a XR usando su diseño adaptable a pantallas grandes sin necesidad de cambiar el código

Las aplicaciones que no tienen un tratamiento especial para Android XR pueden realizar varias tareas en una ventana de tamaño adecuado y funcionar de forma muy similar a como lo harían en una pantalla grande. Por eso, Androidify ya incluye todas las funciones en Android XR sin necesidad de hacer nada más. Pero no queríamos quedarnos ahí, así que decidimos ir un paso más allá y crear una aplicación diferenciada para XR que ofreciera una experiencia agradable a nuestros usuarios de XR.

Orientarse en XR

Vamos a repasar los conceptos básicos clave de Android XR, empezando por los dos modos en los que se pueden ejecutar las aplicaciones: espacio compartido y Espacio completo.

En espacio compartido, se pueden ejecutar varias aplicaciones en paralelo para que los usuarios puedan realizar varias tareas en diferentes ventanas. En ese sentido, se parece mucho al modo Ventanas en un dispositivo Android con pantalla grande, pero en el espacio virtual.

En Espacio completo, la aplicación no tiene límites de espacio y puede usar todas las funciones espaciales de Android XR, como la interfaz de usuario espacial y el control del entorno virtual.

Aunque pueda parecer tentador hacer que tu aplicación solo se ejecute en el espacio completo, es posible que tus usuarios quieran realizar varias tareas a la vez con ella, por lo que admitir ambos modos ofrece una mejor experiencia de usuario.

Diseñar para la nueva dimensión de Androidify

Una aplicación fantástica empieza con un diseño genial. Ivy Knight, Senior Design Advocate de Android DevRel, se encargó de tomar los diseños de Androidify y crear un nuevo diseño para RE. ¡Adelante, Ivy!

Diseñar para XR requería un enfoque único, pero en realidad tenía mucho en común con el diseño para móviles. Empezamos pensando en la contención: cómo organizar y agrupar los elementos de la interfaz de usuario en el subespacio, ya sea mostrando los límites claramente o sugiriéndolos de forma sutil. También hemos aprendido a usar todos los tamaños de los elementos de la interfaz de usuario espacial, que están diseñados para ajustarse y moverse en función del usuario. Al igual que hicimos con Androidify, crea diseños adaptativos para que puedas dividir tus diseños en partes para tu interfaz de usuario espacial.

Empezar el diseño con espacio compartido

Por suerte, Android XR te permite empezar con tu aplicación tal como está hoy en espacio compartido, por lo que podemos pasar a los diseños XR ampliados simplemente añadiendo una barra de herramientas de ventana y un botón de transición a espacio completo.

También hemos tenido en cuenta las posibles funciones de hardware y cómo interactuaría el usuario con ellas. Los diseños para móviles de Androidify se adaptan a diferentes posturas, tamaños de clase y número 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 visores. También hemos tenido que ajustar el texto para que funcione teniendo en cuenta la proximidad de la interfaz de usuario al usuario.

Diseñar para el cambio a espacio completo

Espacio completo fue el cambio más importante, pero nos dio más margen creativo para adaptar nuestro diseño. 

Androidify usa contenedores visuales o paneles para agrupar funciones con un fondo y un contorno, como el panel "Hacer o elegir una foto". También hemos usado componentes como la barra de aplicaciones superior para crear un contenedor natural enmarcando los demás 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 para separar fácilmente el contenido. Para decidir cómo adaptar tus diseños para móviles a los paneles espaciales, prueba a quitar superficies empezando por la que esté más atrás y, después, ve avanzando. Mira cuántos fondos puedes quitar y qué queda. Después de hacer este ejercicio con Androidify, lo que quedó fue el garabato verde grande de Android. El garabato no solo actuó como elemento de marca y fondo, sino también como ancla del contenido en el espacio 3D.

Al establecer este ancla, nos resultó más fácil imaginar cómo se moverían los elementos a su alrededor y cómo podríamos usar la proximidad para salirnos de él y traducir el resto de la experiencia de usuario.

Otros consejos de diseño para que tu aplicación sea espacial

• Deja que las cosas no estén contenidas: separa los componentes y dales espacio real (espacial). Es hora de darles un poco de espacio a esos elementos de la interfaz de usuario.
• Quitar superficies: oculta el fondo para ver cómo afecta a tus diseños.
• Motiva con el movimiento: ¿cómo usas las transiciones en tu aplicación? Usa ese personaje para imaginar cómo sería tu aplicación en realidad virtual.
• Elige un ancla: no pierdas a tus usuarios en el espacio. Tener un elemento que ayude a recoger o a fundamentar la interfaz de usuario.

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

Conceptos básicos de la interfaz de usuario espacial

Ahora que hemos hablado de la experiencia de Ivy al adaptar su mentalidad mientras diseñaba Androidify para XR, vamos a hablar sobre el desarrollo de interfaces de usuario espaciales. Si estás acostumbrado a trabajar con herramientas y bibliotecas de Android modernas, te resultará familiar desarrollar una interfaz de usuario espacial con el SDK de Jetpack XR. Encontrarás conceptos que ya conoces, como la creación de diseños con Compose. De hecho, los diseños espaciales son muy similares a los diseños en 2D que usan filas, columnas y espaciadores:

Estos elementos se organizan en SpatialRows y SpatialColumns

Los elementos espaciales que se muestran aquí son composables SpatialPanel, que te permiten mostrar contenido en 2D, como texto, botones y vídeos.

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

Un SpatialPanel es un subespacio componible. Los elementos componibles de Subspace deben estar incluidos en un elemento Subspace y se modifican mediante objetos SubspaceModifier. Los subespacios se pueden colocar en cualquier lugar de la jerarquía de la interfaz de usuario de tu aplicación y solo pueden contener elementos componibles de Subspace.Los objetos SubspaceModifier también son muy parecidos a los objetos Modifier: controlan parámetros como el tamaño y la posición.

Un Orbiter se puede adjuntar a un SpatialPanel y moverse junto con el contenido al que esté adjunto. Se suelen usar para proporcionar controles contextuales sobre el contenido al que están asociados, lo que permite que el contenido sea el foco principal. Se pueden colocar en cualquiera de los cuatro lados del contenido a una distancia configurable.

Hay muchos más elementos de interfaz de usuario espacial, pero estos son los principales que hemos usado para crear diseños espaciales para Androidify.

Empezar a desarrollar para RE

Empecemos con la configuración del proyecto. Hemos añadido la dependencia de Jetpack XR Compose, que puedes encontrar en la página Dependencias de Jetpack XR.

Hemos añadido código para un botón que lleva al usuario a Espacio completo. Para ello, primero detectamos si se puede hacer:

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

Después, creamos un nuevo componente de botón que usa el icono de mostrar contenido en nuestros diseños 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, al hacer clic en ese botón, solo se muestra el diseño Medio en Espacio completo. Podemos comprobar las funciones espaciales y determinar si se puede mostrar la interfaz de usuario 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(...)
   }
}

Implementar el diseño de la pantalla de inicio

Volvamos al diseño espacial de la pantalla de inicio en Espacio completo para ver cómo se ha implementado.

Hemos identificado dos elementos SpatialPanel: uno que contiene la tarjeta de vídeo a la derecha y otro que contiene la interfaz de usuario principal. Por último, hay un Orbiter conectado en la parte superior. Empecemos con el panel del reproductor de vídeo:

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

Simplemente hemos reutilizado el componente VideoPlayer 2D de los diseños normales en un SpatialPanel sin hacer ningún cambio adicional. Así se ve de forma independiente:

El panel de contenido principal siguió la misma estrategia: 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(...)
    }
}

Hemos asignado a este panel un ResizePolicy, que le da al panel algunos controladores cerca de los bordes para que el usuario pueda cambiar su tamaño. También tiene un MovePolicy, que permite al usuario arrastrarlo.

Al colocarlos en el mismo Subspace, se independizan entre sí, por lo que hemos hecho que el panel VideoPlayer sea un elemento secundario del panel de contenido principal. De esta forma, el panel VideoPlayer se mueve cuando se arrastra el panel de contenido principal a través de una relación entre elementos superiores e inferiores.

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

Así es como hemos creado la primera pantalla.

Pasar a las otras pantallas

También repasaremos brevemente otras pantallas y destacaremos las consideraciones específicas que se han tenido en cuenta en cada una.

Aquí hemos usado los elementos componibles SpatialRow y SpatialColumn para crear un diseño que se ajuste al espacio de visualización recomendado. De nuevo, hemos reutilizado componentes del diseño Medium.

Pantalla de resultados en Espacio completo: un bot generado con la siguiente petición: gorra de béisbol roja, gafas de sol de aviador, camiseta azul claro, pantalones cortos a cuadros rojos y blancos, chanclas verdes y una raqueta de tenis.

En la pantalla de resultados se muestran las citas complementarias con un efecto de desvanecimiento, lo que permite que se difuminen cerca de los bordes de la pantalla. También usa una transición 3D real al ver la entrada que se ha usado, volteando la imagen en el espacio.

Publicar en Google Play Store

Ahora que la aplicación está lista para la RE con los diseños espaciales, la hemos publicado en Play Store. Hemos hecho un último cambio importante en el archivo AndroidManifest.xml de la aplicación:

  <!-- 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" />

De esta forma, Play Store sabrá que la aplicación tiene funciones diferenciadas de RE y mostrará una insignia que indicará a los usuarios que la aplicación se ha creado teniendo en cuenta la RE:

Cuando subas la versión, no tendrás que seguir ningún paso especial para lanzarla en XR: la misma aplicación se distribuirá de forma normal a los usuarios del canal para móviles y a los usuarios de dispositivos XR. Sin embargo, puedes añadir capturas de pantalla específicas de RE de tu aplicación o incluso subir una vista previa inmersiva de tu aplicación con un recurso de vídeo espacial. En los dispositivos Android XR, Play Store muestra automáticamente una vista previa inmersiva en 3D, lo que permite a los usuarios experimentar la profundidad y la escala de tu contenido antes de instalar la aplicación.

Empieza a crear tus propias experiencias hoy mismo

Androidify es un ejemplo excelente de cómo espacializar una aplicación de Jetpack Compose en 2D. Hoy hemos mostrado el proceso completo de desarrollo de una interfaz de usuario espacial para Androidify, desde el diseño hasta el código y la publicación. Hemos modificado los diseños para que funcionen con paradigmas espaciales, hemos usado los elementos componibles SpatialPanel y Orbiter para crear diseños espaciales que se muestran cuando el usuario entra en el espacio completo y, por último, hemos lanzado la nueva versión de la aplicación en Play Store.

Esperamos que esta entrada de blog te haya ayudado a entender cómo puedes usar tus propias aplicaciones en Android XR. Aquí tienes algunos enlaces más que pueden ayudarte:

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