Picture in picture

Picture in picture (PIP) è un tipo di modalità multi-finestra destinata alle attività che riproducono video a schermo intero. Consente all'utente di guardare un video in una piccola finestra fissata in un angolo dello schermo mentre naviga tra le app o sfoglia i contenuti sulla schermata principale.

Figura 1: gli utenti possono continuare la propria esperienza video anche quando non sono all'interno dell'app

Possessi guadagnati

  • Assicurati che gli elementi UI siano nascosti e che la riproduzione del video continui quando l'attività è in modalità PIP.
  • Disattiva il ridimensionamento continuo per i contenuti non video.
  • Le attività di riproduzione dei video con UI minima offrono la migliore esperienza utente.
  • Evita di mostrare qualcosa, ad eccezione dei contenuti video.

Aggiungi il supporto della funzione Picture in picture alla tua app

Per impostazione predefinita, il sistema non supporta automaticamente la funzionalità PIP per le app e deve essere dichiarata per supportare la funzionalità.

Questa finestra viene visualizzata nel livello più alto dello schermo, in un angolo scelto dal sistema.

Controlli

Per impostazione predefinita, Android fornisce controlli PIP per chiudere la finestra, espanderla di nuovo a schermo intero, le impostazioni e la riproduzione di contenuti multimediali. La tua app può aggiungere azioni personalizzate e asset icona appropriati per consentire agli utenti di interagire con i contenuti PIP.

L'utente può visualizzare questi controlli dal menu della finestra PIP toccando la finestra su un dispositivo mobile o selezionando il menu dal telecomando della TV. Se un'app ha una sessione multimediale attiva, vengono visualizzate anche le opzioni di riproduzione, messa in pausa, successiva e precedente. Scopri come aggiungere questi controlli.

In modalità PIP, le tue attività vengono visualizzate in una piccola finestra. In questa modalità gli utenti non possono interagire con gli altri elementi UI della tua app e i dettagli degli elementi UI di piccole dimensioni nella finestra PIP potrebbero essere difficili da vedere.

Figura 2: controlli PIP predefiniti


Figura 3: esempio di controlli PIP personalizzati

Transizioni

Animazione fluida PIP

Se un utente attiva la modalità PIP, l'attività corrente passa dallo schermo intero a una finestra piccola, continuando a mostrare i contenuti senza sovrapporsi all'interfaccia utente.

Android 12 ha aggiunto miglioramenti estetici significativi alle transizioni animate tra le finestre PIP e a schermo intero. Consigliamo vivamente di implementare tutte le modifiche applicabili. Dopo averle apportate, queste modifiche vengono automaticamente scalate su schermi di grandi dimensioni, come pieghevoli e tablet, senza alcuna ulteriore operazione.

Se la tua app non include questi aggiornamenti applicabili, le transizioni PIP sono comunque funzionanti, ma le animazioni sono meno raffinate. Ad esempio, il passaggio dalla modalità a schermo intero alla modalità PIP può far scomparire la finestra PIP durante la transizione prima di riapparire al termine della transizione.

A partire da Android 12, il flag PictureInPictureParams.Builder.setAutoEnterEnabled(true) offre un'animazione molto più fluida per il passaggio ai contenuti video in modalità PIP utilizzando la navigazione tramite gesti, ad esempio quando si scorre verso la schermata Home dalla modalità a schermo intero. Ti consigliamo se la tua app rientra nella categoria di app ENTERTAINMENT, COMMUNICATION o VIDEO_PLAYER.

Se la tua app non include questa modifica, le transizioni PIP con navigazione tramite gesti sono comunque funzionanti, ma le animazioni sono meno rifinite. Il video 1 mostra un esempio di questo tipo: la finestra si riduce nell'icona dell'app e scompare, poi riappare al termine della transizione.

Video 1: meno fluida esperienza di transizione quando PIP non è stato setAutoEnterEnabled implementato correttamente

Il video 2 mostra un esempio della stessa transizione, ma con setAutoEnterEnabled aggiunto all'app.

Video 2: esperienza di transizione migliorata

Immagini video fluide

Quando abbiamo introdotto la funzionalità PIP in Android 8.0, sourceRectHint indicava l'area di attività visibile dopo la transizione a PIP, ad esempio i limiti di visualizzazione del video in un video player. A partire da Android 12, il sistema operativo utilizza sourceRectHint per implementare un'animazione molto più fluida sia quando si entra e si esce dalla modalità PIP.

Se la tua app non fornisce un valore sourceRectHint corretto, le transizioni PIP sono comunque funzionanti, ma le animazioni sono meno nitide. Ad esempio, il video 3 mostra un esempio meno raffinato di una transizione dalla modalità a schermo intero alla modalità PIP: quando la finestra a schermo intero si riduce a Picture in picture, è coperta da un overlay nero prima di mostrare di nuovo il video.

Video 3: un'esperienza di transizione meno fluida quando PIP non è stato sourceRectHint implementato correttamente

Per un esempio dell'aspetto dell'animazione PIP quando sourceRectHint viene implementato correttamente, guarda il video 2 nella sezione precedente.

Fai riferimento all'esempio di Kotlin PictureInPicture per Android come riferimento per offrire un'esperienza di transizione fluida.

Utilizzo

Consenti agli utenti di continuare a guardare il video non solo all'interno della tua app, ma anche sul proprio dispositivo. L'app controlla quando l'attività corrente entra in modalità PIP. Può trattarsi di un'interazione, ad esempio di uscire dalla visualizzazione corrente o di scorrere verso l'alto per andare alla schermata Home.

Ecco alcuni esempi di possibili azioni:

  • Un'attività può attivare la modalità PIP quando l'utente tocca il pulsante Home o scorre verso l'alto fino alla schermata Home. In questo modo, Google Maps continua a mostrare le indicazioni stradali mentre l'utente esegue un'altra attività contemporaneamente.

    Figura 4: PIP utilizzato per continuare l'esperienza di individuazione della strada
  • L'app può attivare la modalità PIP quando l'utente torna indietro dal video per sfogliare altri contenuti.

  • La tua app può attivare la modalità PIP mentre un utente guarda la fine di una puntata di contenuti. Nella schermata principale vengono mostrate informazioni promozionali o di riepilogo sulla puntata successiva della serie.

  • L'app può fornire agli utenti un modo per mettere in coda altri contenuti mentre guardano un video. La riproduzione del video continua in modalità PIP mentre sulla schermata principale viene visualizzata un'attività di selezione dei contenuti.

Utilizza uno schema di interazione che si integra con l'esperienza di visualizzazione senza essere invasivi. Ad esempio, se un video si trova alla fine di una puntata di contenuti, l'inserimento di PIP quando esci dalla schermata Home richiederà un'ulteriore azione dell'utente per tornare indietro e interrompere la riproduzione o navigare nei piccoli controlli.

Nella tua app, un utente può selezionare un nuovo video quando sfoglia i contenuti sulla schermata principale, mentre un'attività di riproduzione video è in modalità PIP. Riproduci il nuovo video nell'attività di riproduzione esistente in modalità a schermo intero, anziché avviare una nuova attività che potrebbe confondere l'utente.

Gli utenti possono trascinare la finestra PIP in un'altra posizione.

  • Tocca una volta la finestra per visualizzare un pulsante di attivazione/disattivazione a schermo intero, un pulsante di chiusura, un pulsante Impostazioni e azioni personalizzate fornite dalla tua app (ad esempio i controlli di riproduzione).

    Figura 5: controlli PIP predefiniti
  • Tocca due volte la finestra per passare dalla dimensione PIP corrente alla dimensione massima o minima del PIP; ad esempio, toccando due volte una finestra ingrandita la riduce a icona; anche il contrario è vero.

    Figura 6: alternare tra PIP di dimensione minima e massima con il doppio tocco
  • Nascondere la finestra trascinandola verso il bordo sinistro o destro. Per rimuovere l'elenco dalla finestra, tocca la parte visibile della finestra nascosta o trascinala fuori.

    Figura 7: PIP accantonato
  • Ridimensiona la finestra PIP usando lo zoom pizzicando lo schermo.

  • Fai scorrere il PIP verso il basso per rimuovere la finestra.

    Figura 8: scorrimento verso il basso

Per ulteriori informazioni sull'implementazione di PIP, consulta la documentazione per gli sviluppatori relativa a Picture in picture.