Integración de las aplicaciones de Android en Surface Duo

En esta sección, analizaremos algunas maneras de probar la aplicación en pantallas dobles y, luego, mejorarla para que aproveche al máximo las pantallas y las posiciones que ofrece Surface Duo.

De forma predeterminada, la aplicación de Android se ejecutará en Surface Duo en una sola pantalla, tal como lo haría en cualquier dispositivo Android. Sin embargo, las pantallas dobles y las posiciones flexibles generan nuevas oportunidades para que la aplicación destaque. También permiten que los clientes usen tu aplicación de nuevas maneras que podrías no haber previsto.

Hay tres pasos principales que debes seguirse para integrar la aplicación en Surface Duo:

  1. Probar la aplicación: Usa el emulador de Duo para asegurarte de que funciona.
  2. Hacer cambios incrementales: Usa las API y las bibliotecas nativas de Android para que la aplicación funcione mejor en los dispositivos de doble pantalla, incluso cuando se ejecuta en paralelo en modo de pantalla única.
  3. Adopta nuevas características: Usa nuestro SDK de Surface Duo (versión preliminar) y los patrones de aplicaciones de doble pantalla para aprovechar las nuevas funcionalidades que proporciona Surface Duo.

Paso 1: Probar la aplicación

Usa el emulador de Surface Duo para probar la aplicación. De forma predeterminada, se ejecutará como una experiencia de pantalla única.

En el emulador, habilita la rotación automática en Configuración. Sigue probando la aplicación moviéndola de la pantalla izquierda a la pantalla derecha mientras giras el dispositivo en el emulador.

Si tienes algún problema, asegúrate de seguir las instrucciones de Android para pantallas de tamaño variable y asegúrate de haber establecido android:resizeableActivity="true". Para más información, consulta Compilación de aplicaciones para dispositivos plegables en developer.android.com.

Paso 2: Hacer cambios incrementales

Estos son algunos cambios que pueden añadir valor a la aplicación cuando se ejecute en un dispositivo de doble pantalla. Y como estos cambios usan las API y las bibliotecas nativas de Android, también benefician a tu aplicación en otros factores de forma de dispositivo.

Ten en cuenta la posibilidad de agregar estas características a la aplicación si aún no las tiene.

Control de todas las orientaciones y posiciones de los dispositivos

Quita un "bloqueo" específico de la orientación de la experiencia de usuario y admite todas las posiciones del dispositivo.

Adición de compatibilidad con arrastrar y colocar

Arrastrar y colocar permite a un usuario compartir datos fácilmente entre partes de una aplicación o entre diferentes aplicaciones en dos pantallas.

Sigue las instrucciones de Arrastrar y soltar en develop.android.com para implementar la función de arrastrar y colocar en tu aplicación. Usa nuestro ejemplo de arrastrar y colocar para ver cómo se hace.

Adición de compatibilidad con varias instancias

Agrega compatibilidad con varias instancias para que un usuario pueda ejecutar la aplicación con dos instancias, una en cada pantalla.

Adición de compatibilidad de imagen en imagen

Sigue las instrucciones de develop.android.com para implementar la compatibilidad con pantalla en pantalla en la aplicación.

Inicio de nuevas actividades en la otra ventana

En un dispositivo de doble pantalla, es natural iniciar una nueva actividad en la segunda pantalla. Usa la marca de intención FLAG_ACTIVITY_LAUNCH_ADJACENT para proporcionar una sugerencia al sistema para hacer esto.

Consulta Inicia nuevas actividades en el modo multiventana en developer.android.com para obtener más información sobre la marca. Usa nuestro Ejemplo de inicio de intención en la segunda pantalla para ver cómo se hace.

Paso 3: Adoptar nuevas características

Aquí es donde ocurre la magia; ahora tienes más superficie en la pantalla para mostrar la aplicación. Las API de doble pantalla están integradas en la imagen de Surface Duo en el emulador para que puedas probarlas con tu propia aplicación o con uno de nuestros ejemplos.

En la aplicación, primero determina si la aplicación se ejecuta en un dispositivo de doble pantalla. Esto te permite usar el mismo código en todos los dispositivos: no hay una versión independiente de la aplicación para Surface Duo. Cuando la aplicación se ejecuta en un dispositivo de doble pantalla, puedes usar las API de doble pantalla del SDK para mejorar la aplicación.

Distribución de la aplicación

Distribuya la aplicación en ambas pantallas para comprobar la experiencia integral del usuario.

  • ¿Cubre la costura contenido crítico de la aplicación?
  • ¿Tienes botones en el medio?
  • ¿Necesitas cambiar la posición del contenido en el diseño?

Usa la API de Máscara de visualización para que la aplicación funcione con la costura.

Ángulo de la bisagra

Puedes usar el sensor del ángulo de la bisagra para obtener información sobre el ángulo de la bisagra. Ten en cuenta si la aplicación (puede ser un juego o una aplicación de utilidades) puede usar el ángulo de la bisagra para proporcionar valor al usuario.

Uso de patrones de aplicaciones de doble pantalla

Hemos identificado varios patrones de aplicaciones de doble pantalla que permiten aprovechar el hecho de que haya dos pantallas. Piensa en qué patrón de aplicación se adapta a tu aplicación y a tus usuarios. Tenemos ejemplos para mostrar cada uno de estos patrones. Pruébalos en el emulador y use el código para ver cómo puedes implementar cada uno de ellos.

dual-screen app patterns

Estas son algunas sugerencias y consideraciones de diseño para estos patrones de aplicaciones.

Lienzo extendido

Lista y detalles

  • Proporciona un elemento seleccionado de forma predeterminada; de lo contrario, la pantalla derecha aparecerá vacía.
  • Además, ten en cuenta lo que ocurre cuando giras el dispositivo a doble horizontal. ¿Mantiene el flujo de maestro y detalles entre la pantalla superior e inferior? Se recomienda usar ambas pantallas para la vista de detalles, ya que hay más espacio para leer el contenido.
  • Ejemplo de lista y detalles

Dos páginas

  • Ten en cuenta cómo se configuran los controles deslizantes para la paginación. ¿Cambias de las páginas 1 y 2 a las páginas 2 y 3, como las tarjetas de presentación, o de las páginas 1 y 2 a las páginas 3 y 4, como si leyeras un libro?
  • Ejemplo de dos páginas

Vista doble

  • Este patrón muestra los mismos datos con dos vistas diferentes, por lo que debes asegurarte de que, al cambiar los elementos en una pantalla, la otra pantalla refleje ese cambio y mantenga el contenido sincronizado.
  • Ejemplo de vista doble

Panel complementario

  • Puedes cambiar el diseño del control en función de la orientación del dispositivo y tener una vista diferente cuando los controles se encuentren en la pantalla derecha en la posición doble vertical, frente a la pantalla inferior en doble horizontal.
  • Ejemplo del panel complementario

Destaque del trabajo

Querrás que los clientes sepan que la aplicación se ha mejorado para dispositivos de doble pantalla. Estas son algunas ideas a tener en cuenta.

  • Actualiza tu sitio web o página de la tienda en línea para que reflejen la experiencia de doble pantalla.
  • Proporciona una experiencia de primera ejecución en la aplicación y una experiencia de usuario de detección para las características de doble pantalla.
  • Ten en cuenta la posibilidad de conexión a servicios de Microsoft, como Microsoft Graph, para obtener información de los usuarios.