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

ध्यान दें: अगर app:castShowImageThumbnail="false", तो एल्बम आर्ट छिप जाएगा और स्लॉट 1, 2, और 3 कंट्रोल बटन के लिए उपलब्ध होंगे. अगर ऐसा नहीं है, तो स्लॉट 1 के लिए खाली बटन और स्लॉट 2 और 3 के लिए कंट्रोल बटन उपलब्ध कराए जा सकते हैं. ऐसा इसलिए, क्योंकि स्लॉट 1 में एल्बम आर्ट दिखेगा.

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 में, पसंद के मुताबिक कंट्रोल बटन जोड़े जा सकते हैं. ये बटन, एसडीके में उपलब्ध नहीं होते. जैसे, "थम्स अप" बटन. चरण इस प्रकार हैं:

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