Novità sui prodotti

I dispositivi Android si estendono senza problemi ai display collegati

7 minuti di lettura
Francesco Romano
Developer Relations Engineer, Android

Siamo felici di annunciare una versione principale nell'avvicinare il mobile e il desktop computing su Android: il supporto per i display collegati ha raggiunto la disponibilità generale con la Android 16 QPR3 release!

Come mostrato al Google I/O 2025, i display collegati consentono agli utenti di collegare i propri dispositivi Android a un monitor esterno e di accedere immediatamente a un ambiente di finestre delle app. Le app possono essere utilizzate in finestre in formato libero o massimizzate e gli utenti possono eseguire il multitasking proprio come su un sistema operativo desktop.

Google e Samsung hanno collaborato per offrire un'esperienza di finestre delle app fluida e potente sui dispositivi dell'ecosistema Android con Android 16 quando sono collegati a un display esterno.
Questa funzionalità è ora disponibile a livello generale sui dispositivi supportati* per gli utenti che possono collegare i propri smartphone Pixel e Samsung supportati a monitor esterni, aprendo nuove opportunità per creare esperienze app più coinvolgenti e produttive che si adattano ai vari fattori di forma.

Come funziona?

Quando uno smartphone o un dispositivo pieghevole Android supportato è collegato a un display esterno, sul display collegato viene avviata una nuova sessione desktop.

L'esperienza sul display collegato è simile a quella di un computer, inclusa una barra delle applicazioni che mostra le app attive e consente agli utenti di aggiungere app per un accesso rapido. Gli utenti possono eseguire più app una accanto all'altra contemporaneamente in finestre ridimensionabili liberamente sul display collegato.

materialDisplay.gif

Smartphone collegato a un display esterno con una sessione desktop sul display, mentre lo smartphone mantiene il proprio stato.

Quando un dispositivo che supporta le finestre delle app (ad esempio un tablet come Samsung Galaxy Tab S11) è collegato a un display esterno, la sessione desktop viene estesa a entrambi i display, sbloccando uno spazio di lavoro ancora più ampio. I due display funzionano quindi come un unico sistema continuo, consentendo alle finestre delle app, ai contenuti e al cursore di spostarsi liberamente tra i display.

materialDisplay2.gif

Tablet collegato a un display esterno, che estende la sessione desktop a entrambi i display.

Perché vuoi saperlo?

Nella release Android 16 QPR3, abbiamo finalizzato i comportamenti delle finestre, le interazioni della barra delle applicazioni e la compatibilità di input (mouse e tastiera) che definiscono l'esperienza del display collegato. Abbiamo incluso anche trattamenti di compatibilità per scalare le finestre ed evitare il riavvio delle app quando si cambiano i display.


Se la tua app è creata con i principi di progettazione adattiva, avrà automaticamente l'aspetto e l'esperienza di un computer e gli utenti si sentiranno a casa. Se l'app è bloccata in verticale o presuppone un'interfaccia solo touch, è il momento di modernizzarla.

In particolare, presta attenzione a queste best practice chiave per un'esperienza app ottimale sui display collegati:

  • Non dare per scontato un oggetto Display costante: l'oggetto Display associato al contesto dell'app può cambiare quando una finestra dell'app viene spostata su un display esterno o se la configurazione del display cambia. L'app deve gestire correttamente gli eventi di modifica della configurazione ed eseguire query sulle metriche del display in modo dinamico anziché memorizzarle nella cache.
  • Tieni conto delle modifiche della configurazione della densità: i display esterni possono avere densità di pixel molto diverse rispetto allo schermo del dispositivo principale. Assicurati che i layout e le risorse si adattino correttamente a queste modifiche per mantenere la chiarezza e l'usabilità dell'interfaccia utente. Utilizza pixel indipendenti dalla densità (dp) per i layout, fornisci risorse specifiche per la densità e assicurati che l'interfaccia utente venga scalata in modo appropriato.
  • Supporta correttamente leperiferiche esterne: quando gli utenti si connettono a un monitor esterno, spesso creano un ambiente più simile a un computer. Questo comporta spesso l'utilizzo di tastiere, mouse, trackpad, webcam, microfoni e speaker esterni. Migliora il supporto per le interazioni con tastieramouse.

Creare per il futuro del desktop con strumenti moderni

Forniamo diversi strumenti per aiutarti a creare l'esperienza desktop. Rivediamo gli ultimi aggiornamenti delle nostre librerie adattive principali.

Nuove classi di dimensioni delle finestre: Large e Extra-large

L'aggiornamento più importante di Jetpack WindowManager 1.5.0 è l'aggiunta di due nuove classi di dimensioni delle finestre in larghezza: Large e Extra-large.

Le classi di dimensioni delle finestre sono il nostro insieme ufficiale e basato su opinioni di punti di interruzione del viewport che ti aiutano a progettare e sviluppare layout adattivi. Con la versione 1.5.0, stiamo estendendo queste linee guida agli schermi che superano le dimensioni dei tablet standard.

Ecco i nuovi punti di interruzione della larghezza:

  • Large: per larghezze comprese tra 1200 dp e 1600 dp
  • Extra-large: per larghezze ≥ 1600 dp
windowClasses.png

Le diverse classi di dimensioni delle finestre in base alla larghezza del display.

Su superfici molto grandi, la semplice scalabilità del layout Expanded di un tablet non è sempre la migliore esperienza utente. Un client di posta, ad esempio, potrebbe mostrare comodamente due riquadri (una casella di posta e un messaggio) nella classe di dimensioni delle finestre Expanded. Ma su un monitor desktop Extra-large, il client di posta potrebbe visualizzare elegantemente tre o anche quattro riquadri, magari una casella di posta, un elenco di messaggi, il contenuto completo del messaggio e un riquadro di calendario/attività, tutto in una volta.

Per includere le nuove classi di dimensioni delle finestre nel tuo progetto, chiama semplicemente la funzione dal set WindowSizeClass.BREAKPOINTS_V2 anziché WindowSizeClass.BREAKPOINTS_V1:

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

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Applica quindi il layout corretto quando sei sicuro che la tua app abbia almeno questo spazio:

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

Creare layout adattivi con Jetpack Navigation 3

Navigation 3 è l'ultima aggiunta alla raccolta Jetpack. Navigation 3, che ha appena raggiunto la sua prima release stabile, è una potente libreria di navigazione progettata per funzionare con Compose.

Navigation 3 è anche un ottimo strumento per creare layout adattivi, in quanto consente di visualizzare più destinazioni contemporaneamente e di passare facilmente da un layout all'altro.

Questo sistema per la gestione del flusso dell'interfaccia utente dell'app si basa sulle scene. Una scena è un layout che mostra una o più destinazioni contemporaneamente. Una SceneStrategy determina se può creare una scena. Il concatenamento delle istanze SceneStrategy consente di creare e visualizzare scene diverse per diverse dimensioni dello schermo e configurazioni dei dispositivi.

Per i layout canonici predefiniti, come l'elenco-dettagli e il riquadro di supporto, puoi utilizzare le scene della libreria Compose Material 3 Adaptive (disponibile nella versione 1.3 e successive).

È anche facile creare le tue scene personalizzate modificando le ricette delle scene o partendo da zero. Ad esempio, consideriamo una scena che mostra tre riquadri uno accanto all'altro:

  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()
            }
        }
    }

In questo scenario, puoi definire una SceneStrategy per mostrare tre riquadri se la larghezza della finestra è sufficiente e se le voci del back stack hanno dichiarato di supportare la visualizzazione in una scena a tre riquadri.

  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
    }
}

Puoi utilizzare ThreePaneSceneStrategy con altre strategie quando crei il tuo NavDisplay. Ad esempio, potremmo anche aggiungere una TwoPaneStrategy per visualizzare due riquadri uno accanto all'altro quando non c'è spazio sufficiente per mostrarne tre.

  val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

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

Se non c'è spazio sufficiente per visualizzare tre o due riquadri, entrambe le nostre strategie di scene personalizzate restituiscono null.In questo caso, NavDisplay torna a visualizzare l'ultima voce del back stack in un singolo riquadro utilizzando SinglePaneScene.

Utilizzando scene e strategie, puoi aggiungere layout a uno, due e tre riquadri alla tua app.

adaptivepane.gif

Un'app adattiva che mostra la navigazione a tre riquadri su schermi ampi.

Consulta la documentazione per scoprire di più su come creare layout personalizzati utilizzando le scene in Navigation 3.

Layout adattivi autonomi

Se hai bisogno di un layout autonomo, la libreria Compose Material 3 Adaptive ti aiuta a creare interfacce utente adattive come i layout elenco-dettagli e riquadro di supporto che si adattano automaticamente alle configurazioni delle finestre in base alle classi di dimensioni delle finestre o alle posture dei dispositivi. 

La buona notizia è che la libreria è già aggiornata con i nuovi punti di interruzione. A partire dalla versione 1.2, le funzioni predefinite della direttiva di scaffolding del riquadro supportano le classi di dimensioni delle finestre in larghezza Large e Extra-large.

Devi solo attivare la funzionalità dichiarando nel file di build Gradle che vuoi utilizzare i nuovi punti di interruzione:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Per iniziare

Esplora la funzionalità dei display collegati nell'ultima release di Android. Scarica Android 16 QPR3 su un dispositivo supportato, quindi collegalo a un monitor esterno per iniziare a testare la tua app oggi stesso. 

Consulta la documentazione aggiornata sul supporto multi-display e sulla gestione delle finestre per scoprire di più sull'implementazione di queste best practice.

Feedback

Il tuo feedback è fondamentale per continuare a perfezionare l'esperienza desktop dei display collegati. Condividi le tue opinioni e segnala eventuali problemi tramite i nostri canali di feedback ufficiali.

Ci impegniamo a rendere Android una piattaforma versatile che si adatti ai molti modi in cui gli utenti vogliono interagire con le loro app e i loro dispositivi. I miglioramenti al supporto dei display collegati sono un altro passo in questa direzione e pensiamo che i tuoi utenti adoreranno le esperienze desktop che creerai.


*Nota: al momento della stesura dell'articolo, i display collegati sono supportati sulle serie Pixel 8, 9 e 10 e su una vasta gamma di dispositivi Samsung, tra cui S26, Fold7, Flip7 e Tab S11.

Scritto da:

Continua a leggere