डिसप्ले कटआउट के साथ काम करता है

Compose को आज़माएं
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर इस्तेमाल करने का सुझाव दिया जाता है. Compose में डिसप्ले कटआउट इस्तेमाल करने का तरीका जानें.
Compose में कटआउट दिखाना →

डिसप्ले कटआउट, कुछ डिवाइसों पर डिसप्ले के ऊपरी हिस्से में मौजूद होता है. इससे डिवाइस के सामने वाले हिस्से पर मौजूद ज़रूरी सेंसर के लिए जगह मिलती है. साथ ही, स्क्रीन को किनारे से किनारे तक इस्तेमाल किया जा सकता है.

Android, Android 9 (एपीआई लेवल 28) और इसके बाद के वर्शन वाले डिवाइसों पर डिसप्ले कटआउट की सुविधा देता है. हालांकि, डिवाइस बनाने वाली कंपनियां, Android 8.1 या इससे पहले के वर्शन पर काम करने वाले डिवाइसों पर भी डिसप्ले कटआउट की सुविधा दे सकती हैं.

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

इस इमेज में, डिसप्ले के बीच में सबसे ऊपर मौजूद कटआउट का उदाहरण दिखाया गया है
पहली इमेज. 1 डिसप्ले कटआउट.

चुनें कि आपका ऐप्लिकेशन, कटआउट वाले हिस्सों को कैसे मैनेज करता है

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

यह भी पता लगाया जा सकता है कि कॉन्टेंट, कटआउट एरिया के पीछे है या नहीं. layoutInDisplayCutoutMode विंडो लेआउट एट्रिब्यूट से यह कंट्रोल किया जाता है कि कटआउट एरिया में आपका कॉन्टेंट कैसे दिखेगा. layoutInDisplayCutoutMode को इनमें से किसी एक वैल्यू पर सेट किया जा सकता है:

  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT: जब डिसप्ले कटआउट, सिस्टम बार में शामिल होता है, तब कॉन्टेंट, कटआउट एरिया में रेंडर होता है. इसके अलावा, विंडो डिसप्ले कटआउट से ओवरलैप नहीं होती. उदाहरण के लिए, लैंडस्केप मोड में कॉन्टेंट को लेटरबॉक्स किया जा सकता है. अगर आपका ऐप्लिकेशन SDK 35 को टारगेट करता है, तो इसका मतलब है कि यह गैर-फ़्लोटिंग विंडो के लिए ALWAYS है.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS: कॉन्टेंट को हमेशा कटआउट एरिया में दिखाने की अनुमति होती है. अगर आपका ऐप्लिकेशन एसडीके 35 को टारगेट करता है और Android 15 वाले डिवाइस पर चल रहा है, तो एज-टू-एज डिसप्ले के लिए, फ़्लोटिंग विंडो के अलावा अन्य विंडो के लिए सिर्फ़ इस मोड का इस्तेमाल किया जा सकता है.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES: कॉन्टेंट, पोर्ट्रेट और लैंडस्केप मोड, दोनों में कटआउट एरिया में रेंडर होता है. फ़्लोटिंग विंडो के लिए इस्तेमाल न करें. अगर आपका ऐप्लिकेशन SDK 35 को टारगेट करता है, तो इसका मतलब है कि यह ALWAYS है. हालांकि, यह फ़्लोटिंग विंडो के लिए नहीं है.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER: कॉन्टेंट, कटआउट वाले हिस्से में कभी रेंडर नहीं होता. अगर आपका ऐप्लिकेशन SDK 35 को टारगेट करता है, तो इसे नॉन-फ़्लोटिंग विंडो के लिए ALWAYS के तौर पर माना जाएगा.

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

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, or never -->
  </item>
</style>

यहां दिए गए सेक्शन में, कटआउट के अलग-अलग मोड के बारे में ज़्यादा जानकारी दी गई है.

डिफ़ॉल्ट सेटिंग

अगर आपका ऐप्लिकेशन एसडीके 35 को टारगेट करता है और Android 15 डिवाइस पर चल रहा है, तो LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS डिफ़ॉल्ट व्यवहार है. साथ ही, फ़्लोटिंग विंडो के लिए LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT को LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS के तौर पर माना जाता है.

ऐसा न होने पर, LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT डिफ़ॉल्ट वैल्यू होती है.

छोटे किनारे पर मौजूद कटआउट वाले हिस्सों में कॉन्टेंट रेंडर करना

अगर आपका ऐप्लिकेशन एसडीके 35 को टारगेट करता है और Android 15 वाले डिवाइस पर चल रहा है, तो LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES को नॉन-फ़्लोटिंग विंडो के लिए LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS के तौर पर माना जाएगा.

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

नीचे दी गई इमेज में, पोर्ट्रेट मोड में मौजूद डिवाइस के लिए LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES का उदाहरण दिखाया गया है:

पोर्ट्रेट मोड में, कटआउट एरिया में कॉन्टेंट रेंडर करने वाली इमेज
दूसरी इमेज. पोर्ट्रेट मोड में, कटआउट वाली जगह पर कॉन्टेंट रेंडर हो रहा है.

लैंडस्केप मोड में डिवाइस के लिए, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES का उदाहरण यहां दिया गया है:

लैंडस्केप मोड में, कटआउट वाली जगह पर कॉन्टेंट रेंडर होने की इमेज
तीसरी इमेज. लैंडस्केप मोड में, कटआउट वाली जगह पर कॉन्टेंट रेंडर हो रहा है.

इस मोड में, विंडो को पोर्ट्रेट और लैंडस्केप, दोनों मोड में डिसप्ले के छोटे किनारे पर मौजूद कटआउट के नीचे तक बढ़ाया जाता है. इससे कोई फ़र्क़ नहीं पड़ता कि विंडो, सिस्टम बार को छिपा रही है या नहीं.

कोने में मौजूद कटआउट को छोटे किनारे पर माना जाता है:

इस इमेज में, कोने पर कटआउट वाला एक डिवाइस दिखाया गया है
चौथी इमेज. कोने में कटआउट वाला डिवाइस.

डिसप्ले कटआउट एरिया में कभी भी कॉन्टेंट रेंडर न करें

अगर आपका ऐप्लिकेशन एसडीके 35 को टारगेट करता है और Android 15 वाले डिवाइस पर चल रहा है, तो LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER को नॉन-फ़्लोटिंग विंडो के लिए LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS के तौर पर माना जाएगा.

LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER के साथ, विंडो को कभी भी कटआउट एरिया के साथ ओवरलैप करने की अनुमति नहीं होती.

यहां पोर्ट्रेट मोड में LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER का एक उदाहरण दिया गया है:

पोर्ट्रेट मोड के लिए LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER दिखाने वाली इमेज
पांचवीं इमेज. पोर्ट्रेट मोड के लिए LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER का उदाहरण.

लैंडस्केप मोड में LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER का एक उदाहरण यहां दिया गया है:

लैंडस्केप मोड के लिए LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER दिखाने वाली इमेज
छठी इमेज. लैंडस्केप मोड में LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER का उदाहरण.

डिसप्ले कटआउट की सुविधा के लिए सबसे सही तरीके

डिस्प्ले कटआउट के साथ काम करते समय, इन बातों का ध्यान रखें:

  • यूज़र इंटरफ़ेस (यूआई) के ज़रूरी एलिमेंट की जगह का ध्यान रखें. कटआउट एरिया की वजह से, कोई भी ज़रूरी टेक्स्ट, कंट्रोल या अन्य जानकारी नहीं छिपनी चाहिए.
  • कटआउट एरिया में ऐसे इंटरैक्टिव एलिमेंट न रखें या न बढ़ाएं जिनके लिए, सटीक तरीके से टच को पहचानना ज़रूरी हो. कटआउट वाली जगह पर टच सेंसिटिविटी कम हो सकती है.

  • जहां हो सके वहां WindowInsetsCompat का इस्तेमाल करके, स्टेटस बार की ऊंचाई का पता लगाएं. साथ ही, अपने कॉन्टेंट में सही पैडिंग लागू करने के लिए, इसका इस्तेमाल करें. स्टेटस बार की ऊंचाई को हार्डकोड न करें. ऐसा करने पर, कॉन्टेंट ओवरलैप हो सकता है या कट सकता है.

    इस इमेज में दिखाया गया है कि सही तरीके से इनसेट सेट अप न करने की वजह से, कॉन्टेंट सबसे ऊपर से कट गया है
    सातवीं इमेज. कॉन्टेंट को ओवरलैप होने या कटने से बचाने के लिए, WindowInsetsCompat का इस्तेमाल करें.

  • View.getLocationInWindow() का इस्तेमाल करके, यह पता लगाएं कि आपका ऐप्लिकेशन विंडो की कितनी जगह इस्तेमाल कर रहा है. यह न मान लें कि ऐप्लिकेशन पूरी विंडो का इस्तेमाल कर रहा है. साथ ही, View.getLocationOnScreen() का इस्तेमाल न करें.

  • अगर आपके ऐप्लिकेशन को इमर्सिव मोड में ट्रांज़िशन करने और उससे बाहर निकलने की ज़रूरत है, तो always, shortEdges या never कटआउट मोड का इस्तेमाल करें. डिफ़ॉल्ट कटआउट सेटिंग की वजह से, आपके ऐप्लिकेशन का कॉन्टेंट कटआउट वाले हिस्से में रेंडर हो सकता है. ऐसा तब होता है, जब सिस्टम बार मौजूद होते हैं. हालांकि, इमर्सिव मोड में ऐसा नहीं होता. इस वजह से, ट्रांज़िशन के दौरान कॉन्टेंट ऊपर और नीचे जाता है. इसे यहां दिए गए उदाहरण में दिखाया गया है.

    ट्रांज़िशन के दौरान, कॉन्टेंट को ऊपर और नीचे की ओर जाते हुए दिखाने वाली इमेज.
    आठवीं इमेज. ट्रांज़िशन के दौरान, कॉन्टेंट के ऊपर और नीचे जाने का उदाहरण.

  • इमर्सिव मोड में, विंडो और स्क्रीन के कोऑर्डिनेट का इस्तेमाल करते समय सावधानी बरतें. ऐसा इसलिए, क्योंकि लेटरबॉक्स किए जाने पर आपका ऐप्लिकेशन पूरी स्क्रीन का इस्तेमाल नहीं करता. लेटरबॉक्स की वजह से, स्क्रीन के शुरुआती बिंदु से लिए गए कोऑर्डिनेट, विंडो के शुरुआती बिंदु से लिए गए कोऑर्डिनेट से अलग होते हैं. getLocationOnScreen() का इस्तेमाल करके, स्क्रीन के कोऑर्डिनेट को व्यू के कोऑर्डिनेट में बदला जा सकता है. इस इमेज में दिखाया गया है कि लेटरबॉक्स किए गए कॉन्टेंट में कोऑर्डिनेट कैसे अलग-अलग होते हैं:

    लेटरबॉक्स किए गए कॉन्टेंट के लिए, विंडो और स्क्रीन के कोऑर्डिनेट दिखाने वाली इमेज.
    नौवीं इमेज. कॉन्टेंट लेटरबॉक्स किए जाने पर, विंडो बनाम स्क्रीन के कोऑर्डिनेट.

  • MotionEvent को हैंडल करते समय, MotionEvent.getX() और MotionEvent.getY() का इस्तेमाल करें, ताकि मिलती-जुलती कोऑर्डिनेट की समस्याओं से बचा जा सके. MotionEvent.getRawX() या MotionEvent.getRawY() का इस्तेमाल न करें.

यह जांच करना कि आपका कॉन्टेंट कैसा दिखता है

अपने ऐप्लिकेशन की सभी स्क्रीन और सुविधाओं को टेस्ट करें. अगर हो सके, तो अलग-अलग तरह के कटआउट वाले डिवाइसों पर टेस्ट करें. अगर आपके पास कटआउट वाला डिवाइस नहीं है, तो Android 9 या इसके बाद के वर्शन पर चलने वाले किसी भी डिवाइस या एम्युलेटर पर, कटआउट के सामान्य कॉन्फ़िगरेशन को सिम्युलेट किया जा सकता है. इसके लिए, यह तरीका अपनाएं:

  1. डेवलपर के लिए सेटिंग और टूल चालू करें.
  2. डेवलपर के लिए सेटिंग और टूल स्क्रीन पर, नीचे की ओर स्क्रोल करके ड्राइंग सेक्शन पर जाएं. इसके बाद, कटआउट वाले डिसप्ले को सिम्युलेट करें को चुनें.

  3. कटआउट का टाइप चुनें.

    इम्यूलेटर में डिसप्ले कटआउट को सिम्युलेट करने का तरीका दिखाने वाली इमेज
    दसवीं इमेज. डेवलपर के लिए सेटिंग और टूल. इनसे यह जांच की जा सकती है कि आपका कॉन्टेंट कैसे रेंडर होता है.

अन्य संसाधन