आम तौर पर, टीवी स्क्रीन को करीब 10 फ़ीट की दूरी से देखा जाता है. साथ ही, यह Android पर चलने वाले ज़्यादातर डिवाइसों की स्क्रीन से काफ़ी बड़ी होती है. हालांकि, टीवी स्क्रीन पर, छोटी स्क्रीन वाले डिवाइस की तुलना में ज़्यादा जानकारी और बेहतर रंग नहीं दिखते. इन वजहों से, आपको टीवी डिवाइसों को ध्यान में रखकर ऐप्लिकेशन के लेआउट बनाने चाहिए, ताकि लोगों को ऐप्लिकेशन का अच्छा और मज़ेदार अनुभव मिले.
टीवी के लिए लेआउट थीम का इस्तेमाल करना
Android की थीम, आपके टीवी ऐप्लिकेशन में लेआउट के लिए आधार का काम कर सकती हैं. किसी थीम का इस्तेमाल करके, अपने ऐप्लिकेशन की उन गतिविधियों के डिसप्ले में बदलाव करें जिन्हें टीवी डिवाइस पर चलाने के लिए डिज़ाइन किया गया है. इस सेक्शन में, उन थीम के बारे में बताया गया है जिनका इस्तेमाल किया जा सकता है.
Leanback थीम
बंद की गई androidx.leanback लाइब्रेरी में Theme.Leanback,
टीवी पर चलने वाली गतिविधियों के लिए एक थीम शामिल है. इससे Leanback यूज़र इंटरफ़ेस (यूआई) टूलकिट
वाले ऐप्लिकेशन के लिए, एक जैसी विज़ुअल स्टाइल मिलती है. AndroidX Leanback क्लास की मदद से बनाए गए किसी भी टीवी ऐप्लिकेशन के लिए, इस थीम का इस्तेमाल करें. यहां दिए गए कोड
के उदाहरण में, किसी गतिविधि पर इस थीम को लागू करने का तरीका बताया गया है:
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
NoTitleBar थीम
टाइटल बार, फ़ोन और टैबलेट पर Android ऐप्लिकेशन के लिए एक स्टैंडर्ड यूज़र इंटरफ़ेस (यूआई) एलिमेंट है. हालांकि, यह
टीवी ऐप्लिकेशन के लिए सही नहीं है. अगर AndroidX Leanback क्लास का इस्तेमाल नहीं किया जा रहा है, तो टाइटल बार के डिसप्ले को रोकने के लिए, अपने टीवी ऐप्लिकेशन की गतिविधियों पर
NoTitleBar थीम लागू करें. यहां टीवी ऐप्लिकेशन के मेनिफ़ेस्ट से लिया गया कोड का उदाहरण दिया गया है
. इसमें बताया गया है कि टाइटल बार के डिसप्ले को हटाने के लिए, इस थीम को कैसे लागू किया जाता है:
<application> ... <activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar"> ... </activity> </application>
AppCompat थीम
Android के मोबाइल ऐप्लिकेशन में, AppCompatActivity
के साथ-साथ Theme.AppCompat थीम में से किसी एक का इस्तेमाल करना आम बात है. इस कॉम्बिनेशन से, डिवाइस पर Android के वर्शन की चिंता किए बिना, ड्रॉएबल टिंटिंग जैसी सुविधाओं का इस्तेमाल किया जा सकता है. अगर कोई ऐसा ऐप्लिकेशन डेवलप किया जा रहा है जो सिर्फ़ Android TV पर चलता है, तो AppCompatActivity का इस्तेमाल न करें. ऐसा इसलिए, क्योंकि इससे मिलने वाली सुविधाएं या तो Android TV पर पहले से मौजूद होती हैं या वे काम की नहीं होतीं.
अगर Android मोबाइल और Android TV के बीच शेयर किए गए कोडबेस वाला कोई ऐप्लिकेशन बनाया जा रहा है, तो थीमिंग की वजह से कुछ समस्याएं आ सकती हैं. AppCompatActivity और अलग-अलग
AppCompat विजेट के लिए, Theme.AppCompat का इस्तेमाल करना ज़रूरी है. वहीं, the
Leanback यूज़र इंटरफ़ेस (यूआई) टूलकिट के फ़्रैगमेंट के लिए, the
FragmentActivity
और Theme.Leanback का इस्तेमाल करना ज़रूरी है.
अगर Android मोबाइल और Android TV के लिए एक ही बेस ऐक्टिविटी का इस्तेमाल करना है या
AppCompat विजेट के आधार पर कस्टम व्यू का इस्तेमाल करना है, जैसे
AppCompatImageView,
तो Theme.AppCompat.Leanback थीम का इस्तेमाल करें. इन थीम से, सभी थीमिंग
मिलती हैं. साथ ही, Leanback से जुड़ी वैल्यू भी मिलती हैं.AppCompat
Theme.AppCompat.Leanback थीम को उसी तरह से पसंद के मुताबिक बनाया जा सकता है जिस तरह किसी अन्य
थीम को बनाया जाता है. उदाहरण के लिए, अगर आपको
Leanback यूज़र इंटरफ़ेस (यूआई) टूलकिट के
OnboardingSupportFragment,
से जुड़ी वैल्यू बदलनी हैं, तो यहां दिया गया तरीका अपनाएं:
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding"> <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item> <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item> </style>
टीवी के लिए बेसिक लेआउट बनाना
टीवी डिवाइसों के लिए लेआउट बनाते समय, कुछ बुनियादी दिशा-निर्देशों का पालन करना ज़रूरी है. इससे यह पक्का करने में मदद मिलती है कि वे बड़ी स्क्रीन पर इस्तेमाल किए जा सकें और असरदार हों. टीवी स्क्रीन के लिए ऑप्टिमाइज़ किए गए लेआउट बनाने के लिए, इन सलाहों का पालन करें:
- लैंडस्केप ओरिएंटेशन वाले लेआउट बनाएं. टीवी स्क्रीन हमेशा लैंडस्केप मोड में दिखती हैं.
- स्क्रीन पर नेविगेशन कंट्रोल, स्क्रीन के बाईं या दाईं ओर रखें. साथ ही, कॉन्टेंट के लिए वर्टिकल स्पेस बचाएं.
- फ़्रैगमेंट का इस्तेमाल करके, ऐसे यूज़र इंटरफ़ेस (यूआई) बनाएं जिन्हें सेक्शन में बांटा गया हो. स्क्रीन के हॉरिज़ॉन्टल स्पेस का बेहतर तरीके से इस्तेमाल करने के लिए,
GridViewके बजायListViewजैसे व्यू ग्रुप का इस्तेमाल करें. - व्यू को व्यवस्थित करने के लिए,
RelativeLayoutयाLinearLayoutजैसे व्यू ग्रुप का इस्तेमाल करें. इस तरीके से, सिस्टम, टीवी स्क्रीन के साइज़, अलाइनमेंट, आसपेक्ट रेशियो, और पिक्सल डेंसिटी के हिसाब से व्यू की पोज़िशन को अडजस्ट कर सकता है. - यूज़र इंटरफ़ेस (यूआई) को व्यवस्थित रखने के लिए, लेआउट कंट्रोल के बीच मार्जिन जोड़ें.
ओवरस्कैन
टीवी के लिए लेआउट की कुछ खास ज़रूरतें होती हैं. ऐसा इसलिए, क्योंकि टीवी के स्टैंडर्ड में बदलाव हुआ है, ताकि दर्शकों को a फ़ुल-स्क्रीन में तस्वीर दिखाई जा सके. इस वजह से, टीवी डिवाइस, ऐप्लिकेशन के लेआउट के बाहरी किनारे को क्लिप कर सकते हैं, ताकि यह पक्का किया जा सके कि पूरा डिसप्ले भरा हुआ हो. इस बर्ताव को आम तौर पर ओवरस्कैन कहा जाता है.
स्क्रीन के उन एलिमेंट को ओवरस्कैन-सेफ़ एरिया में रखें जो लोगों को हर समय दिखने चाहिए. किसी लेआउट के बाईं और दाईं ओर 48 dp का 5% मार्जिन और ऊपर और नीचे के किनारों पर 27 dp का मार्जिन जोड़ने से, यह पक्का करने में मदद मिलती है कि लेआउट में स्क्रीन के एलिमेंट, ओवरस्कैन-सेफ़ एरिया में हों.
बैकग्राउंड स्क्रीन के उन एलिमेंट को अडजस्ट न करें जिनसे लोग सीधे तौर पर इंटरैक्ट नहीं करते. साथ ही, एलिमेंट को ओवरस्कैन-सेफ़ एरिया में क्लिप न करें. इस तरीके से, यह पक्का करने में मदद मिलती है कि बैकग्राउंड स्क्रीन के एलिमेंट, सभी स्क्रीन पर सही दिखें
यहां दिए गए उदाहरण में, एक रूट लेआउट दिखाया गया है. इसमें बैकग्राउंड एलिमेंट शामिल हो सकते हैं. साथ ही, इसमें एक नेस्ट किया गया चाइल्ड लेआउट भी है, जिसमें 5% मार्जिन है और इसमें ओवरस्कैन-सेफ़ एरिया में एलिमेंट शामिल हो सकते हैं:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Screen elements that can render outside the overscan-safe area go here. --> <!-- Nested RelativeLayout with overscan-safe margin. --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="27dp" android:layout_marginBottom="27dp" android:layout_marginLeft="48dp" android:layout_marginRight="48dp"> <!-- Screen elements that need to be within the overscan-safe area go here. --> </RelativeLayout> </RelativeLayout>
सावधान: अगर
AndroidX Leanback क्लास का इस्तेमाल किया जा रहा है, जैसे कि
BrowseSupportFragment
या इससे जुड़े विजेट, तो अपने लेआउट पर ओवरस्कैन मार्जिन लागू न करें. ऐसा इसलिए, क्योंकि इन लेआउट में पहले से ही ओवरस्कैन-सेफ़ मार्जिन शामिल होते हैं.
इस्तेमाल किए जा सकने वाले टेक्स्ट और कंट्रोल बनाना
अपने टीवी ऐप्लिकेशन में टेक्स्ट और कंट्रोल को दूर से आसानी से देखने लायक बनाने के लिए, इन सलाहों का पालन करें:
- टेक्स्ट को छोटे-छोटे हिस्सों में बांटें, ताकि लोग उन्हें आसानी से स्कैन कर सकें.
- गहरे रंग के बैकग्राउंड पर हल्के रंग से लिखा हुआ टेक्स्ट इस्तेमाल करें. इस स्टाइल में लिखा टेक्स्ट, टीवी पर आसानी से पढ़ा जा सकता है.
- हल्के फ़ॉन्ट या ऐसे फ़ॉन्ट इस्तेमाल करने से बचें जिनमें बहुत पतले और बहुत मोटे स्ट्रोक हों. पढ़ने में आसानी के लिए, सामान्य सैन-सेरिफ़ फ़ॉन्ट और एंटी-एलियासिंग का इस्तेमाल करें.
- Android के स्टैंडर्ड फ़ॉन्ट साइज़ का इस्तेमाल करें:
<TextView android:id="@+id/atext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:singleLine="true" android:textAppearance="?android:attr/textAppearanceMedium"/>
- अपने सभी व्यू विजेट को इतना बड़ा बनाएं कि स्क्रीन से 10 फ़ीट की दूरी पर बैठा व्यक्ति उन्हें साफ़ तौर पर देख सके. इसके लिए, ऐब्सलूट साइज़िंग के बजाय लेआउट-रिलेटिव साइज़िंग का इस्तेमाल करना सबसे अच्छा तरीका है.
साथ ही, ऐब्सलूट पिक्सल यूनिट के बजाय डेंसिटी-इंडिपेंडेंट पिक्सल (dp) यूनिट का इस्तेमाल करें. उदाहरण के लिए, किसी विजेट की
चौड़ाई सेट करने के लिए,
wrap_contentका इस्तेमाल करें. साथ ही, किसी विजेट के लिए मार्जिन सेट करने के लिए, px वैल्यू के बजाय dp वैल्यू का इस्तेमाल करें.
डेंसिटी-इंडिपेंडेंट पिक्सल और बड़ी स्क्रीन के साइज़ के हिसाब से लेआउट बनाने के बारे में ज़्यादा जानने के लिए, स्क्रीन की सुसंगतता की खास जानकारी देखें.
टीवी के लिए लेआउट के संसाधनों को मैनेज करना
अन्य Android डिवाइसों की तरह, टीवी की स्क्रीन के साइज़ अलग-अलग होते हैं. साथ ही, ये अलग-अलग रिज़ॉल्यूशन के साथ काम करते हैं. इनमें 720 पिक्सल, 1080 पिक्सल, और 4K रिज़ॉल्यूशन शामिल हैं. हालांकि, इनके अलावा भी अन्य रिज़ॉल्यूशन हो सकते हैं. पक्का करें कि आपका ऐप्लिकेशन, अलग-अलग स्क्रीन साइज़ के साथ काम करता हो.
अलग-अलग स्क्रीन साइज़ और रिज़ॉल्यूशन की पिक्सल डेंसिटी अलग-अलग होती है. स्क्रीन साइज़, रिज़ॉल्यूशन, और पिक्सल डेंसिटी के हिसाब से, अपने यूज़र इंटरफ़ेस (यूआई) के दिखने के तरीके को बनाए रखने के लिए, पिक्सल के बजाय डेंसिटी-इंडिपेंडेंट पिक्सल (dp) का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) के मेज़रमेंट तय करें. यहां अलग-अलग टीवी पैनल रिज़ॉल्यूशन के लिए, स्क्रीन की पिक्सल डेंसिटी के बारे में बताया गया है.
| पैनल का रिज़ॉल्यूशन | स्क्रीन की पिक्सल डेंसिटी |
|---|---|
| 720 पिक्सल | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
बड़ी स्क्रीन के लिए लेआउट और संसाधनों को ऑप्टिमाइज़ करने के बारे में ज़्यादा जानने के लिए, स्क्रीन की सुसंगतता की खास जानकारी देखें.
ऐसे लेआउट पैटर्न जिनसे बचना चाहिए
लेआउट बनाने के कुछ ऐसे तरीके हैं जो टीवी डिवाइसों पर ठीक से काम नहीं करते. टीवी के लिए लेआउट डेवलप करते समय, यूज़र इंटरफ़ेस (यूआई) के इन तरीकों से बचें.
- फ़ोन या टैबलेट के लेआउट का फिर से इस्तेमाल करना: फ़ोन या टैबलेट के ऐप्लिकेशन के लेआउट को बिना बदलाव किए फिर से इस्तेमाल न करें. Android के अन्य डिवाइसों के साइज़, डाइमेंशन या कॉन्फ़िगरेशन के हिसाब से बनाए गए लेआउट, टीवी डिवाइसों के लिए सही नहीं होते. इसलिए, टीवी पर इन्हें इस्तेमाल करने के लिए, इनमें बदलाव करना ज़रूरी है.
ActionBarका इस्तेमाल करना: फ़ोन और टैबलेट पर ऐक्शन बार इस्तेमाल करने का सुझाव दिया जाता है. हालांकि, ये टीवी के इंटरफ़ेस के लिए सही नहीं होते. टीवी ऐप्लिकेशन के लिए, ऐक्शन बार के विकल्पों वाले मेन्यू या किसी भी पुल-डाउन मेन्यू का इस्तेमाल करने से बचें. ऐसा इसलिए, क्योंकि रिमोट कंट्रोल से ऐसे मेन्यू को नेविगेट करने में मुश्किल होती है.ViewPagerका इस्तेमाल करना: स्क्रीन के बीच स्लाइड करने की सुविधा, फ़ोन या टैबलेट पर अच्छी तरह काम कर सकती है. हालांकि, टीवी पर ऐसा करने की कोशिश न करें!
टीवी के लिए सही लेआउट डिज़ाइन करने के बारे में ज़्यादा जानने के लिए, टीवी के लिए डिज़ाइन गाइड देखें.
बड़े बिटमैप को हैंडल करना
अन्य Android डिवाइसों की तरह, टीवी डिवाइसों में भी मेमोरी की सीमा होती है. अगर ऐप्लिकेशन का लेआउट, बहुत ज़्यादा रिज़ॉल्यूशन वाली इमेज के साथ बनाया जाता है या ऐप्लिकेशन के ऑपरेशन में बहुत ज़्यादा रिज़ॉल्यूशन वाली इमेज का इस्तेमाल किया जाता है, तो मेमोरी की सीमा जल्दी खत्म हो सकती है और 'मेमोरी खत्म होने की वजह से गड़बड़ी' हो सकती है. ज़्यादातर मामलों में, हमारा सुझाव है कि अपने ऐप्लिकेशन में बिटमैप फ़ेच करने, डिकोड करने, और दिखाने के लिए, Glide लाइब्रेरी का इस्तेमाल करें. बिटमैप के साथ काम करते समय, सबसे अच्छा परफ़ॉर्मेंस पाने के बारे में ज़्यादा जानने के लिए, Android के ग्राफ़िक्स के लिए सबसे सही तरीकों के बारे में जानकारी देखें.
असरदार विज्ञापन दिखाना
लिविंग रूम के माहौल के लिए, हमारा सुझाव है कि वीडियो विज्ञापन के ऐसे समाधानों का इस्तेमाल करें जो फ़ुल-स्क्रीन में दिखते हों और जिन्हें 30 सेकंड के अंदर बंद किया जा सकता हो. Android TV पर विज्ञापन दिखाने की सुविधा, जैसे कि बंद करने के बटन और क्लिकथ्रू, टच के बजाय डी-पैड का इस्तेमाल करके ऐक्सेस किए जाने चाहिए.
Android TV में वेब ब्राउज़र की सुविधा नहीं होती. आपके विज्ञापनों में, वेब ब्राउज़र लॉन्च करने या Google Play Store के ऐसे कॉन्टेंट पर रीडायरेक्ट करने की कोशिश नहीं की जानी चाहिए जिसे Android TV डिवाइसों के लिए मंज़ूरी नहीं मिली है.
ध्यान दें: सोशल मीडिया सेवाओं में लॉग इन करने के लिए, WebView क्लास
का इस्तेमाल किया जा सकता है.