Personalizar a IU do remetente do Android

É possível personalizar os widgets do Google Cast definindo as cores, estilizando os botões, o texto e a miniatura aparência e escolhendo os tipos de botões a serem exibidos.

Personalizar tema do app

Este exemplo cria um estilo de tema personalizado Theme.CastVideosTheme que pode definir cores personalizadas, um estilo introdutório de sobreposição, um minicontrole e um estilo de controle expandido.

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Set AppCompat's color theming attrs -->
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:textColorPrimary">@color/primary_text</item>
    <item name="android:textColorSecondary">@color/secondary_text</item>
    <item name="castIntroOverlayStyle">@style/CustomCastIntroOverlay</item>
    <item name="castMiniControllerStyle">@style/CustomCastMiniController</item>
    <item name="castExpandedControllerStyle">@style/CustomCastExpandedController</item>
</style>

As últimas três linhas acima permitem que você defina estilos específicos para sobreposição introdutória, minicontrole e controle expandido como parte desse tema. Confira exemplos nas seções a seguir.

Personalizar o botão Transmitir

Para adicionar um mediaRouteTheme personalizado ao tema do app:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- ... -->
  <item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>

Declare seu tema de roteador de mídia personalizado e declare um mediaRouteButtonStyle:

<style name="CustomMediaRouterTheme" parent="Theme.MediaRouter">
  <item name="mediaRouteButtonStyle">@style/CustomMediaRouteButtonStyle</item>
</style>

<style name="CustomMediaRouteButtonStyle" parent="Widget.MediaRouter.Light.MediaRouteButton">
  <item name="mediaRouteButtonTint">#EEFF41</item>
</style>

setTint deve ser usado se a versão da Biblioteca de Suporte for mais recente que 26.0.0. Para adultos versões da Biblioteca de Suporte, use buttonTint como alternativa.

Personalizar o tema de sobreposição introdutório

A IntroductoryOverlay oferece suporte a vários atributos de estilo que seu app pode modificar em uma tema. Este exemplo mostra como substituir a aparência do texto do botão e um título sobre o widget de sobreposição:

<style name="CustomCastIntroOverlay" parent="CastIntroOverlay">
    <item name="castButtonTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Button</item>
    <item name="castTitleTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Title</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Button" parent="android:style/TextAppearance">
    <item name="android:textColor">#FFFFFF</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Title"parent="android:style/TextAppearance.Large">
    <item name="android:textColor">#FFFFFF</item>
</style>

Personalizar minicontrole

Personalizar tema

A MiniControllerFragment oferece suporte a vários atributos de estilo que seu app pode modificar em uma tema. Este exemplo mostra como ativar a exibição da imagem em miniatura para substituir a aparência do texto do subtítulo e da legenda, definir as cores e personalizar os botões:

<style name="CustomCastMiniController" parent="CastMiniController">
    <item name="castShowImageThumbnail">true</item>
    <item name="castTitleTextAppearance">@style/TextAppearance.AppCompat.Subhead</item>
    <item name="castSubtitleTextAppearance">@style/TextAppearance.AppCompat.Caption</item>
    <item name="castBackground">#FFFFFF</item>
    <item name="castProgressBarColor">#FFFFFF</item>
    <item name="castPlayButtonDrawable">@drawable/cast_ic_mini_controller_play</item>
    <item name="castPauseButtonDrawable">@drawable/cast_ic_mini_controller_pause</item>
    <item name="castStopButtonDrawable">@drawable/cast_ic_mini_controller_stop</item>
    <item name="castLargePlayButtonDrawable">@drawable/cast_ic_mini_controller_play_large</item>
    <item name="castLargePauseButtonDrawable">@drawable/cast_ic_mini_controller_pause_large</item>
    <item name="castLargeStopButtonDrawable">@drawable/cast_ic_mini_controller_stop_large</item>
    <item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_mini_controller_skip_prev</item>
    <item name="castSkipNextButtonDrawable">@drawable/cast_ic_mini_controller_skip_next</item>
    <item name="castRewind30ButtonDrawable">@drawable/cast_ic_mini_controller_rewind30</item>
    <item name="castForward30ButtonDrawable">@drawable/cast_ic_mini_controller_forward30</item>
    <item name="castMuteToggleButtonDrawable">@drawable/cast_ic_mini_controller_mute</item>
    <item name="castClosedCaptionsButtonDrawable">@drawable/cast_ic_mini_controller_closed_caption</item
</style>

Escolher botões

Uma MiniControllerFragment tem três slots que podem exibir a arte do álbum. e dois botões ou três botões de controle se a capa do álbum não estiver preenchida.

SLOT  SLOT  SLOT
  1     2     3

Por padrão, o fragmento mostra um botão de alternância para reproduzir/pausar. Os desenvolvedores podem usar o atributo castControlButtons para substituir quais botões serão exibidos. Os botões de controle suportados são definidos como Recursos de ID:

Este é um exemplo que usaria a capa do álbum, um botão para reproduzir/pausar, e um botão "Pular para a frente" nessa ordem, da esquerda para a direita:

<array name="cast_mini_controller_control_buttons">
    <item>@id/cast_button_type_empty</item>
    <item>@id/cast_button_type_play_pause_toggle</item>
    <item>@id/cast_button_type_forward_30_seconds</item>
</array>
...
<fragment
    android:id="@+id/cast_mini_controller"
    ...
    app:castControlButtons="@array/cast_mini_controller_control_buttons"
    class="com.google.android.gms.cast.framework.media.widget.MiniControllerFragment">

Aviso: essa matriz precisa conter exatamente três itens. Caso contrário, um ambiente de execução será gerada. Se você não quiser mostrar um botão em um slot, use @id/cast_button_type_empty:

Adicionar botões personalizados

Um MiniControllerFragment oferece suporte à adição de botões de controle personalizados, que são não fornecidos pelo SDK, como um "gostei" . Essas etapas são:

1. Especifique um slot para conter um botão personalizado usando @id/cast_button_type_custom no atributo castControlButtons da MiniControllerFragment.

2. Implementar uma subclasse de UIController O UIController contém métodos que são chamados pelo SDK quando o estado das mudanças da sessão de transmissão ou de mídia. Sua subclasse de UIController deve fazer uma ImageView como um dos parâmetros e atualizar o estado dele conforme necessário.

3. Subclasse MiniControllerFragment, depois substitua onCreateView e chame getButtonImageViewAt(int) para conseguir ImageView para o botão personalizado. Em seguida, chame bindViewToUIController(View, UIController) para associar a visualização à sua UIController

4. Consulte MediaIntentReceiver em Adicionar ações personalizadas para saber como lidar com a ação a partir do botão personalizado.

   Este é um exemplo de associação de um botão no slot 2 a um UIController chamado MyCustomUIController:

// arrays.xml
<array name="cast_expanded_controller_control_buttons">
    <item>@id/cast_button_type_empty</item>
    <item>@id/cast_button_type_rewind_30_seconds</item>
    <item>@id/cast_button_type_custom</item>
    <item>@id/cast_button_type_empty</item>
</array>

// MyCustomUIController.kt
class MyCustomUIController(private val mView: View) : UIController() {
    override fun onMediaStatusUpdated() {
        // Update the state of mView based on the latest the media status.
        ...
        mView.visibility = View.INVISIBLE
        ...
    }
}

// MyMiniControllerFragment.kt
class MyMiniControllerFragment : MiniControllerFragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        super.onCreateView(inflater, container, savedInstanceState)
        val customButtonView = getButtonImageViewAt(2)
        val myCustomUiController = MyCustomUIController(customButtonView)
        uiMediaController.bindViewToUIController(customButtonView, myCustomUiController)
        ...
    }
}

// MyCustomUIController.java
class MyCustomUIController extends UIController {
    private final View mView;

    public MyCustomUIController(View view) {
            mView = view;
    }

    @Override
    public onMediaStatusUpdated() {
        // Update the state of mView based on the latest the media status.
        ...
        mView.setVisibility(View.INVISIBLE);
        ...
    }
}

// MyMiniControllerFragment.java
class MyMiniControllerFragment extends MiniControllerFragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        ImageView customButtonView = getButtonImageViewAt(2);
        MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView);
        getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController);
        ...
    }
}

Personalizar controle expandido

Personalizar tema

Se a atividade de um controle expandido usar uma barra de ferramentas com tema escuro, você você pode definir um tema na barra de ferramentas para usar texto claro e uma cor de ícone clara:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="castExpandedControllerToolbarStyle">
        @style/ThemeOverlay.AppCompat.Dark.ActionBar
    </item>
</style>

Você pode especificar suas próprias imagens usadas para desenhar os botões no controle expandido:

<style name="CustomCastExpandedController" parent="CastExpandedController">
    <item name="castButtonColor">@null</item>
    <item name="castPlayButtonDrawable">@drawable/cast_ic_expanded_controller_play</item>
    <item name="castPauseButtonDrawable">@drawable/cast_ic_expanded_controller_pause</item>
    <item name="castStopButtonDrawable">@drawable/cast_ic_expanded_controller_stop</item>
    <item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_expanded_controller_skip_previous</item>
    <item name="castSkipNextButtonDrawable">@drawable/cast_ic_expanded_controller_skip_next</item>
    <item name="castRewind30ButtonDrawable">@drawable/cast_ic_expanded_controller_rewind30</item>
    <item name="castForward30ButtonDrawable">@drawable/cast_ic_expanded_controller_forward30</item>
</style>

Escolher botões

A atividade do controle expandido tem cinco slots para mostrar os botões de controle. Meio sempre mostra um botão de alternância entre reproduzir/pausar e não é configurável. Os outros quatro podem ser configurados, da esquerda para a direita, pelo app remetente.

SLOT  SLOT  PLAY/PAUSE  SLOT  SLOT
  1     2     BUTTON      3     4

Por padrão, a Activity mostra um botão de closed caption, um pulo para o botão de item anterior, um botão de pular para o próximo item e um botão de desativar som nesses quatro espaços, da esquerda para a direita. Os desenvolvedores podem usar atributo castControlButtons para substituir quais botões serão exibidos quais slots. A lista de botões de controle suportados é definida como de ID idênticos aos tipos de botões para minicontroles.

Aqui está um exemplo que coloca um botão "Voltar" no segundo espaço, um botão avançar no terceiro slot e deixar o primeiro e o último espaços vazios:

// arrays.xml
<array name="cast_expanded_controller_control_buttons">
    <item>@id/cast_button_type_empty</item>
    <item>@id/cast_button_type_rewind_30_seconds</item>
    <item>@id/cast_button_type_forward_30_seconds</item>
    <item>@id/cast_button_type_empty</item>
</array>
...
// styles.xml
<style name="Theme.MyTheme">
    <item name="castExpandedControllerStyle">
        @style/CustomCastExpandedController
    </item>
</style>
...
<style name="CustomCastExpandedController" parent="CastExpandedController">
    <item name="castControlButtons">
        @array/cast_expanded_controller_control_buttons
    </item>
</style>

A matriz deve conter exatamente quatro itens, caso contrário, uma exceção de tempo de execução ser gerada. Se você não quiser mostrar um botão em um slot, use @id/cast_button_type_empty: CastContext pode gerenciar o ciclo de vida e apresentação desta atividade.

Adicionar botões personalizados

Um ExpandedControllerActivity oferece suporte à adição de botões de controle personalizados que não são fornecidos pelo SDK. como um "Gostei" . Essas etapas são:

1. Especifique um slot para conter um botão personalizado usando @id/cast_button_type_custom no atributo castControlButtons da ExpandedControllerActivity. Em seguida, você pode usar getButtonImageViewAt(int) para conseguir ImageView para o botão personalizado.

2. Implementar uma subclasse de UIController UIController contém métodos que são chamados pelo SDK quando o estado das mudanças da sessão de transmissão ou de mídia. Sua subclasse de UIController precisa ter um ImageView como um dos parâmetros, e atualizar o estado dela conforme necessário.

3. Crie uma subclasse ExpandControllerActivity e modifique-a. onCreate e chame getButtonImageViewAt(int) para obter o objeto de visualização do botão. Em seguida, chame bindViewToUIController(View, UIController) para associar a visualização ao UIController personalizado.

4. Consulte MediaIntentReceiver em Adicionar ações personalizadas para saber como processar a ação do botão personalizado.

Este é um exemplo de associação de um botão no slot 2 a um UIController chamado MyCustomUIController:

// arrays.xml
<array name="cast_expanded_controller_control_buttons">
    <item>@id/cast_button_type_empty</item>
    <item>@id/cast_button_type_rewind_30_seconds</item>
    <item>@id/cast_button_type_custom</item>
    <item>@id/cast_button_type_empty</item>
</array>

// MyCustomUIController.kt
class MyCustomUIController(private val mView: View) : UIController() {
    override fun onMediaStatusUpdated() {
        // Update the state of mView based on the latest the media status.
        ...
        mView.visibility = View.INVISIBLE
        ...
    }
}

// MyExpandedControllerActivity.kt
internal class MyExpandedControllerActivity : ExpandedControllerActivity() {
    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val customButtonView = getButtonImageViewAt(2)
        val myCustomUiController = MyCustomUIController(customButtonView)
        uiMediaController.bindViewToUIController(customButtonView, myCustomUiController)
        ...
    }
}

// MyCustomUIController.java
class MyCustomUIController extends UIController {
    private final View mView;

    public MyCustomUIController(View view) {
        mView = view;
    }

    @Override
    public onMediaStatusUpdated() {
        // Update the state of mView based on the latest the media status.
        ...
        mView.setVisibility(View.INVISIBLE);
        ...
    }
}

// MyExpandedControllerActivity.java
class MyExpandedControllerActivity extends ExpandedControllerActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ImageView customButtonView = getButtonImageViewAt(2);
        MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView);
        getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController);
        ...
    }
}