Nos complace anunciar un hito importante para acercar la informática móvil y de escritorio en Android: la compatibilidad con pantallas conectadas ya está disponible de forma general con el lanzamiento de Android 16 QPR3.

Tal como se mostró en Google I/O 2025, las pantallas conectadas permiten a los usuarios conectar sus dispositivos Android a un monitor externo y acceder al instante a un entorno de ventanas de escritorio. Las aplicaciones se pueden usar en ventanas maximizadas o de forma libre, y los usuarios pueden realizar varias tareas a la vez como si estuvieran en un sistema operativo de escritorio.

Google y Samsung han colaborado para ofrecer una experiencia de ventanas de escritorio fluida y potente en los dispositivos del ecosistema Android que ejecutan Android 16 cuando están conectados a una pantalla externa. 
Ahora está disponible para todos los usuarios de dispositivos compatibles* que pueden conectar sus teléfonos Pixel y Samsung compatibles a monitores externos, lo que les ofrece nuevas oportunidades para crear experiencias de aplicaciones más atractivas y productivas que se adapten a diferentes factores de forma.

¿Cómo funciona?

Cuando un teléfono o un dispositivo plegable Android compatibles se conectan a una pantalla externa, se inicia una nueva sesión de escritorio en la pantalla conectada.

La experiencia en la pantalla conectada es similar a la de un ordenador, ya que incluye una barra de tareas que muestra las aplicaciones activas y permite a los usuarios fijar aplicaciones para acceder a ellas rápidamente. Los usuarios pueden ejecutar varias aplicaciones simultáneamente en ventanas de tamaño libre en la pantalla conectada.

Teléfono conectado a una pantalla externa con una sesión de escritorio en la pantalla, mientras que el teléfono mantiene su propio estado.

Cuando un dispositivo compatible con el modo Ventanas (como una tablet Samsung Galaxy Tab S11) se conecta a una pantalla externa, la sesión de escritorio se extiende a ambas pantallas, lo que permite disfrutar de un espacio de trabajo aún más amplio. Las dos pantallas funcionan como un sistema continuo, lo que permite que las ventanas de las aplicaciones, el contenido y el cursor se muevan libremente entre las pantallas.

Una tablet conectada a una pantalla externa, que extiende la sesión de escritorio a ambas pantallas.

¿Por qué es importante?

En la versión Android 16 QPR3, hemos finalizado los comportamientos de las ventanas, las interacciones de la barra de tareas y la compatibilidad con entradas (ratón y teclado) que definen la experiencia de pantalla conectada. También hemos incluido tratamientos de compatibilidad para escalar ventanas y evitar que las aplicaciones se reinicien al cambiar de pantalla.

Si tu aplicación se ha creado siguiendo los principios de diseño adaptativo, tendrá automáticamente el aspecto de una aplicación de escritorio y los usuarios se sentirán como en casa. Si la aplicación está bloqueada en orientación vertical o asume una interfaz solo táctil, es el momento de modernizarla.

En concreto, ten en cuenta estas prácticas recomendadas clave para ofrecer experiencias óptimas en aplicaciones en pantallas conectadas:

• No supongas que el objeto Display es constante: el objeto Display asociado al contexto de tu aplicación puede cambiar si una ventana de la aplicación se mueve a una pantalla externa o si cambia la configuración de la pantalla. Tu aplicación debe gestionar correctamente los eventos de cambio de configuración y consultar las métricas de visualización de forma dinámica en lugar de almacenarlas en caché.
• Ten en cuenta los cambios en la configuración de la densidad: las pantallas externas pueden tener densidades de píxeles muy diferentes a las de la pantalla principal del dispositivo. Asegúrate de que tus diseños y recursos se adapten correctamente a estos cambios para mantener la claridad y la usabilidad de la interfaz de usuario. Usa píxeles independientes de la densidad (dp) en los diseños, proporciona recursos específicos de la densidad y asegúrate de que la interfaz de usuario se adapta correctamente.
• Admite correctamente periféricos externos: cuando los usuarios se conectan a un monitor externo, suelen crear un entorno más parecido al de un ordenador. Esto suele implicar el uso de teclados, ratones, trackpads, cámaras web, micrófonos y altavoces externos. Mejorar la compatibilidad con las interacciones de teclado y ratón.

Desarrollar el futuro de los ordenadores con herramientas modernas

Ofrecemos varias herramientas para ayudarte a crear la experiencia de escritorio. Vamos a repasar las últimas actualizaciones de nuestras bibliotecas adaptativas principales.

Nuevas clases de tamaño de ventana: grande y extra grande

La mayor novedad de Jetpack WindowManager 1.5.0 es la incorporación de dos nuevas clases de tamaño de ventana de ancho: grande y extra grande.

Las clases de tamaño de ventana son nuestro conjunto oficial de puntos de interrupción de viewport que te ayudan a diseñar y desarrollar diseños adaptables. Con la versión 1.5.0, ampliamos estas directrices a pantallas que superan el tamaño de las tablets habituales.

Estos son los nuevos puntos de interrupción de ancho:

• Grande: para anchuras de entre 1200 y 1600 dp
• Extragrande: para anchuras ≥ 1600 dp

Las diferentes clases de tamaño de ventana en función de la anchura de la pantalla.

En superficies muy grandes, ampliar el diseño Expandido de una tablet no siempre ofrece la mejor experiencia de usuario. Por ejemplo, un cliente de correo podría mostrar cómodamente dos paneles (un buzón de correo y un mensaje) en la clase de tamaño de ventana Ampliada. Sin embargo, en un monitor de escritorio extragrande, el cliente de correo podría mostrar de forma elegante tres o incluso cuatro paneles a la vez: un buzón de correo, una lista de mensajes, el contenido completo del mensaje y un panel de calendario o tareas.

Para incluir las nuevas clases de tamaño de ventana en tu proyecto, solo tienes que llamar a la función desde el conjunto WindowSizeClass.BREAKPOINTS_V2 en lugar de WindowSizeClass.BREAKPOINTS_V1:

  val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

A continuación, aplica el diseño correcto cuando estés seguro de que tu aplicación tiene al menos ese espacio:

  if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

Crear diseños adaptables con Jetpack Navigation 3

Navigation 3 es la última incorporación a la colección Jetpack. Navigation 3, que acaba de lanzar su primera versión estable, es una potente biblioteca de navegación diseñada para funcionar con Compose.

Navigation 3 también es una herramienta excelente para crear diseños adaptables, ya que permite mostrar varios destinos al mismo tiempo y cambiar fácilmente entre esos diseños.

Este sistema para gestionar el flujo de la interfaz de usuario de tu aplicación se basa en Scenes. Una escena es un diseño que muestra uno o varios destinos al mismo tiempo. Un SceneStrategy determina si puede crear un Scene. Al encadenar instancias de SceneStrategy, puedes crear y mostrar diferentes escenas para distintos tamaños de pantalla y configuraciones de dispositivos.

Para los diseños canónicos predefinidos, como el de lista y detalle y el de panel complementario, puedes usar las escenas de la biblioteca adaptable de Material 3 de Compose (disponible en la versión 1.3 y posteriores).

También puedes crear tus propias escenas personalizadas fácilmente modificando las recetas de Scene o empezando desde cero. Por ejemplo, supongamos que tenemos una escena que muestra tres paneles uno al lado del otro:

  class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

En este caso, puedes definir un SceneStrategy para mostrar tres paneles si la anchura de la ventana es suficiente y las entradas de tu pila de retroceso han declarado que admiten mostrarse en una escena de tres paneles.

  class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

Puedes usar tu ThreePaneSceneStrategy con otras estrategias al crear tu NavDisplay. Por ejemplo, también podríamos añadir una TwoPaneStrategy para mostrar dos paneles uno al lado del otro cuando no haya espacio suficiente para mostrar tres.

  val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

Si no hay suficiente espacio para mostrar tres o dos paneles, ambas estrategias de escena personalizadas devuelven null.En este caso, NavDisplay vuelve a mostrar la última entrada de la pila de retroceso en un solo panel mediante SinglePaneScene. 

Con las escenas y las estrategias, puedes añadir diseños de uno, dos y tres paneles a tu aplicación.

Una aplicación adaptativa que muestra la navegación de tres paneles en pantallas grandes.

Consulta la documentación para obtener más información sobre cómo crear diseños personalizados con Escenas en Navigation 3.

Diseños adaptables independientes

Si necesitas un diseño independiente, la biblioteca adaptable de Compose Material 3 te ayuda a crear interfaces de usuario adaptables, como diseños de lista y detalle y de panel complementario, que se adaptan automáticamente a las configuraciones de la ventana en función de las clases de tamaño de la ventana o de las posturas del dispositivo. 

La buena noticia es que la biblioteca ya está actualizada con los nuevos puntos de interrupción. A partir de la versión 1.2, las funciones de la directiva de scaffold del panel predeterminadas admiten las clases de tamaño de ventana grande y extragrande.

Solo tienes que habilitar la función declarando en tu archivo de compilación de Gradle que quieres usar los nuevos puntos de interrupción:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Primeros pasos

Descubre la función de pantalla conectada en la última versión de Android. Descarga Android 16 QPR3 en un dispositivo compatible y conéctalo a un monitor externo para empezar a probar tu aplicación hoy mismo. 

Consulta la documentación actualizada sobre la compatibilidad con varias pantallas y la gestión de ventanas para obtener más información sobre cómo implementar estas prácticas recomendadas.

Comentarios

Tus comentarios son fundamentales para seguir mejorando la experiencia de escritorio de las pantallas conectadas. Envíanos tus comentarios e infórmanos de cualquier problema a través de nuestros canales oficiales de comentarios.

Nuestro compromiso es hacer de Android una plataforma versátil que se adapte a las muchas formas en que los usuarios quieren interactuar con sus aplicaciones y dispositivos. Las mejoras en la compatibilidad con pantallas conectadas son otro paso en esa dirección, y creemos que a tus usuarios les encantarán las experiencias de escritorio que crearás.

*Nota: En el momento de escribir este artículo, las pantallas conectadas son compatibles con las series Pixel 8, 9 y 10, así como con una amplia gama de dispositivos Samsung, incluidos S26, Fold7, Flip7 y Tab S11.