Novità sul prodotto

I dispositivi Android si estendono senza problemi ai display collegati

Lettura di 7 minuti
Francesco Romano
Ingegnere per le relazioni con gli sviluppatori, Android

Siamo felici di annunciare un traguardo importante per avvicinare il computing mobile e desktop su Android: il supporto dei display collegati è ora disponibile a livello generale con il rilascio di Android 16 QPR3.

Come mostrato al Google I/O 2025, i display collegati consentono agli utenti di connettere i propri dispositivi Android a un monitor esterno e accedere immediatamente a un ambiente di finestre desktop. Le app possono essere utilizzate in finestre a forma libera o massimizzate e gli utenti possono svolgere più attività contemporaneamente 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 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, offrendo 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 è connesso a un display esterno, sul display connesso viene avviata una nuova sessione desktop.

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

materialDisplay.gif

Smartphone connesso 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 connesso a un display esterno, che estende la sessione desktop su entrambi i display.

Perché è importante?

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


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

In particolare, presta attenzione a queste best practice chiave per esperienze ottimali delle app sui display connessi:

  • Non presupporre un oggetto Display costante: l'oggetto Display associato al contesto della tua app può cambiare quando una finestra dell'app viene spostata su un display esterno o se la configurazione del display cambia. La tua app deve gestire correttamente gli eventi di modifica della configurazione ed eseguire query sulle metriche di visualizzazione in modo dinamico anziché memorizzarle nella cache.
  • Tieni conto delle modifiche alla 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 la UI venga scalata in modo appropriato.
  • Supporto corretto delle periferiche esterne: quando gli utenti si connettono a un monitor esterno, spesso creano un ambiente più simile a quello di un computer desktop. Ciò comporta spesso l'utilizzo di tastiere, mouse, trackpad, webcam, microfoni e altoparlanti esterni. Migliorare il supporto per le interazioni con tastiera e mouse.

Costruire il futuro del desktop con strumenti moderni

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

Nuove classi di dimensioni della finestra: Grande ed Extra large

Il più grande aggiornamento di Jetpack WindowManager 1.5.0 è l'aggiunta di due nuove classi di dimensioni della finestra in larghezza: Grande ed Extra large.

Le classi di dimensioni della finestra sono il nostro insieme ufficiale e soggettivo di punti di interruzione della finestra che ti aiutano a progettare e sviluppare layout adattivi. Con la versione 1.5.0, estendiamo queste indicazioni agli schermi che vanno oltre le dimensioni dei tablet tipici.

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 Espanso di un tablet non sempre garantisce la migliore esperienza utente. Ad esempio, un client di posta potrebbe mostrare comodamente due riquadri (una casella di posta e un messaggio) nella classe di dimensioni della finestra Espansa. Tuttavia, su un monitor desktop extra large, il client email potrebbe visualizzare elegantemente tre o anche quattro riquadri, ad esempio una casella di posta, un elenco di messaggi, i contenuti completi del messaggio e un riquadro di calendario/attività, tutto in una volta.

Per includere le nuove classi di dimensioni della finestra nel tuo progetto, chiama la funzione dal set WindowSizeClass.BREAKPOINTS_V2 anziché da WindowSizeClass.BREAKPOINTS_V1:

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

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Quindi, applica il layout corretto quando hai la certezza che la tua app abbia almeno quello spazio:

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

Crea 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 del dispositivo.

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 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, potresti definire una SceneStrategy per mostrare tre riquadri se la larghezza della finestra è sufficiente e 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 scenari e strategie, puoi aggiungere layout a una, due e tre sezioni alla tua app.

adaptivepane.gif

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

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 UI adattive come i layout elenco-dettaglio e riquadro di supporto che si adattano automaticamente alle configurazioni della finestra in base alle classi di dimensioni della finestra o alle posture del dispositivo. 

La buona notizia è che la libreria è già aggiornata con i nuovi punti di interruzione. A partire dalla versione 1.2, le direttive di scaffolding del riquadro predefinito supportano le classi di dimensioni della finestra di larghezza Grande ed 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à di visualizzazione connessa 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 del display connesso. Condividi la tua opinione 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 connessi 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 connessi sono supportati su Pixel serie 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