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