Android सेंडर यूज़र इंटरफ़ेस (यूआई) को पसंद के मुताबिक बनाएं

कास्ट करने की सुविधा देने वाले विजेट को अपनी पसंद के मुताबिक बनाया जा सकता है. इसके लिए, रंग सेट करें, बटन, टेक्स्ट, और थंबनेल के दिखने का स्टाइल तय करें. साथ ही, यह चुनें कि कौनसे बटन दिखाने हैं.

ऐप्लिकेशन की थीम को पसंद के मुताबिक बनाना

इस उदाहरण में, कस्टम थीम स्टाइल 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>

ऊपर दी गई आखिरी तीन लाइनों से, इस थीम के हिस्से के तौर पर, शुरुआती ओवरले, मिनी कंट्रोलर, और बड़े कंट्रोलर के लिए खास स्टाइल तय की जा सकती हैं. उदाहरण, आगे दिए गए सेक्शन में शामिल किए गए हैं.

कास्ट बटन को पसंद के मुताबिक बनाना

अपने ऐप्लिकेशन की थीम में कस्टम mediaRouteTheme जोड़ने के लिए:

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

अपनी पसंद के मुताबिक मीडिया राऊटर थीम और पसंद के मुताबिक 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 का इस्तेमाल तब किया जाना चाहिए, जब सपोर्ट लाइब्रेरी का वर्शन 26.0.0 से नया हो. सहायता लाइब्रेरी के पुराने वर्शन के लिए, कृपया 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 में तीन स्लॉट होते हैं. इनमें एल्बम आर्ट और दो बटन दिख सकते हैं. अगर एल्बम आर्ट नहीं दिखता है, तो तीन कंट्रोल बटन दिखते हैं.

SLOT  SLOT  SLOT
  1     2     3

डिफ़ॉल्ट रूप से, फ़्रैगमेंट में चलाने/रोकने का टॉगल बटन दिखता है. डेवलपर, castControlButtons एट्रिब्यूट का इस्तेमाल करके यह तय कर सकते हैं कि कौनसे बटन दिखाने हैं. कंट्रोल करने के लिए इस्तेमाल किए जा सकने वाले बटन, आईडी रिसॉर्स के तौर पर तय किए जाते हैं:

बटन प्रकार ब्यौरा
@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">

चेतावनी: इस ऐरे में सिर्फ़ तीन आइटम होने चाहिए. ऐसा न होने पर, रनटाइम अपवाद दिखेगा. अगर आपको किसी स्लॉट में बटन नहीं दिखाना है, तो @id/cast_button_type_empty का इस्तेमाल करें.

कस्टम बटन जोड़ना

MiniControllerFragment में, कस्टम कंट्रोल बटन जोड़ने की सुविधा होती है. ये बटन, SDK टूल से नहीं मिलते. जैसे, "पसंद करें" बटन. चरण इस प्रकार हैं:

  1. MiniControllerFragment एट्रिब्यूट के castControlButtons एट्रिब्यूट में @id/cast_button_type_custom का इस्तेमाल करके, कस्टम बटन के लिए एक स्लॉट तय करें.

  2. UIController की सबक्लास लागू करें. UIController में ऐसे तरीके शामिल होते हैं जिन्हें एसडीके तब कॉल करता है, जब कास्ट सेशन या मीडिया सेशन की स्थिति बदलती है. UIController की आपकी सबक्लास को ImageView को पैरामीटर के तौर पर लेना चाहिए और ज़रूरत के मुताबिक इसकी स्थिति को अपडेट करना चाहिए.

  3. सबक्लास MiniControllerFragment, इसके बाद, ओवरराइड करें onCreateView और कॉल करें getButtonImageViewAt(int) ताकि उस कस्टम बटन के लिए ImageView मिल सके. इसके बाद, व्यू को अपने कस्टम UIController से जोड़ने के लिए, bindViewToUIController(View, 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>

बटन चुनना

बड़ा किए गए कंट्रोलर की गतिविधि में, कंट्रोल बटन दिखाने के लिए पांच स्लॉट होते हैं. बीच वाले स्लॉट में हमेशा 'चलाएं/रोकें' टॉगल बटन दिखता है. इसे कॉन्फ़िगर नहीं किया जा सकता. बाकी चार स्लॉट को भेजने वाला ऐप्लिकेशन, बाईं से दाईं ओर कॉन्फ़िगर कर सकता है.

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

डिफ़ॉल्ट रूप से, गतिविधि दिखाने वाले इंडिकेटर में ये चार बटन होते हैं. ये बटन, बाएं से दाएं इस क्रम में होते हैं: सबटाइटल बटन, पिछले आइटम पर जाने का बटन, अगले आइटम पर जाने का बटन, और म्यूट टॉगल बटन. डेवलपर, castControlButtons एट्रिब्यूट का इस्तेमाल करके यह तय कर सकते हैं कि किन स्लॉट में कौनसे बटन दिखाने हैं. कंट्रोल करने वाले बटन की सूची को आईडी रिसॉर्स के तौर पर तय किया जाता है. ये आईडी रिसॉर्स, मिनी कंट्रोलर बटन के लिए बटन टाइप के आईडी रिसॉर्स के जैसे ही होते हैं.

यहां एक उदाहरण दिया गया है, जिसमें दूसरे स्लॉट में रिवाइंड बटन, तीसरे स्लॉट में स्किप फ़ॉरवर्ड बटन रखा गया है. साथ ही, पहले और आखिरी स्लॉट को खाली छोड़ दिया गया है:

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

ऐरे में सिर्फ़ चार आइटम होने चाहिए. ऐसा न होने पर, रनटाइम अपवाद दिखेगा. अगर आपको किसी स्लॉट में बटन नहीं दिखाना है, तो @id/cast_button_type_empty का इस्तेमाल करें. CastContext इस गतिविधि के लाइफ़साइकल और प्रज़ेंटेशन को मैनेज कर सकता है.

कस्टम बटन जोड़ना

ExpandedControllerActivity में, कस्टम कंट्रोल बटन जोड़ने की सुविधा होती है. ये बटन, SDK से नहीं मिलते. उदाहरण के लिए, "पसंद करें" बटन. चरण इस प्रकार हैं:

  1. ExpandedControllerActivity एट्रिब्यूट के castControlButtons एट्रिब्यूट में @id/cast_button_type_custom का इस्तेमाल करके, कस्टम बटन के लिए एक स्लॉट तय करें. इसके बाद, उस कस्टम बटन के लिए ImageView पाने के लिए, getButtonImageViewAt(int) का इस्तेमाल किया जा सकता है.

  2. UIController की सबक्लास लागू करें. UIController में ऐसे तरीके शामिल होते हैं जिन्हें कास्ट सेशन या मीडिया सेशन की स्थिति बदलने पर, SDK टूल कॉल करता है. UIController के आपके सबक्लास को ImageView को पैरामीटर के तौर पर लेना चाहिए. साथ ही, ज़रूरत के मुताबिक इसकी स्थिति को अपडेट करना चाहिए.

  3. ExpandedControllerActivity की सबक्लास बनाएं. इसके बाद, बटन का व्यू ऑब्जेक्ट पाने के लिए, onCreate को बदलें और getButtonImageViewAt(int) को कॉल करें. इसके बाद, व्यू को अपने कस्टम UIController से जोड़ने के लिए, कॉल करें bindViewToUIController(View, 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);
        ...
    }
}