इस पेज का अनुवाद Cloud Translation API से किया गया है.

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 टूल से नहीं मिलते हैं, जैसे कि "थंब्स अप" बटन. चरण इस प्रकार हैं:

MiniControllerFragment के castControlButtons एट्रिब्यूट में @id/cast_button_type_custom का इस्तेमाल करके, कस्टम बटन शामिल करने के लिए स्लॉट तय करें.
UIController की सब-क्लास लागू करें. UIController में वे तरीके होते हैं जिन्हें SDK टूल, कास्ट सेशन या मीडिया सेशन की स्थिति में बदलाव होने पर कॉल करता है. आपकी UIController सब-क्लास को एक पैरामीटर के तौर पर, ImageView को लेना चाहिए. साथ ही, ज़रूरत के हिसाब से इसकी स्थिति को अपडेट करना चाहिए.
सब-क्लास MiniControllerFragment. इसके बाद, onCreateView को ओवरराइड करें और कस्टम बटन के लिए ImageView पाने के लिए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
        ...
    }
}

// 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 टूल से नहीं मिलते हैं, जैसे कि "थंब्स अप" बटन. चरण इस प्रकार हैं:

ExpandedControllerActivity के castControlButtons एट्रिब्यूट में @id/cast_button_type_custom का इस्तेमाल करके, कस्टम बटन शामिल करने के लिए स्लॉट तय करें. इसके बाद, उस कस्टम बटन के लिए ImageView को पाने के लिए getButtonImageViewAt(int) का इस्तेमाल करें.
UIController की सब-क्लास लागू करें. UIController में ऐसे तरीके होते हैं जिन्हें कास्ट सेशन या मीडिया सेशन की स्थिति में बदलाव होने पर, SDK टूल कॉल करता है. UIController की आपकी सब-क्लास को एक पैरामीटर के तौर पर ImageView को लेना चाहिए. साथ ही, ज़रूरत के हिसाब से इसकी स्थिति को अपडेट करना चाहिए.
सब-क्लासExtedControllerActivity, फिर बटन का व्यू ऑब्जेक्ट पाने के लिए 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)
        ...
    }
}

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

पीछे जाएं

कास्ट को जोड़ें

आगे बढ़ें

यूज़र इंटरफ़ेस (यूआई) की जांच अपने-आप होने के लिए सेट करें