Picture-in-picture

Illustrazione hero del simbolo PIP e del logo di Play

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

Figura 1: i tuoi utenti possono continuare a guardare i video anche quando non sono nella tua app

Concetti principali

  • Assicurati che gli elementi dell'interfaccia utente siano nascosti e che la riproduzione video continui quando l'attività è in modalità PIP.
  • Disattiva il ridimensionamento continuo per i contenuti non video.
  • Le attività di riproduzione video con un'interfaccia utente minimale offrono la migliore esperienza utente.
  • Evita di mostrare qualsiasi elemento diverso dai contenuti video.

Aggiungere il supporto della funzionalità Picture in picture alla tua app

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

La finestra PIP viene visualizzata nel livello più in 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, impostazioni e riproduzione dei 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 visualizzati anche i controlli per riprodurre, mettere in pausa, andare avanti e indietro. Scopri come aggiungere questi controlli.

In modalità PIP, la tua attività viene visualizzata in una piccola finestra. In questa modalità, gli utenti non possono interagire con gli altri elementi dell'interfaccia utente dell'app e i dettagli degli elementi dell'interfaccia utente di piccole dimensioni nella finestra PIP potrebbero essere difficili da vedere.

Interfaccia utente che mostra i controlli predefiniti Picture in Picture

Controlli PIP predefiniti.

Esempio di controlli PIP personalizzati

Esempio di controlli PIP personalizzati.

Utilizzo

Consenti agli utenti di continuare a guardare il video non solo all'interno della tua app, ma anche su altri dispositivi. La tua app controlla quando l'attività corrente entra in modalità PIP. Può trattarsi di un'interazione come l'uscita dalla visualizzazione corrente o lo scorrimento verso l'alto per tornare alla home page.

Ecco alcuni esempi di possibili azioni:

  • Un'attività può entrare in 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 svolge un'altra attività contemporaneamente.

    Figura 4: PiP utilizzato per continuare l'esperienza di orientamento
  • La tua app può spostare un video in modalità PIP quando l'utente torna indietro dal video per sfogliare altri contenuti.

  • La tua app può passare alla modalità PIP mentre un utente guarda la fine di un episodio di contenuti. La schermata principale mostra informazioni promozionali o riassuntive sul prossimo episodio della serie.

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

Utilizza un pattern di interazione che integri l'esperienza di visualizzazione senza interromperla. Ad esempio, se un video si trova alla fine di un episodio di contenuti, l'inserimento della modalità PIP quando si esce dalla schermata Home richiederà un'azione aggiuntiva dell'utente per tornare indietro e interrompere la riproduzione o navigare tra i piccoli controlli.

Nella tua app, un utente potrebbe selezionare un nuovo video mentre cerca contenuti nella 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.

Pattern di interazione

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 delle impostazioni e azioni personalizzate fornite dall'app (ad esempio, controlli di riproduzione).

Figura 5:controlli PIP predefiniti

Tocca due volte la finestra per alternare le dimensioni correnti del PIP e quelle massime o minime del PIP. Ad esempio, se tocchi due volte una finestra ingrandita, questa viene ridotta a icona e viceversa.

Figura 6: alternare le dimensioni minime e massime della modalità PIP con un doppio tocco

Nascondi la finestra trascinandola verso il bordo sinistro o destro. Per ripristinare la finestra, tocca la parte visibile della finestra nascosta o trascinala fuori.

Figura 7: PiP nascosto

Ridimensiona la finestra PIP utilizzando il gesto di pizzicare per zoomare.

Scorri verso il basso la finestra PIP per rimuoverla.

Figura 8: scorrimento verso il basso

Transizioni

Per rendere l'esperienza utente ottimale quando si passa alla modalità PIP e si esce da questa modalità, personalizza le transizioni di entrata e uscita.

Animazione di entrata fluida in PIP

Quando un utente attiva la modalità PIP, l'attività corrente si riduce da schermo intero a una piccola finestra, che continua a mostrare i contenuti senza sovrapporsi ad alcuna interfaccia utente.

Android 12 ha introdotto miglioramenti estetici alle transizioni tra le finestre a schermo intero e PiP. Una volta implementati, questi aggiornamenti vengono scalati automaticamente su tablet e dispositivi pieghevoli.

Senza questi aggiornamenti, le transizioni sono funzionali ma meno raffinate. Ad esempio, la finestra PIP potrebbe scomparire temporaneamente durante la transizione.

A partire da Android 12, il flag PictureInPictureParams.Builder.setAutoEnterEnabled(true) offre transizioni dei gesti più fluide (ad esempio, scorrere verso l'alto per tornare alla schermata Home). Consigliamo questa opzione per le app ENTERTAINMENT, COMMUNICATION o VIDEO_PLAYER.

Senza questo flag, le transizioni dei gesti riducono la finestra all'icona dell'app prima che riappaia come finestra PIP (come mostrato nel video 1).

Esperienza di transizione meno ottimizzata quando la funzionalità PIP non ha setAutoEnterEnabled implementato correttamente

Esperienza di transizione perfezionata con setAutoEnterEnabled aggiunto all'app.

Immagini video fluide

Quando abbiamo introdotto la modalità PIP in Android 8.0, sourceRectHint indicava l'area dell'attività visibile dopo la transizione in PIP, ad esempio i limiti della visualizzazione 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 che quando si esce dalla modalità PIP.

Se la tua app non fornisce un sourceRectHint adeguato, le transizioni PIP sono comunque funzionali, ma le animazioni sono meno raffinate. Ad esempio, il video 3 mostra un esempio meno rifinito di transizione dalla modalità a schermo intero alla modalità PIP: dopo che la finestra a schermo intero si riduce alla finestra PIP, viene coperta da una sovrapposizione nera prima di mostrare nuovamente il video.

Video 3: esperienza di transizione meno ottimizzata quando la funzionalità PIP non ha sourceRectHint implementato correttamente

Per vedere un esempio di come appare l'animazione PIP quando sourceRectHint è implementato correttamente, guarda il video 2 nella sezione precedente.

Fai riferimento all'esempio di Android Kotlin PictureInPicture come riferimento per attivare un'esperienza di transizione ottimizzata.

Per saperne di più sull'implementazione della modalità PIP, consulta la documentazione per gli sviluppatori Picture in Picture.