Adicionar vídeos usando picture-in-picture (PiP)

A partir do Android 8.0 (API de nível 26), o Android permite que as atividades sejam iniciadas no modo picture-in-picture. Picture-in-picture é um tipo especial de modo de várias janelas usado principalmente para reprodução de vídeos. Ele permite que o usuário assista a um vídeo em uma janela pequena fixada em um canto da tela enquanto navega entre apps ou pelo conteúdo na tela principal.

O modo picture-in-picture aproveita as APIs de várias janelas disponíveis no Android 7.0 para fornecer a janela fixa de sobreposição de vídeo. Para adicionar o picture-in-picture ao seu app, você precisa registrar suas atividades compatíveis com esse modo, alternar sua atividade para ele conforme necessário e verificar se os elementos da IU estão ocultos e se a reprodução continua quando a atividade está no modo picture-in-picture.

A janela do picture-in-picture aparece na camada superior da tela, em um canto escolhido pelo sistema.

Como os usuários podem interagir com a janela picture-in-picture

É possível arrastar a janela de picture-in-picture para outro local. A partir do Android 12, os usuários também podem fazer o seguinte:

  • 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.

  • 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 o inverso também é verdadeiro.

  • 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.

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

Seu app controla quando a atividade atual entra no modo picture-in-picture. Veja alguns exemplos:

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

  • Seu app pode passar um vídeo para o 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 um vídeo. O vídeo continua sendo reproduzido no modo picture-in-picture enquanto a tela principal mostra uma atividade de seleção de conteúdo.

Declarar compatibilidade com picture-in-picture

Por padrão, o sistema não é automaticamente compatível com o picture-in-picture para apps. Se você quiser oferecer suporte ao picture-in-picture no seu app, registre a atividade de vídeo no manifesto definindo android:supportsPictureInPicture como true. Especifique também que a atividade processa as mudanças de configuração de layout para que ela não seja reiniciada quando essas mudanças ocorrerem durante as transições do modo picture-in-picture.

<activity android:name="VideoActivity"
    android:supportsPictureInPicture="true"
    android:configChanges=
        "screenSize|smallestScreenSize|screenLayout|orientation"
    ...

Alternar sua atividade para picture-in-picture

No Android 12 e versões mais recentes, é possível mudar a atividade para o modo picture-in-picture definindo a flag setAutoEnterEnabled como true. Com essa configuração, uma atividade muda automaticamente para o modo picture-in-picture conforme necessário, sem precisar chamar explicitamente enterPictureInPictureMode() em onUserLeaveHint. E isso tem o benefício de fornecer transições muito mais suaves. Para mais detalhes, consulte Fazer as transições para o modo picture-in-picture mais suaves da navegação por gestos.

Se o app for destinado ao Android 11 ou versões anteriores, uma atividade precisará chamar enterPictureInPictureMode() para alternar para o modo picture-in-picture. Por exemplo, o código a seguir alterna uma atividade para o modo picture-in-picture quando o usuário clica em um botão dedicado na interface do app:

Kotlin

override fun onActionClicked(action: Action) {
    if (action.id.toInt() == R.id.lb_control_picture_in_picture) {
        activity?.enterPictureInPictureMode()
        return
    }
}

Java

@Override
public void onActionClicked(Action action) {
    if (action.getId() == R.id.lb_control_picture_in_picture) {
        getActivity().enterPictureInPictureMode();
        return;
    }
    ...
}

Inclua uma lógica que alterna uma atividade para o modo picture-in-picture em vez de ficar em segundo plano. Por exemplo, o Google Maps alternará para o modo picture-in-picture se o usuário pressionar o botão "Início" ou "Recentes" enquanto o app estiver navegando. Para usar esse caso, modifique onUserLeaveHint():

Kotlin

override fun onUserLeaveHint() {
    if (iWantToBeInPipModeNow()) {
        enterPictureInPictureMode()
    }
}

Java

@Override
public void onUserLeaveHint () {
    if (iWantToBeInPipModeNow()) {
        enterPictureInPictureMode();
    }
}

Recomendado: ofereça aos usuários uma experiência de transição do picture-in-picture elegante

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 atualizações aplicáveis, as transições 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.

Essas mudanças envolvem os seguintes itens.

  • Como suavizar as transições para o modo picture-in-picture na navegação por gestos
  • Definir um sourceRectHint adequado para entrar e sair do modo picture-in-picture
  • Como desativar o redimensionamento contínuo de conteúdos que não são de vídeo

Consulte o exemplo PictureInPicture do Kotlin para Android (link em inglês) como referência para ativar uma experiência de transição refinada.

Suavizar transições no modo picture-in-picture pela navegação por gestos

No Android 12 e versões mais recentes, a flag setAutoEnterEnabled oferece animações muito mais suaves na 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.

Conclua as etapas a seguir para fazer essa mudança e consulte esta amostra para uma referência:

  1. Use setAutoEnterEnabled para criar PictureInPictureParams.Builder:

    Kotlin

    setPictureInPictureParams(PictureInPictureParams.Builder()
        .setAspectRatio(aspectRatio)
        .setSourceRectHint(sourceRectHint)
        .setAutoEnterEnabled(true)
        .build())
    

    Java

    setPictureInPictureParams(new PictureInPictureParams.Builder()
        .setAspectRatio(aspectRatio)
        .setSourceRectHint(sourceRectHint)
        .setAutoEnterEnabled(true)
        .build());
    
  2. Chame setPictureInPictureParams usando os PictureInPictureParams atualizados anteriormente. O app não espera o callback onUserLeaveHint, como teria feito no Android 11.

    Por exemplo, talvez você queira chamar setPictureInPictureParams na primeira reprodução e em qualquer reprodução seguinte se a proporção mudar.

  3. Chame setAutoEnterEnabled(false), mas apenas quando necessário. Por exemplo, você provavelmente não vai querer inserir o picture-in-picture se a reprodução atual estiver em um estado pausado.

Defina um sourceRectHint adequado para entrar e sair do modo picture-in-picture

Começando com a introdução do picture-in-picture no Android 8.0, o setSourceRectHint indicava a área da atividade visível após a transição para o modo picture-in-picture, por exemplo, os limites da visualização de vídeo em um player.

Com o Android 12, o sistema usa sourceRectHint para implementar uma animação muito mais suave ao entrar e sair do modo picture-in-picture.

Para definir corretamente sourceRectHint para entrar e sair do modo picture-in-picture:

  1. Crie PictureInPictureParams usando os limites adequados, como sourceRectHint. Recomendamos também anexar um listener de mudança de layout ao player de vídeo:

    Kotlin

    val mOnLayoutChangeListener =
    OnLayoutChangeListener { v: View?, oldLeft: Int,
            oldTop: Int, oldRight: Int, oldBottom: Int, newLeft: Int, newTop:
            Int, newRight: Int, newBottom: Int ->
        val sourceRectHint = Rect()
        mYourVideoView.getGlobalVisibleRect(sourceRectHint)
        val builder = PictureInPictureParams.Builder()
            .setSourceRectHint(sourceRectHint)
        setPictureInPictureParams(builder.build())
    }
    
    mYourVideoView.addOnLayoutChangeListener(mOnLayoutChangeListener)
    

    Java

    private final View.OnLayoutChangeListener mOnLayoutChangeListener =
            (v, oldLeft, oldTop, oldRight, oldBottom, newLeft, newTop, newRight,
            newBottom) -> {
        final Rect sourceRectHint = new Rect();
        mYourVideoView.getGlobalVisibleRect(sourceRectHint);
        final PictureInPictureParams.Builder builder =
            new PictureInPictureParams.Builder()
                .setSourceRectHint(sourceRectHint);
        setPictureInPictureParams(builder.build());
    };
    
    mYourVideoView.addOnLayoutChangeListener(mOnLayoutChangeListener);
    
  2. Se necessário, atualize o sourceRectHint antes que o sistema inicie a transição de saída. Quando o sistema está prestes a sair do modo picture-in-picture, a hierarquia de visualização da atividade é destinada à configuração de destino (por exemplo, tela cheia). O app pode anexar um listener de mudança de layout à visualização raiz ou de destino (como a visualização do player de vídeo) para detectar o evento e atualizar o sourceRectHint antes de a animação começar.

    Kotlin

    // Listener is called immediately after the user exits PiP but before animating.
    playerView.addOnLayoutChangeListener { _, left, top, right, bottom,
                        oldLeft, oldTop, oldRight, oldBottom ->
        if (left != oldLeft
            || right != oldRight
            || top != oldTop
            || bottom != oldBottom) {
            // The playerView's bounds changed, update the source hint rect to
            // reflect its new bounds.
            val sourceRectHint = Rect()
            playerView.getGlobalVisibleRect(sourceRectHint)
            setPictureInPictureParams(
                PictureInPictureParams.Builder()
                    .setSourceRectHint(sourceRectHint)
                    .build()
            )
        }
    }
    
    

    Java

    // Listener is called right after the user exits PiP but before
    // animating.
    playerView.addOnLayoutChangeListener((v, left, top, right, bottom,
                        oldLeft, oldTop, oldRight, oldBottom) -> {
        if (left != oldLeft
            || right != oldRight
            || top != oldTop
            || bottom != oldBottom) {
            // The playerView's bounds changed, update the source hint rect to
            // reflect its new bounds.
            final Rect sourceRectHint = new Rect();
            playerView.getGlobalVisibleRect(sourceRectHint);
            setPictureInPictureParams(
                new PictureInPictureParams.Builder()
                    .setSourceRectHint(sourceRectHint)
                    .build());
        }
    });
    
    

Desativar o redimensionamento contínuo de conteúdos que não são de vídeo

O Android 12 adiciona a flag setSeamlessResizeEnabled, que fornece uma animação de esmaecimento cruzado muito mais suave ao redimensionar conteúdo que não é de vídeo na janela do picture-in-picture. Antes, o redimensionamento de conteúdo que não era de vídeo em uma janela picture-in-picture poderia criar artefatos visuais desagradáveis.

Para desativar o redimensionamento contínuo de conteúdos que não são de vídeo:

Kotlin

setPictureInPictureParams(PictureInPictureParams.Builder()
    .setSeamlessResizeEnabled(false)
    .build())

Java

setPictureInPictureParams(new PictureInPictureParams.Builder()
    .setSeamlessResizeEnabled(false)
    .build());

Processar a interface durante o picture-in-picture

Quando a atividade entra ou sai do modo picture-in-picture, o sistema chama Activity.onPictureInPictureModeChanged() ou Fragment.onPictureInPictureModeChanged().

Modifique esses callbacks para redesenhar os elementos de IU da atividade. Lembre-se de que sua atividade é exibida em uma pequena janela no modo picture-in-picture. Os usuários não podem interagir com os elementos da IU do app quando ele está no modo picture-in-picture, e os detalhes de elementos pequenos da IU podem ser difíceis de ver. As atividades de reprodução de vídeo com IU mínima proporcionam a melhor experiência do usuário.

Caso seu app precise oferecer ações personalizadas para o picture-in-picture, consulte Adicionar controles nesta página. Remova outros elementos da IU antes de sua atividade entrar no modo picture-in-picture e restaure-os quando ela voltar à tela cheia:

Kotlin

override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean,
                                           newConfig: Configuration) {
    if (isInPictureInPictureMode) {
        // Hide the full-screen UI (controls, etc.) while in PiP mode.
    } else {
        // Restore the full-screen UI.
    }
}

Java

@Override
public void onPictureInPictureModeChanged (boolean isInPictureInPictureMode, Configuration newConfig) {
    if (isInPictureInPictureMode) {
        // Hide the full-screen UI (controls, etc.) while in PiP mode.
    } else {
        // Restore the full-screen UI.
        ...
    }
}

Adicionar controles

A janela de picture-in-picture pode exibir controles quando o usuário abre o menu da janela, 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, avançar e anterior serão exibidos.

Também é possível especificar ações personalizadas de forma explícita criando PictureInPictureParams com PictureInPictureParams.Builder.setActions() antes de entrar no modo picture-in-picture e transmitir os parâmetros ao entrar nesse modo usando enterPictureInPictureMode(android.app.PictureInPictureParams) ou setPictureInPictureParams(android.app.PictureInPictureParams). Tenha cuidado. Se você tentar adicionar mais do que getMaxNumPictureInPictureActions(), conseguirá apenas o número máximo.

Como continuar a reprodução de vídeo no picture-in-picture

Quando a atividade alterna para o modo picture-in-picture, o sistema coloca a atividade no estado pausado e chama o método onPause() da atividade. A reprodução do vídeo não será pausada e continuará se a atividade for pausada no modo picture-in-picture.

No Android 7.0 e versões mais recentes, pause e retome a reprodução do vídeo quando o sistema chamar o onStop() e onStart() da atividade. Ao fazer isso, você evita a necessidade de verificar se o app está no modo picture-in-picture em onPause() e continua a reprodução de forma explícita.

Se você não tiver definido a flag setAutoEnterEnabled como true e precisar pausar a reprodução na implementação de onPause(), procure o modo picture-in-picture chamando isInPictureInPictureMode() e processe a reprodução adequadamente. Por exemplo:

Kotlin

override fun onPause() {
    super.onPause()
    // If called while in PiP mode, do not pause playback
    if (isInPictureInPictureMode) {
        // Continue playback
    } else {
        // Use existing playback logic for paused Activity behavior.
    }
}

Java

@Override
public void onPause() {
    // If called while in PiP mode, do not pause playback
    if (isInPictureInPictureMode()) {
        // Continue playback
        ...
    } else {
        // Use existing playback logic for paused Activity behavior.
        ...
    }
}

Quando a atividade sai do modo picture-in-picture e volta ao modo de tela cheia, o sistema retoma a atividade e chama o método onResume().

Usar uma única atividade de reprodução para o picture-in-picture

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.

Para garantir que uma única atividade seja usada para solicitações de reprodução de vídeo e ativada ou desativada no modo picture-in-picture, defina o android:launchMode da atividade como singleTask no manifesto:

<activity android:name="VideoActivity"
    ...
    android:supportsPictureInPicture="true"
    android:launchMode="singleTask"
    ...

Na sua atividade, substitua onNewIntent() e gerencie o novo vídeo, interrompendo qualquer reprodução de vídeo já existente, se necessário.

Práticas recomendadas

O modo picture-in-picture pode ser desativado em dispositivos com pouca RAM. Antes que seu app use o modo picture-in-picture, confira se ele está disponível chamando hasSystemFeature(PackageManager.FEATURE_PICTURE_IN_PICTURE).

O modo picture-in-picture é destinado a atividades que exibem vídeos em tela cheia. Ao mudar sua atividade para o modo picture-in-picture, evite exibir conteúdo que não seja de vídeo. Acompanhe quando sua atividade entra no modo picture-in-picture e oculte elementos da interface, conforme descrito em Como processar a interface durante o picture-in-picture.

Quando uma atividade está no modo picture-in-picture, por padrão, ela não recebe o foco de entrada. Para receber eventos de entrada no modo picture-in-picture, use MediaSession.setCallback(). Para mais informações sobre o uso de setCallback(), consulte Mostrar um card "Tocando agora".

Quando seu app está no modo picture-in-picture, a reprodução de vídeo na janela do picture-in-picture pode causar interferência de áudio em outro app, como um player de música ou um app de pesquisa por voz. Para evitar isso, solicite a seleção de áudio quando começar a assistir o vídeo e processe as notificações de mudança na seleção de áudio, conforme descrito em Gerenciar o foco de áudio. Se você receber uma notificação de perda de seleção de áudio quando estiver no modo picture-in-picture, pause ou pare a reprodução do vídeo.

Quando seu app estiver prestes a entrar no picture-in-picture, apenas a atividade principal vai entrar no picture-in-picture. Em algumas situações, como em dispositivos com várias janelas, é possível que a atividade abaixo seja exibida e se torne visível novamente junto com a atividade do modo picture-in-picture. Gerencie esse caso adequadamente, incluindo a atividade abaixo, que recebe um callback onResume() ou onPause(). Também é possível que o usuário interaja com a atividade. Por exemplo, se uma atividade de lista de vídeos estiver sendo exibida e a atividade de reprodução de vídeo estiver no modo picture-in-picture, o usuário poderá selecionar um novo vídeo da lista, e essa atividade será atualizada de acordo.

Outro exemplo de código

Para fazer o download de um app de exemplo criado no Android, consulte a Amostra picture-in-picture (link em inglês). Para fazer o download de um app de exemplo criado em Kotlin, consulte Exemplo de PictureInPicture do Android (Kotlin) (links em inglês).