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

Compose की मदद से बेहतर ऐप्लिकेशन बनाना
Android TV OS के लिए Jetpack Compose का इस्तेमाल करके, कम से कम कोड में सुंदर यूज़र इंटरफ़ेस बनाएं.
टीवी के लिए कंपोज़ करें →

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

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

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

Theme.AppCompat.Leanback थीम को उसी तरह पसंद के मुताबिक बनाया जा सकता है जिस तरह किसी अन्य थीम को बनाया जाता है. उदाहरण के लिए, अगर आपको Leanback UI टूलकिट के OnboardingSupportFragment से जुड़ी वैल्यू बदलनी हैं, तो यहां दिया गया तरीका अपनाएं: 

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

बेसिक टीवी लेआउट बनाना

टीवी डिवाइसों के लेआउट को कुछ बुनियादी दिशा-निर्देशों का पालन करना होगा. इससे यह पक्का करने में मदद मिलती है कि वे बड़ी स्क्रीन पर इस्तेमाल किए जा सकते हैं और असरदार हैं. टीवी की स्क्रीन के लिए ऑप्टिमाइज़ किए गए लेआउट बनाने के लिए, इन सुझावों का पालन करें:

  • लैंडस्केप ओरिएंटेशन वाले लेआउट बनाएं. टीवी स्क्रीन हमेशा लैंडस्केप मोड में दिखती हैं.
  • स्क्रीन पर मौजूद नेविगेशन कंट्रोल को स्क्रीन के बाएं या दाएं हिस्से में रखें. इससे कॉन्टेंट के लिए वर्टिकल स्पेस सेव किया जा सकेगा.
  • ऐसे यूज़र इंटरफ़ेस (यूआई) बनाएं जिन्हें फ़्रैगमेंट का इस्तेमाल करके सेक्शन में बांटा गया हो. हॉरिज़ॉन्टल स्क्रीन स्पेस का बेहतर तरीके से इस्तेमाल करने के लिए, ListView के बजाय GridView जैसे व्यू ग्रुप का इस्तेमाल करें.
  • व्यू को व्यवस्थित करने के लिए, RelativeLayout या LinearLayout जैसे व्यू ग्रुप का इस्तेमाल करें. इस तरीके से, सिस्टम टीवी स्क्रीन के साइज़, अलाइनमेंट, आसपेक्ट रेशियो, और पिक्सल डेंसिटी के हिसाब से व्यू की पोज़िशन को अडजस्ट कर पाता है.
  • लेआउट कंट्रोल के बीच ज़रूरी मार्जिन जोड़ें, ताकि यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी न हो.

ओवरस्‍कैन

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

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

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

यहां दिए गए उदाहरण में, एक रूट लेआउट दिखाया गया है. इसमें बैकग्राउंड एलिमेंट शामिल हो सकते हैं. साथ ही, इसमें नेस्ट किया गया चाइल्ड लेआउट भी शामिल है. इसमें 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 फ़ीट की दूरी पर बैठा व्यक्ति उन्हें साफ़ तौर पर देख सके. इसके लिए, ऐब्सलूट साइज़िंग के बजाय लेआउट-रिलेटिव साइज़िंग का इस्तेमाल करना सबसे अच्छा तरीका है. साथ ही, ऐब्सलूट पिक्सल यूनिट के बजाय डेंसिटी-इंडिपेंडेंट पिक्सल (डीपी) यूनिट का इस्तेमाल करें. उदाहरण के लिए, किसी विजेट की चौड़ाई सेट करने के लिए, पिक्सल मेज़रमेंट के बजाय wrap_content का इस्तेमाल करें. साथ ही, किसी विजेट के मार्जिन को सेट करने के लिए, px वैल्यू के बजाय dp वैल्यू का इस्तेमाल करें.

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

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

अन्य सभी Android डिवाइसों की तरह, टीवी के स्क्रीन साइज़ अलग-अलग होते हैं. साथ ही, ये अलग-अलग रिज़ॉल्यूशन के साथ काम करते हैं. जैसे, 720 पिक्सल, 1080 पिक्सल, और 4K. हालांकि, इनके अलावा और भी रिज़ॉल्यूशन हो सकते हैं. पक्का करें कि आपका ऐप्लिकेशन अलग-अलग स्क्रीन साइज़ के साथ काम करता हो.

अलग-अलग स्क्रीन साइज़ और रिज़ॉल्यूशन की पिक्सल डेंसिटी अलग-अलग होती है. स्क्रीन साइज़, रिज़ॉल्यूशन, और पिक्सल डेंसिटी के हिसाब से, अपने यूज़र इंटरफ़ेस (यूआई) को एक जैसा दिखाने के लिए, यूआई के मेज़रमेंट को पिक्सल के बजाय डेंसिटी-इंडिपेंडेंट पिक्सल (डीपी) का इस्तेमाल करके तय करें. अलग-अलग टीवी पैनल रिज़ॉल्यूशन के लिए, स्क्रीन पिक्सल डेंसिटी की जानकारी यहां दी गई है.

पैनल का रिज़ॉल्यूशन स्क्रीन पिक्सल डेंसिटी
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 पर यूज़र ऐक्टिविटी बढ़ाने के सबसे सही तरीके
आगे बढ़ें
'टीवी के लिए लिखें' पर माइग्रेट करें