Personnaliser l'interface utilisateur Android Sender

Vous pouvez personnaliser les widgets Cast en définissant les couleurs, le type et le style des boutons à afficher et du texte, ainsi que l'apparence des vignettes.

Personnaliser le thème de l'application

Cet exemple crée un style de thème personnalisé Theme.CastVideosTheme qui peut définir des couleurs personnalisées, un style de superposition d'introduction, un style de mini-contrôleur et un style de contrôleur étendu.

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

Les trois dernières lignes ci-dessus vous permettent de définir des styles spécifiques à la superposition d'introduction, au mini-contrôleur et au contrôleur étendu dans le cadre de ce thème. Des exemples sont inclus dans les sections suivantes.

Personnaliser le bouton Cast

Pour ajouter un mediaRouteTheme personnalisé au thème de votre application :

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

Déclarez votre thème Media Router personnalisé et déclarez un mediaRouteButtonStyle personnalisé :

<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 doit être utilisé si la version de la bibliothèque d'assistance est plus récente que 26.0.0. Pour les versions antérieures de la bibliothèque d'assistance, veuillez utiliser buttonTint à la place.

Personnaliser le thème de la superposition d'introduction

La classe IntroductoryOverlay est compatible avec différents attributs de style que votre application peut remplacer dans un thème personnalisé. Cet exemple montre comment remplacer l'apparence du texte du bouton et du titre dans le widget de superposition :

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

Personnaliser le mini-contrôleur

Personnaliser le thème

La classe MiniControllerFragment est compatible avec différents attributs de style que votre application peut remplacer dans un thème personnalisé. Cet exemple montre comment activer l'affichage de la vignette, remplacer l'apparence du texte du sous-titre et des sous-titres codés, définir les couleurs et personnaliser les boutons :

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

Choisir des boutons

Un MiniControllerFragment comporte trois emplacements qui peuvent afficher la pochette de l'album et deux boutons, ou trois boutons de commande si la pochette de l'album n'est pas renseignée.

SLOT  SLOT  SLOT
  1     2     3

Par défaut, le fragment affiche un bouton bascule Lecture/Pause. Les développeurs peuvent utiliser l'attribut castControlButtons pour remplacer les boutons à afficher. Les boutons de commande compatibles sont définis en tant que ressources d'ID :

Voici un exemple qui utilise la pochette d'album, un bouton bascule Lecture/Pause et un bouton "Avancer" dans cet ordre de gauche à droite :

<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">

Avertissement : Ce tableau doit contenir exactement trois éléments. Sinon, une exception d'exécution sera générée. Si vous ne souhaitez pas afficher de bouton dans un emplacement, utilisez @id/cast_button_type_empty.

Ajouter des boutons personnalisés

Un MiniControllerFragment permet d'ajouter des boutons de commande personnalisés qui ne sont pas fournis par le SDK, comme un bouton "J'aime". Voici la procédure à suivre :

1. Spécifiez un emplacement pour contenir un bouton personnalisé à l'aide de @id/cast_button_type_custom dans l'attribut castControlButtons du MiniControllerFragment.

2. Implémentez une sous-classe de UIController. Le UIController contient des méthodes appelées par le SDK lorsque l'état de la session Cast ou de la session multimédia change. Votre sous-classe de UIController doit prendre un ImageView comme l'un des paramètres et mettre à jour son état si nécessaire.

3. Sous-classez MiniControllerFragment, puis remplacez onCreateView et appelez getButtonImageViewAt(int) pour obtenir le ImageView de ce bouton personnalisé. Appelez ensuite bindViewToUIController(View, UIController) pour associer la vue à votre UIControllerpersonnalisé.

4. Consultez MediaIntentReceiver dans Ajouter des actions personnalisées pour savoir comment gérer l'action de votre bouton personnalisé.

   Voici un exemple d'association d'un bouton à l'emplacement 2 à un UIController appelé 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);
        ...
    }
}

Personnaliser le contrôleur étendu

Personnaliser le thème

Si l'activité d'un contrôleur étendu utilise une barre d'outils de thème sombre, vous pouvez définir un thème sur la barre d'outils pour utiliser du texte clair et une couleur d'icône claire :

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

Vous pouvez spécifier vos propres images qui sont utilisées pour dessiner les boutons sur le contrôleur étendu :

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

Choisir des boutons

L'activité du contrôleur étendu comporte cinq emplacements pour afficher les boutons de commande. L'emplacement du milieu affiche toujours un bouton bascule Lecture/Pause et n'est pas configurable. Les quatre autres emplacements sont configurables, de gauche à droite, par l'application émettrice.

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

Par défaut, l'activité affiche un bouton de sous-titres codés, un bouton permettant de passer à l'élément précédent, un bouton permettant de passer à l'élément suivant et un bouton bascule permettant de couper le son dans ces quatre emplacements, de gauche à droite. Les développeurs peuvent utiliser l'attribut castControlButtons pour remplacer les boutons à afficher dans les emplacements. La liste des boutons de commande compatibles est définie en tant que ressources d'ID identiques aux types de boutons pour les boutons du mini-contrôleur.

Voici un exemple qui place un bouton "Retour" dans le deuxième emplacement, un bouton "Avancer" dans le troisième emplacement et laisse les premier et dernier emplacements vides :

// 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>

Le tableau doit contenir exactement quatre éléments. Sinon, une exception d'exécution sera générée. Si vous ne souhaitez pas afficher de bouton dans un emplacement, utilisez @id/cast_button_type_empty. CastContext peut gérer le cycle de vie et la présentation de cette activité.

Ajouter des boutons personnalisés

Une ExpandedControllerActivity permet d'ajouter des boutons de commande personnalisés qui ne sont pas fournis par le SDK, comme un bouton "J'aime". Voici la procédure à suivre :

1. Spécifiez un emplacement pour contenir un bouton personnalisé à l'aide @id/cast_button_type_custom dans l'attribut castControlButtons du ExpandedControllerActivity. Vous pouvez ensuite utiliser getButtonImageViewAt(int) pour obtenir le ImageView de ce bouton personnalisé.

2. Implémentez une sous-classe de UIController. UIController contient des méthodes appelées par le SDK lorsque l'état de la session Cast ou de la session multimédia change. Votre sous-classe de UIController doit prendre un ImageView comme l'un des paramètres et mettre à jour son état si nécessaire.

3. Sous-classez ExpandedControllerActivity, puis remplacez onCreate et appelez getButtonImageViewAt(int) pour obtenir l'objet de vue du bouton. Appelez ensuite bindViewToUIController(View, UIController) pour associer la vue à votre UIController personnalisé.

4. Consultez MediaIntentReceiver dans Ajouter des actions personnalisées pour savoir comment gérer l'action de votre bouton personnalisé.

Voici un exemple d'association d'un bouton à l'emplacement 2 à un UIController appelé 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);
        ...
    }
}