कास्ट करने की सुविधा देने वाले विजेट को अपनी पसंद के मुताबिक बनाया जा सकता है. इसके लिए, रंग सेट करें, बटन, टेक्स्ट, और थंबनेल के दिखने का स्टाइल तय करें. साथ ही, यह चुनें कि कौनसे बटन दिखाने हैं.
ऐप्लिकेशन की थीम को पसंद के मुताबिक बनाना
इस उदाहरण में, कस्टम थीम स्टाइल 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 टूल से नहीं मिलते. जैसे, "पसंद करें" बटन. चरण इस प्रकार हैं:
MiniControllerFragment
एट्रिब्यूट केcastControlButtons
एट्रिब्यूट में@id/cast_button_type_custom
का इस्तेमाल करके, कस्टम बटन के लिए एक स्लॉट तय करें.UIController
की सबक्लास लागू करें.UIController
में ऐसे तरीके शामिल होते हैं जिन्हें एसडीके तब कॉल करता है, जब कास्ट सेशन या मीडिया सेशन की स्थिति बदलती है.UIController
की आपकी सबक्लास कोImageView
को पैरामीटर के तौर पर लेना चाहिए और ज़रूरत के मुताबिक इसकी स्थिति को अपडेट करना चाहिए.सबक्लास
MiniControllerFragment
, इसके बाद, ओवरराइड करेंonCreateView
और कॉल करेंgetButtonImageViewAt(int)
ताकि उस कस्टम बटन के लिएImageView
मिल सके. इसके बाद, व्यू को अपने कस्टमUIController
से जोड़ने के लिए,bindViewToUIController(View, UIController)
पर कॉल करें.कस्टम बटन से होने वाली कार्रवाई को मैनेज करने का तरीका जानने के लिए, कस्टम कार्रवाइयां जोड़ें में जाकर,
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>
// 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); ... } }
बड़ा किए गए कंट्रोलर को पसंद के मुताबिक बनाना
पसंद के मुताबिक बनाई गई थीम
अगर बड़े किए गए कंट्रोलर की ऐक्टिविटी में गहरे रंग वाली थीम वाले टूलबार का इस्तेमाल किया जाता है, तो टूलबार पर थीम सेट की जा सकती है. इससे हल्के रंग के टेक्स्ट और हल्के रंग के आइकॉन का इस्तेमाल किया जा सकेगा:
<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 से नहीं मिलते. उदाहरण के लिए, "पसंद करें" बटन. चरण इस प्रकार हैं:
ExpandedControllerActivity
एट्रिब्यूट केcastControlButtons
एट्रिब्यूट में@id/cast_button_type_custom
का इस्तेमाल करके, कस्टम बटन के लिए एक स्लॉट तय करें. इसके बाद, उस कस्टम बटन के लिएImageView
पाने के लिए,getButtonImageViewAt(int)
का इस्तेमाल किया जा सकता है.UIController
की सबक्लास लागू करें.UIController
में ऐसे तरीके शामिल होते हैं जिन्हें कास्ट सेशन या मीडिया सेशन की स्थिति बदलने पर, SDK टूल कॉल करता है.UIController
के आपके सबक्लास कोImageView
को पैरामीटर के तौर पर लेना चाहिए. साथ ही, ज़रूरत के मुताबिक इसकी स्थिति को अपडेट करना चाहिए.ExpandedControllerActivity की सबक्लास बनाएं. इसके बाद, बटन का व्यू ऑब्जेक्ट पाने के लिए,
onCreate
को बदलें औरgetButtonImageViewAt(int)
को कॉल करें. इसके बाद, व्यू को अपने कस्टमUIController
से जोड़ने के लिए, कॉल करेंbindViewToUIController(View, UIController)
.कस्टम बटन से कार्रवाई को मैनेज करने का तरीका जानने के लिए,
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>
// 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); ... } }