Portare le app Android su Surface DuoBring your Android apps to Surface Duo

In questa sezione verranno illustrati alcuni modi per testare un'app su doppi schermi e quindi ottimizzarla per sfruttare pienamente gli schermi e le posizioni disponibili con Surface Duo.In this section, we'll discuss some ways to test your app on dual-screens, and then enhance it to take full advantage of the screens and postures provided by the Surface Duo.

Per impostazione predefinita, un'app Android verrà eseguita su un solo schermo su Surface Duo esattamente come su qualsiasi dispositivo Android.By default, your Android app will run on the Surface Duo on a single screen, just as it would on any Android device. I doppi schermi e le posizioni flessibili tuttavia creano nuove opportunità per un'app. Consentono inoltre ai clienti di usare la tua app in nuovi modi che potresti non aver immaginato.However, the dual-screens and flexible postures create new opportunities for your app to stand out. They also let your customers use your app in new ways that you might not have anticipated.

Sono tre i passaggi principali da seguire per poter portare un'app su Surface Duo:There are three main steps to follow in order to bring your app to the Surface Duo:

  1. Testare l'app: usa l'emulatore Duo per assicurarti che l'app funzioni.Test your app - use the Duo Emulator to ensure it works.
  2. Apportare modifiche incrementali: usa le librerie e le API native di Android per garantire un funzionamento migliore dell'app su dispositivi a doppio schermo anche quando viene eseguita side-by-side in modalità schermo singolo.Make incremental changes - use Android Native APIs and Libraries so your app works better on dual-screen devices even when running side-by-side in single-screen mode.
  3. Adottare nuove funzionalità: usa Surface Duo Preview SDK e i modelli di app per doppio schermo per sfruttare le nuove funzionalità offerte da Surface Duo.Embrace new features - use our Surface Duo Preview SDK and dual-screen app patterns to take advantage of new capabilities provided by the Surface Duo.

Passaggio 1: Esegui il test dell'appStep 1: Test your app

Usa l'emulatore Surface Duo per testare l'app.Use the Surface Duo emulator to test your app. Per impostazione predefinita, verrà eseguita come esperienza su schermo singolo.By default, it will run as a single-screen experience.

Nell'emulatore abilita la rotazione automatica nelle impostazioni.In the emulator, enable auto-rotation in Settings. Continua a testare l'app spostandola dallo schermo di sinistra a quello di destra mentre ruoti il dispositivo nell'emulatore.Continue testing your app by moving it from the left screen to the right screen while rotating the device in the emulator.

In caso di problemi, segui le indicazioni di Android per gli schermi ridimensionabili e assicurati di aver impostato android:resizeableActivity="true".If you experience any issues, make sure you follow the Android guidance on resizable screens and make sure you've set android:resizeableActivity="true". Per altre informazioni, vedi Building apps for foldables (Creazione di app per dispositivi pieghevoli) su developer.android.com.For more info, see Building apps for foldables on developer.android.com.

Passaggio 2: Apporta modifiche incrementaliStep 2: Make incremental changes

Ecco alcune modifiche che possono aggiungere valore a un'app quando viene eseguita su un dispositivo a doppio schermo.Here are a few changes that can add value to your app when it's running on a dual-screen device. Poiché si basano sulle API e sulle librerie native di Android, queste modifiche offrono vantaggi per l'app anche per altri fattori di forma dei dispositivi.And since these changes use Android Native APIs and Libraries, they benefit your app on other device form factors, too.

Valuta l'opportunità di aggiungere queste funzionalità all'app qualora non siano già presenti.Consider adding these features to your app if it doesn't have them already.

Gestire tutti gli orientamenti e le posizioni del dispositivoHandle all device orientations and postures

Rimuovi un "blocco" di orientamento dell'esperienza utente specifico e supporta tutte le posizioni del dispositivo.Remove a specific UX orientation "lock" and support all device postures.

Aggiungere il supporto del trascinamento della selezioneAdd drag and drop support

Il trascinamento della selezione consente a un utente di condividere facilmente i dati tra le parti di un'app o tra diverse app su due schermi.Drag-and-drop lets a user easily share data between parts of an app, or between different apps on two screens.

Per implementare il trascinamento della selezione in un'app, segui le indicazioni Drag and drop (Trascinamento della selezione) su develop.android.com.Follow the Drag and drop guidance on develop.android.com to implement drag-and drop in your app. Usa l'esempio di trascinamento della selezione per vedere come funziona.Use our Drag-and-drop sample to see how it's done.

Aggiungere il supporto di più istanzeAdd multi-instance support

Aggiungi il supporto di più istanze in modo che un utente possa eseguire l'app con due istanze, una su ogni schermo.Add multi-instance support so a user can run your app with two instances, one on each screen.

Aggiungere il supporto della modalità Picture in PictureAdd picture-in-picture support

Segui le indicazioni su develop.android.com per implementare il supporto della modalità Picture in Picture in un'app.Follow the guidance on develop.android.com to implement Picture-in-picture Support in your app.

Avviare nuove attività nell'altra finestraLaunch new activities in the other window

Su un dispositivo a doppio schermo è naturale avviare una nuova attività sul secondo schermo.On a dual-screen device, it's natural to launch a new activity on the second screen. A tale scopo, usa il flag di finalità FLAG_ACTIVITY_LAUNCH_ADJACENT per fornire un suggerimento al sistema.Use the intent flag FLAG_ACTIVITY_LAUNCH_ADJACENT to provide a hint to the system to do this.

Per altre informazioni sul flag, vedi Launch New Activities in Multi-Window Mode (Avviare nuove attività in modalità a più finestre) su developer.android.com.See Launch New Activities in Multi-Window Mode on developer.android.com for more info about the flag. Usa l'esempio di avvio sul secondo schermo per vedere come funziona.Use our Launch Intent to second screen sample to see how it's done.

Passaggio 3: Adotta nuove funzionalitàStep 3: Embrace new features

Qui la magia diventa realtà: hai a disposizione ora una maggiore quantità di spazio su schermo per presentare la tua app.This is where the magic happens; you now have more screen real-estate to showcase your app. Le API per doppio schermo sono incorporate nell'immagine di Surface Duo nell'emulatore e puoi quindi provarle con la tua app o con uno degli esempi.The dual-screen APIs are built into the Surface Duo image in the emulator so you can try them out with your own app or with one of our samples.

Prima di tutto, nell'app determina se è in esecuzione su un dispositivo a doppio schermo.In your app, first determine if the app is running on a dual-screen device. In questo modo puoi usare lo stesso codice tra dispositivi. Non è disponibile una versione separata dell'app per Surface Duo.This lets you use the same code across devices--there's not a separate version of your app for Surface Duo. Quando l'app è in esecuzione su un dispositivo a doppio schermo, puoi usare le API per doppio schermo disponibili nell'SDK per migliorare l'app.When your app is running on a dual-screen device, you can use the dual-screen APIs from the SDK to enhance your app.

Attivare la modalità estesa dell'appSpan your app

Estendi l'app su entrambi gli schermi per verificare l'esperienza utente end-to-end.Span your app across both screens to check the end-to-end user experience.

  • La giunzione copre contenuto critico dell'app?Is the seam covering critical app content?
  • Sono presenti pulsanti al centro?Do you have buttons in the middle?
  • Devi riposizionare il contenuto nel layout?Do you need to reposition content in your layout?

Usa l'API della maschera di visualizzazione per fare in modo che l'app funzioni con la giunzione.Use the Display Mask API to make your app work with the seam.

Tenere conto dell'angolo della cernieraConsider the hinge angle

Per ottenere informazioni sull'angolo della cerniera, puoi usare il sensore dell'angolo della cerniera.You can use the Hinge Angle Sensor to get information about the angle of the hinge. Valuta se l'app, ad esempio un gioco oppure un'utilità o una Power App, può usare l'angolo della cerniera per fornire valore all'utente.Consider whether your app (maybe a game or utility/power app) can use the hinge angle to provide value to the user.

Usare i modelli di app per doppio schermoUse dual-screen app patterns

Sono stati identificati diversi modelli di app per doppio schermo che consentono di sfruttare la disponibilità di due schermi.We've identified several dual-screen app patterns that let you take advantage of the fact there are two screens. Considera quale modello si adatta all'app e agli utenti.Think about which app pattern fits your app and users. Sono disponibili esempi che illustrano ognuno di questi modelli.We have samples to demonstrate each of these patterns. Provali nell'emulatore e usa il codice per vedere come è possibile implementarli.Try them in the emulator, and use the code to see how you can implement each one.

modelli di app per doppio schermo

Di seguito sono riportati alcuni suggerimenti e considerazioni sulla progettazione per questi modelli di app.Here are some design considerations and tips for these app patterns.

Aree di disegno esteseExtended Canvas

Elenco-dettagliList-Detail

  • Fornisci un elemento selezionato predefinito, altrimenti lo schermo di destra risulterà vuoto.Provide a default selected item, otherwise the right screen will appear empty.
  • Valuta inoltre cosa accade quando ruoti il dispositivo in modalità orizzontale su doppio schermo.Also consider what happens when you rotate the device to dual-landscape. Il flusso Master-dettagli viene mantenuto nello schermo con orientamento dall'alto vero il basso?Does it keep the master-details flow in the top-bottom screen? È consigliabile usare entrambi gli schermi per la visualizzazione dei dettagli perché in questo modo è disponibile più spazio per la lettura del contenuto.We suggest both screens be used for the details view because there's more real-estate to read content.
  • Esempio di Elenco-dettagliList-Detail Sample

Due pagineTwo Page

  • Controlla come è configurato lo scorrimento rapido per la paginazione.Consider how the swipes are configured for pagination. Passi dalla pagina 1-2 alla pagina 2-3 come le schede scorrevoli oppure passi dalla pagina 1-2 alla pagina 3-4 come la lettura di un libro?Do you move from page 1-and-2 to page 2-and-3 like slide cards, or from page 1-and-2 to 3-and-4 like reading a book?
  • Esempio di Due pagineTwo Page Sample

Doppia visualizzazioneDual View

  • Questo modello mostra gli stessi dati con due visualizzazioni diverse, quindi assicurati che quando modifichi gli elementi su uno schermo, l'altro rifletta la modifica e mantenga sincronizzato il contenuto.This pattern shows the same data with two different views, so make sure that when you change items on one screen, the other screen reflects that change and keeps the content in sync.
  • Esempio di Doppia visualizzazioneDual View Sample

Riquadro complementareCompanion Pane

  • Puoi modificare il layout del controllo a seconda dell'orientamento del dispositivo e avere una visualizzazione diversa quando i controlli si trovano sullo schermo di destra nella posizione in modalità verticale su doppio schermo rispetto a quando si trovano sullo schermo inferiore in modalità orizzontale su doppio schermo.You can change the control's layout depending on the device orientation and have a different view when the controls are on the right screen in dual-portrait posture vs. on the bottom screen in dual-landscape.
  • Esempio di riquadro complementareCompanion Pane Sample

Mettere in evidenza il lavoroHighlight your work

Vorrai informare i clienti che l'app è stata migliorata per dispositivi a doppio schermo.You'll want to let customers know that your app is enhanced for dual-screen devices. Ecco alcune idee da prendere in considerazione.Here are a few ideas to consider.

  • Aggiorna la pagina del tuo sito Web o del tuo negozio online con l'esperienza su doppio schermo.Update your website or online store page to reflect the dual-screen experience.
  • Fornisci un'esperienza di prima esecuzione nell'app e l'esperienza utente introduttiva per le funzionalità per dispositivi a doppio schermo.Provide a First Run Experience in your app and discovery UX for dual-screen features.
  • Valuta l'opportunità di una connessione ai servizi Microsoft, ad esempio Microsoft Graph, per informazioni dettagliate per gli utenti.Consider connecting to Microsoft services such as Microsoft Graph for user insights.