Android Sender UI をカスタマイズする

色の設定、ボタン、テキスト、サムネイルの外観のスタイル設定、表示するボタンの種類の選択など、キャスト ウィジェットをカスタマイズできます。

アプリのテーマをカスタマイズする

この例では、カスタム色、導入オーバーレイ スタイル、ミニ コントローラ スタイル、展開されたコントローラ スタイルを定義できるカスタムテーマ スタイル Theme.CastVideosTheme を作成します。

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

上記の最後の 3 行では、このテーマの一部として、導入オーバーレイ、ミニ コントローラ、展開されたコントローラに固有のスタイルを定義できます。以降のセクションで例を示します。

キャストボタンをカスタマイズする

アプリの Theme にカスタム mediaRouteTheme を追加するには:

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

カスタム Media Router テーマを宣言し、カスタム 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>

サポート ライブラリのバージョンが 26.0.0 より新しい場合は、setTint を使用する必要があります。古いサポート ライブラリ バージョンの場合は、代わりに buttonTint を使用してください。

導入オーバーレイ テーマをカスタマイズする

IntroductoryOverlay クラスは、アプリがカスタムテーマでオーバーライドできるさまざまなスタイル属性をサポートしています。この例は、オーバーレイ ウィジェットのボタンとタイトルの両方のテキストの外観をオーバーライドする方法を示しています。

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

ミニ コントローラをカスタマイズする

テーマのカスタマイズ

MiniControllerFragment クラスは、アプリがカスタムテーマでオーバーライドできるさまざまなスタイル属性をサポートしています。この例では、サムネイル画像の表示を有効にし、サブヘッドと字幕の両方のテキストの外観をオーバーライドし、色を設定してボタンをカスタマイズする方法を示します。

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

ボタンの選択

MiniControllerFragment には、アルバムアートが表示される 3 つのスロットと 2 つのボタンがあります。アルバムアートが入力されていない場合は、3 つのコントロール ボタンが表示されます。

注: app:castShowImageThumbnail="false" の場合、アルバムアートは非表示になり、スロット 1、2、3 がコントロール ボタンとして使用できます。そうでない場合は、アルバムアートがスロット 1 に表示されるため、スロット 1 には空のボタンを、スロット 2 と 3 にはコントロール ボタンを指定できます。

SLOT  SLOT  SLOT
  1     2     3

デフォルトでは、フラグメントに再生/一時停止の切り替えボタンが表示されます。デベロッパーは、castControlButtons 属性を使用して、表示するボタンをオーバーライドできます。サポートされているコントロール ボタンは、ID リソースとして定義されます。

ボタンのタイプ	説明
@id/cast_button_type_empty	このスロットにボタンを配置しない
@id/cast_button_type_custom	カスタムボタン
@id/cast_button_type_play_pause_toggle	再生と一時停止を切り替えます
@id/cast_button_type_skip_previous	キューの前のアイテムにスキップします。
@id/cast_button_type_skip_next	キューの次のアイテムにスキップします。
@id/cast_button_type_rewind_30_seconds	再生を 30 秒巻き戻します
@id/cast_button_type_forward_30_seconds	再生を 30 秒早送りします
@id/cast_button_type_mute_toggle	レシーバーのミュートとミュート解除
@id/cast_button_type_closed_caption	テキスト トラックと音声トラックを選択するダイアログを開く

アルバムアート、再生/一時停止切り替えボタン、スキップ先頭ボタンを左から右の順に使用する例を次に示します。

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

警告: この配列には 3 つの項目を正確に含める必要があります。含めないと、ランタイム例外がスローされます。スロットにボタンを表示しない場合は、@id/cast_button_type_empty を使用します。

カスタムボタンを追加する

MiniControllerFragment は、SDK に用意されていないカスタム コントロール ボタン（「高評価」ボタンなど）の追加をサポートしています。ステップは次のとおりです。

1. MiniControllerFragment の castControlButtons 属性で @id/cast_button_type_custom を使用して、カスタム ボタンを含むスロットを指定します。

2. UIController のサブクラスを実装します。UIController には、キャスト セッションまたはメディア セッションの状態が変化したときに SDK によって呼び出されるメソッドが含まれています。UIController のサブクラスは、ImageView をパラメータの 1 つとして受け取り、必要に応じてその状態を更新する必要があります。

3. MiniControllerFragment のサブクラスを作成し、onCreateView をオーバーライドして getButtonImageViewAt(int) を呼び出し、そのカスタム ボタンの ImageView を取得します。次に、bindViewToUIController(View, UIController) を呼び出して、ビューをカスタム UIController に関連付けます。

4. カスタムボタンからのアクションを処理する方法については、カスタム アクションを追加するの MediaIntentReceiver をご覧ください。

   スロット 2 のボタンを MyCustomUIController という UIController に関連付ける例を次に示します。

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

Kotlin

// 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)
        ...
    }
}

Java

// 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);
        ...
    }
}

拡張コントローラをカスタマイズする

テーマのカスタマイズ

展開されたコントローラのアクティビティがダークモードのツールバーを使用している場合は、明るいテキストと明るいアイコンの色を使用するようにツールバーのテーマを設定できます。

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

展開したコントローラ上のボタンの描画に使用する独自の画像を指定できます。

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

ボタンの選択

拡張コントローラのアクティビティには、コントロール ボタンを表示する 5 つのスロットがあります。中央のスロットには常に再生/一時停止切り替えボタンが表示され、構成できません。他の 4 つのスロットは、送信側のアプリによって左から右に設定できます。

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

デフォルトでは、アクティビティには、左から右に、字幕ボタン、前の項目にスキップボタン、次の項目にスキップボタン、ミュート切り替えボタンの 4 つのスロットが表示されます。デベロッパーは属性 castControlButtons を使用して、どのスロットにどのボタンを表示するかをオーバーライドできます。サポートされているコントロール ボタンのリストは、ミニ コントローラ ボタンのボタンタイプと同じ ID リソースとして定義されます。

次の例では、2 番目のスロットに巻き戻しボタン、3 番目のスロットに早送りボタンを配置し、最初のスロットと最後のスロットを空にしています。

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

配列には 4 つのアイテムを正確に含める必要があります。そうしないと、ランタイム例外がスローされます。スロットにボタンを表示しない場合は、@id/cast_button_type_empty を使用します。CastContext は、このアクティビティのライフサイクルと表示を管理できます。

カスタムボタンを追加する

ExpandedControllerActivity は、SDK で提供されていないカスタム コントロール ボタン（「高評価」ボタンなど）の追加をサポートしています。ステップは次のとおりです。

1. ExpandedControllerActivity の castControlButtons 属性で @id/cast_button_type_custom を使用して、カスタム ボタンを含むスロットを指定します。その後、getButtonImageViewAt(int) を使用して、そのカスタムボタンの ImageView を取得できます。

2. UIController のサブクラスを実装します。UIController には、キャスト セッションまたはメディア セッションの状態が変化したときに SDK によって呼び出されるメソッドが含まれています。UIController のサブクラスは、ImageView をパラメータの 1 つとして受け取り、必要に応じてその状態を更新する必要があります。

3. ExpandedControllerActivity のサブクラスを作成し、onCreate をオーバーライドして getButtonImageViewAt(int) を呼び出し、ボタンのビュー オブジェクトを取得します。次に、bindViewToUIController(View, UIController) を呼び出して、ビューをカスタム UIController に関連付けます。

4. カスタム ボタンからのアクションを処理する方法については、カスタム アクションを追加するの MediaIntentReceiver をご覧ください。

スロット 2 のボタンを MyCustomUIController という UIController に関連付ける例を次に示します。

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

Kotlin

// 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)
        ...
    }
}

Java

// 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);
        ...
    }
}