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 conteúdo na tela principal.
Takeaways
- Confira se os elementos da interface estão ocultos e se a reprodução do vídeo continua quando a atividade está no modo picture-in-picture.
- Desativar o redimensionamento contínuo de conteúdos que não são de vídeo.
- As atividades de reprodução de vídeo com interface mínima oferecem a melhor experiência do usuário.
- Evite mostrar nada, exceto o conteúdo do vídeo.
Adicionar suporte ao picture-in-picture ao seu app
Por padrão, o sistema não oferece suporte automático ao picture-in-picture para apps e precisa ser declarado para oferecer suporte ao recurso.
A janela do picture-in-picture aparece na camada superior da tela, em um canto escolhido pelo sistema.
Controles
Por padrão, o Android oferece controles de picture-in-picture para fechar a janela, expandindo-a de volta para tela cheia, configurações e reprodução de mídia. O app pode adicionar ações personalizadas e recursos de ícone adequados para permitir que os usuários interajam com o conteúdo do picture-in-picture.
O usuário pode mostrar esses controles no menu da janela do picture-in-picture tocando na janela 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 reprodução, pausa, próxima e anterior também serão mostrados. 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 os outros elementos da interface do app nesse modo e os detalhes de pequenos elementos da interface na janela do picture-in-picture podem ser difíceis de ver.
Transições
Animação de entrada suave no picture-in-picture
Um usuário que aciona o modo picture-in-picture faz com que a atividade atual diminua da tela cheia para uma janela pequena, que continua mostrando o conteúdo sem sobrepor nenhuma interface.
O Android 12 adicionou melhorias estéticas significativas às transições animadas entre tela cheia e janelas picture-in-picture. É altamente recomendável implementar todas as mudanças aplicáveis. Depois de fazer isso, essas mudanças são dimensionadas automaticamente para telas grandes, como dobráveis e tablets, sem precisar fazer mais nada.
Se o app não incluir essas atualizações aplicáveis, as transições de picture-in-picture ainda vão funcionar, mas as animações serão menos refinadas. Por exemplo, a transição da tela cheia para o modo picture-in-picture pode fazer com que a janela do picture-in-picture desapareça durante a transição antes de reaparecer quando a transição for concluída.
No Android 12 e versões mais recentes, a flag
PictureInPictureParams.Builder.setAutoEnterEnabled(true) oferece
animação muito mais suave para a transição para conteúdo de vídeo no modo picture-in-picture usando
a navegação por gestos, por exemplo, ao deslizar da tela cheia para cima.
Recomendamos isso se o app se enquadra na categoria ENTERTAINMENT, COMMUNICATION ou
VIDEO_PLAYER.
Se o app não incluir essa mudança, as transições picture-in-picture com navegação por gestos ainda vão funcionar, mas as animações serão menos refinadas. O vídeo 1 mostra um exemplo disso: a janela é reduzida para o ícone do app, desaparece e reaparece quando a transição é concluída.
setAutoEnterEnabled implementado corretamenteO vídeo 2 mostra um exemplo da mesma transição, mas com setAutoEnterEnabled
adicionado ao app.
Recursos visuais de vídeo suaves
Quando introduzimos o picture-in-picture no Android 8.0, sourceRectHint indicava a área
da atividade que fica visível após a transição para o modo picture-in-picture. Por
exemplo, os limites de exibição de vídeo em um player. No Android 12 e versões mais recentes,
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 uma sourceRectHint adequada, as transições de picture-in-picture 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 tela cheia para o modo picture-in-picture: depois que a
janela em tela cheia diminui para a janela picture-in-picture, ela é coberta por uma sobreposição preta
antes de revelar o vídeo mais uma vez.
sourceRectHint implementado corretamentePara conferir um exemplo da aparência da animação em picture-in-picture quando sourceRectHint for implementado
corretamente, consulte o vídeo 2 na seção anterior.
Consulte o exemplo PictureInPicture do Kotlin para Android (link em inglês) como uma referência para ativar uma experiência de transição refinada.
Uso
Permita que os usuários continuem assistindo vídeos no seu app e em vários dispositivos. 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 para acessar a tela inicial.
Aqui estão 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 para voltar à tela inicial. É assim que o Google Maps continua mostrando rotas enquanto o usuário realiza outra atividade ao mesmo tempo.
Figura 4:o modo picture-in-picture continua sendo usado para orientar sua experiência. 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.
Utilize um padrão de interação que complemente a experiência de visualização sem interromper a experiência. Por exemplo, se um vídeo estiver no final de um episódio de conteúdo, o uso do modo picture-in-picture ao sair da tela inicial exigirá mais ações do usuário para retornar e interromper a reprodução ou navegar por controles pequenos.
No 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. Reproduza o novo vídeo na atividade de reprodução já existente no modo de tela cheia, em vez de iniciar uma nova atividade que possa confundir o usuário.
É possível arrastar a janela de picture-in-picture para outro local.
Tocar 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 do picture-in-picture. 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 o minimiza, e o inverso também é verdadeiro.
Figura 6:alternando entre o tamanho mínimo e máximo do picture-in-picture ao tocar duas vezes. Para ocultar a janela, arraste-a para a borda esquerda ou direita. Para exibir a janela, toque na parte visível dela ou arraste-a.
Figura 7:picture-in-picture armazenado Redimensionar a janela de picture-in-picture usando o gesto de pinça para aplicar zoom.
Deslize o picture-in-picture para baixo para remover a janela.
Figura 8:ao deslizar para baixo
Para saber mais sobre a implementação do picture-in-picture, consulte a documentação do desenvolvedor do picture-in-picture.