Leanback यूज़र इंटरफ़ेस (यूआई) टूलकिट में लेआउट

Compose की सुविधा की मदद से बेहतर बनाएं
Android TV OS के लिए Jetpack Compose का इस्तेमाल करके कम से कम कोड के साथ खूबसूरत यूज़र इंटरफ़ेस (यूआई) बनाएं.
टीवी के लिए लिखें →

आम तौर पर, टीवी की स्क्रीन करीब 10 फ़ीट दूर से देखी जाती है. हालांकि, यह स्क्रीन की सबसे बड़ी स्क्रीन से काफ़ी बड़ी होती है Android द्वारा चलने वाले अन्य डिवाइस दिखाई देते हैं, तो टीवी स्क्रीन का स्तर उसी स्तर का नहीं बारीकियां और रंग, जैसे कि डिवाइस की स्क्रीन का साइज़ छोटा होता है. इन बातों के लिए ज़रूरी है कि आप ऐप्लिकेशन के लेआउट के साथ ही उपयोगकर्ता अनुभव को बेहतर और मज़ेदार बनाने के लिए, कई तरह के टीवी डिवाइसों का इस्तेमाल किया जा सकता है.

टीवी के लिए लेआउट वाली थीम का इस्तेमाल करना

Android थीम आपके टीवी ऐप्लिकेशन के लेआउट. अपनी ऐप्लिकेशन गतिविधियों के डिसप्ले में बदलाव करने के लिए किसी थीम का इस्तेमाल करें जो टीवी डिवाइस पर चलने चाहिए. इस सेक्शन में बताया गया है कि किन थीम का इस्तेमाल करना है.

Leanback थीम

androidx.leanback लाइब्रेरी में Theme.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 मोबाइल ऐप्लिकेशन में, Google Chrome का इस्तेमाल AppCompatActivity अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है साथ ही, Theme.AppCompat थीम. इस कॉम्बिनेशन से, कुछ अलग-अलग सुविधाओं का इस्तेमाल किया जा सकता है जैसे, डिवाइस पर चल रहे Android के वर्शन की चिंता किए बिना, ड्रॉ करने लायक टिनिंग. अगर आपको हम ऐसा ऐप्लिकेशन डेवलप कर रहे हैं जो सिर्फ़ Android TV पर चलता है. इसका इस्तेमाल न करें AppCompatActivity क्योंकि इसके ज़रिए चालू की जाने वाली सुविधाएं या तो पहले से ही पर उपलब्ध हैं Android TV हो या काम का न हो.

अगर Android मोबाइल और Android TV के बीच शेयर किए गए कोड बेस से कोई ऐप्लिकेशन बनाया जा रहा है, तो आपके पास कुछ चुनौतियों का सामना करना पड़ता है. AppCompatActivity और कई अन्य AppCompat विजेट के लिए यह ज़रूरी है कि आप Theme.AppCompat का इस्तेमाल करें, जबकि Leanback यूज़र इंटरफ़ेस (यूआई) टूलकिट के फ़्रैगमेंट, आपको इस्तेमाल करने की उम्मीद करते हैं FragmentActivity और Theme.Leanback.

अगर आपको Android मोबाइल और Android TV के लिए एक जैसी बुनियादी गतिविधि का इस्तेमाल करना है या पसंद के मुताबिक बनाए गए व्यू, इस तरह के AppCompat विजेट पर आधारित AppCompatImageView, Theme.AppCompat.Leanback थीम का इस्तेमाल करना चाहिए. इन थीम से आपको वे सभी थीम मिलती हैं AppCompat से और साथ ही Leanback-विशिष्ट मान भी प्रदान करें.

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 व्यू व्यवस्थित करने के लिए. इससे सिस्टम, व्यू की जगह को साइज़ के हिसाब से अडजस्ट कर पाता है. टीवी स्क्रीन का अलाइनमेंट, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), और पिक्सल डेंसिटी.
  • व्यवस्थित यूज़र इंटरफ़ेस (यूआई) से बचने के लिए, लेआउट कंट्रोल के बीच ज़रूरी मार्जिन जोड़ें.

ओवरस्‍कैन

टीवी के लेआउट की कुछ खास ज़रूरतें हैं, क्योंकि टीवी के स्टैंडर्ड में हुए विकास की वजह से इमेज दिखाई जा सकती है. इस वजह से, टीवी डिवाइस ऐप्लिकेशन के बाहरी किनारे से क्लिप बना सकते हैं लेआउट का इस्तेमाल करें, ताकि यह पक्का किया जा सके कि पूरा डिसप्ले भर गया है. इस व्यवहार को आम तौर पर यह ओवरस्कैन भी बंद हो जाएगा.

स्क्रीन के उन एलिमेंट को सही जगह पर रखें जो उपयोगकर्ता को हर समय ओवरस्कैन-सुरक्षित मोड में दिखना चाहिए क्षेत्र. बाईं और दाईं तरफ़ के किनारों पर 48 डीपी का 5% मार्जिन और ऊपर और नीचे के हिस्से में 27 डीपी जोड़ें किनारों से कनेक्ट करते हैं, ताकि यह पक्का हो सके कि लेआउट में स्क्रीन एलिमेंट ओवरस्कैन-सुरक्षित हैं क्षेत्र.

बैकग्राउंड स्क्रीन पर मौजूद उन एलिमेंट में बदलाव न करें जिनसे उपयोगकर्ता सीधे तौर पर इंटरैक्ट नहीं करता है. साथ ही, उन एलिमेंट से क्लिप भी नहीं बनाते हैं में शामिल करना है. इस तरीके से यह पक्का करने में मदद मिलती है कि बैकग्राउंड स्क्रीन पर मौजूद एलिमेंट सही दिखें ट्रैक करने में मदद मिलेगी.

नीचे दिए गए उदाहरण में एक रूट लेआउट दिखाया गया है, जिसमें बैकग्राउंड एलिमेंट और नेस्ट किए गए यूआरएल शामिल हो सकते हैं चाइल्ड लेआउट जिसमें 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 या संबंधित विजेट होते हैं, क्योंकि उन लेआउट में पहले से ही ओवरस्कैन-सुरक्षित मार्जिन शामिल होते हैं.

इस्तेमाल किए जा सकने वाले टेक्स्ट और कंट्रोल बनाएं

टीवी ऐप्लिकेशन में मौजूद टेक्स्ट और कंट्रोल को दूर से आसानी से देखने के लिए, इन सुझावों को अपनाएं:

  • टेक्स्ट को छोटे-छोटे हिस्सों में बांटें, ताकि उपयोगकर्ता तेज़ी से स्कैन कर सकें.
  • गहरे रंग के बैकग्राउंड पर हल्के रंग के टेक्स्ट का इस्तेमाल करें. इस स्टाइल को टीवी पर आसानी से पढ़ा जा सकता है.
  • ऐसे हल्के फ़ॉन्ट या फ़ॉन्ट का इस्तेमाल करने से बचें जिनमें बहुत कम और बहुत चौड़े स्ट्रोक हों. कॉन्टेंट को आसानी से पढ़ने लायक बनाने के लिए, सामान्य Sans Serif फ़ॉन्ट और एंटी-एलियासिंग का इस्तेमाल करें.
  • 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 फ़ीट दूर होता है. कॉन्टेंट बनाने ऐसा करने का सबसे अच्छा तरीका यह है कि साइज़ कुल साइज़ के बजाय लेआउट के मुताबिक अलग-अलग साइज़ इस्तेमाल किया जाए और इसमें डेंसिटी-इंडिपेंडेंट पिक्सल (डीपी) यूनिट के बजाय, कुल पिक्सल यूनिट का इस्तेमाल किया जाता है. उदाहरण के लिए, विजेट की चौड़ाई, पिक्सल मेज़रमेंट के बजाय wrap_content इस्तेमाल करें, और विजेट के लिए मार्जिन, पिक्सल वैल्यू के बजाय डीपी वैल्यू का इस्तेमाल करें.

डेंसिटी-इंडिपेंडेंट पिक्सल और बड़े साइज़ को हैंडल करने के लिए बिल्डिंग लेआउट के बारे में ज़्यादा जानें स्क्रीन के साइज़, स्क्रीन के साथ काम करने की सुविधा देखें खास जानकारी पर टैप करें.

टीवी के लेआउट संसाधनों को मैनेज करें

अन्य सभी Android डिवाइसों की तरह, टीवी में भी अलग-अलग स्क्रीन साइज़ होते हैं. साथ ही, ये अलग-अलग डिवाइसों पर काम करते हैं रिज़ॉल्यूशन: 720p, 1080p, और 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 क्लास का इस्तेमाल करने का विकल्प है सोशल मीडिया सेवाओं का इस्तेमाल करने के लिए.

अन्य संसाधन

टीवी के लिए डिज़ाइन करना

पीछे जाएं
Google TV पर यूज़र ऐक्टिविटी बढ़ाने के सबसे सही तरीके
आगे बढ़ें
'टीवी के लिए लिखें' पर माइग्रेट करें