Picture-in-picture

Ilustração principal do símbolo PiP e do logotipo do Google Play

O picture-in-picture (PIP) é um tipo de modo de várias janelas destinado a atividades que exibem vídeos em tela cheia. Ele permite que o usuário assista um vídeo em uma pequena janela fixada em um canto da tela enquanto navega entre apps ou pelo conteúdo na tela principal.

Figura 1:os usuários podem continuar assistindo vídeos mesmo quando não estão no seu app

Aprendizados

  • Verifique se os elementos da interface estão ocultos e se a reprodução de vídeo continua quando a atividade está no modo picture-in-picture.
  • Desative o redimensionamento contínuo de conteúdos que não são de vídeo.
  • As atividades de reprodução de vídeo com IU mínima proporcionam a melhor experiência do usuário.
  • Evite mostrar qualquer coisa que não seja o conteúdo do vídeo.

Adicionar suporte a picture-in-picture ao seu app

Por padrão, o sistema não é automaticamente compatível com o picture-in-picture para apps e precisa ser declarado para oferecer suporte ao recurso.

A janela do picture-in-picture é exibida na camada superior da tela, em um canto definido pelo sistema.

Controles

Por padrão, o Android oferece controles de PiP para fechar a janela, expandir para tela cheia, configurações e reprodução de mídia. Seu app pode adicionar ações personalizadas e recursos de ícones adequados para permitir que os usuários interajam com o conteúdo PiP.

O usuário pode mostrar esses controles no menu da janela PIP tocando nela em um dispositivo móvel ou selecionando o menu no controle remoto da TV. Se um app tiver uma sessão de mídia ativa, os controles de tocar, pausar, próxima e anterior também serão exibidos. Saiba como adicionar esses controles.

No modo picture-in-picture, sua atividade é exibida em uma pequena janela. Os usuários não podem interagir com outros elementos da interface do app nesse modo, e os detalhes de elementos pequenos na janela picture-in-picture podem ser difíceis de ver.

Interface do usuário mostrando os controles padrão de picture-in-picture

Controles padrão de PiP.

Exemplo de controles personalizados de PiP

Exemplo de controles personalizados de PiP.

Uso

Permita que os usuários continuem assistindo o vídeo não apenas no seu app, mas em todo o dispositivo. Seu app controla quando a atividade atual entra no modo picture-in-picture. Isso pode ser uma interação, como sair da visualização atual ou deslizar para cima e voltar à tela inicial.

Confira alguns exemplos de ações possíveis:

  • Uma atividade pode entrar no modo picture-in-picture quando o usuário toca no botão home ou desliza para cima até a tela inicial. É assim que o Google Maps continua exibindo rotas enquanto o usuário executa outra atividade ao mesmo tempo.

    Figura 4:PiP usado para continuar a experiência de navegação

  • Seu app pode colocar um vídeo no modo picture-in-picture quando o usuário sai do vídeo para procurar outro conteúdo.

  • O app pode alternar um vídeo para o modo picture-in-picture enquanto um usuário assiste o final de um episódio de conteúdo. A tela principal exibe informações promocionais ou resumidas sobre o próximo episódio da série.

  • Seu app pode oferecer uma forma de os usuários colocarem outros conteúdos em fila enquanto assistem a um vídeo. O vídeo continuará em exibição no modo picture-in-picture enquanto a tela principal mostra uma atividade de seleção de conteúdo.

Use um padrão de interação que complemente a experiência de visualização sem ser disruptivo. Por exemplo, se um vídeo estiver no final de um episódio de conteúdo, entrar no PIP ao sair da tela inicial vai exigir mais ações do usuário para retornar e interromper a reprodução ou navegar por controles pequenos.

No seu app, um usuário pode selecionar um novo vídeo ao navegar pelo conteúdo na tela principal, enquanto uma atividade de reprodução de vídeo estiver no modo picture-in-picture. Abra o novo vídeo na atividade de reprodução existente no modo de tela cheia em vez de iniciar uma nova atividade que poderia confundir o usuário.

Padrões de interação

É possível arrastar a janela de picture-in-picture para outro local.

Toque uma vez na janela para exibir um botão de alternância de tela cheia, um botão "Fechar", um botão de configurações e ações personalizadas fornecidas pelo seu app, por exemplo, controles de reprodução.

Figura 5:controles padrão de PiP

Toque duas vezes na janela para alternar entre o tamanho atual e o máximo ou mínimo do picture-in-picture. Por exemplo, tocar duas vezes em uma janela maximizada a minimiza e vice-versa.

Figura 6:alternar entre o tamanho mínimo e máximo do PiP com um toque duplo

Oculte a janela arrastando-a para a borda esquerda ou direita. Para retomar a janela, toque na parte visível da janela oculta ou arraste-a.

Figura 7:PiP recolhido

Redimensione a janela picture-in-picture usando o gesto de pinça para aplicar zoom.

Deslize o PIP para baixo para remover a janela.

Figura 8:deslizar para baixo

Transições

Para melhorar a experiência do usuário ao entrar e sair do modo PiP, personalize as transições de entrada e saída.

Animação suave de entrada no modo picture-in-picture

Quando um usuário ativa o modo PIP, a atividade atual é reduzida de tela cheia para uma pequena janela, que continua mostrando o conteúdo sem sobrepor nenhuma interface.

O Android 12 introduziu melhorias estéticas nas transições entre janelas de tela cheia e picture-in-picture. Depois de implementadas, essas atualizações são dimensionadas automaticamente para tablets e dispositivos dobráveis.

Sem essas atualizações, as transições funcionam, mas são menos refinadas. Por exemplo, a janela PiP pode desaparecer temporariamente durante a transição.

A partir do Android 12, a flag PictureInPictureParams.Builder.setAutoEnterEnabled(true) oferece transições de gestos mais suaves, como deslizar para cima para ir à tela inicial. Recomendamos isso para apps de ENTERTAINMENT, COMMUNICATION ou VIDEO_PLAYER.

Sem essa flag, as transições de gestos minimizam a janela para o ícone do app antes de ela reaparecer como a janela picture-in-picture (conforme mostrado no Vídeo 1).

Experiência de transição menos refinada quando o PiP não tem setAutoEnterEnabled implementado corretamente

Experiência de transição refinada com setAutoEnterEnabled adicionada ao app.

Visuais de vídeo suaves

Quando apresentamos o PIP no Android 8.0, sourceRectHint indicava a área da atividade que fica visível após a transição para o PIP. Por exemplo, os limites da visualização de vídeo em um player de vídeo. A partir do Android 12, o SO usa sourceRectHint para implementar uma animação muito mais suave ao entrar e sair do modo picture-in-picture.

Se o app não fornecer um sourceRectHint adequado, as transições de PIP ainda vão funcionar, mas as animações serão menos refinadas. Por exemplo, o vídeo 3 mostra um exemplo menos refinado de uma transição do modo de tela cheia para o PIP: depois que a janela de tela cheia diminui para a janela PIP, ela é coberta por uma sobreposição preta antes de revelar o vídeo novamente.

Vídeo 3:experiência de transição menos refinada quando o PiP não tem sourceRectHint implementado corretamente

Para ver um exemplo de como a animação picture-in-picture aparece quando sourceRectHint é implementado corretamente, assista ao vídeo 2 na seção anterior.

Consulte a amostra PictureInPicture do Android Kotlin como uma referência para ativar uma experiência de transição refinada.

Para mais informações sobre a implementação do PiP, consulte a documentação para desenvolvedores sobre picture-in-picture.