अपने ऐप्लिकेशन में कॉन्टेंट को एक से दूसरे किनारे तक दिखाएं

'लिखें' सुविधा आज़माएं

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

लिखने की सुविधा को पूरे स्क्रीन पर इस्तेमाल करना →

Android 15 या उसके बाद के वर्शन पर चलने वाले डिवाइस पर, SDK 35 या उसके बाद के वर्शन को टारगेट करने के बाद, आपका ऐप्लिकेशन एज-टू-एज दिखता है. यह विंडो, सिस्टम बार के पीछे बनकर डिसप्ले की पूरी चौड़ाई और ऊंचाई पर दिखती है. सिस्टम बार में स्टेटस बार, कैप्शन बार, और नेविगेशन बार शामिल हैं.

कई ऐप्लिकेशन में सबसे ऊपर ऐप्लिकेशन बार होता है. सबसे ऊपर मौजूद ऐप्लिकेशन बार, स्क्रीन के सबसे ऊपरी किनारे तक होना चाहिए और स्टेटस बार के पीछे दिखना चाहिए. इसके अलावा, कॉन्टेंट को स्क्रोल करने पर, सबसे ऊपर मौजूद ऐप्लिकेशन बार को, स्टेटस बार की ऊंचाई तक छोटा किया जा सकता है.

कई ऐप्लिकेशन में, स्क्रीन के सबसे नीचे मौजूद ऐप्लिकेशन बार या बॉटम नेविगेशन बार भी होता है. ये बार, स्क्रीन के सबसे नीचे तक भी दिखने चाहिए और नेविगेशन बार के पीछे दिखने चाहिए. अगर ऐसा नहीं है, तो ऐप्लिकेशन को नेविगेशन बार के पीछे स्क्रोल किया जा सकने वाला कॉन्टेंट दिखाना चाहिए.

अपने ऐप्लिकेशन में एज-टू-एज लेआउट लागू करते समय, इन बातों का ध्यान रखें:

1. एज-टू-एज डिसप्ले की सेटिंग चालू करना
2. विज़ुअल ओवरलैप को मैनेज करना.
3. सिस्टम बार के पीछे स्क्रीम दिखाएं.

एज-टू-एज डिसप्ले की सेटिंग चालू करें

अगर आपका ऐप्लिकेशन, SDK टूल 35 या उसके बाद के वर्शन को टारगेट करता है, तो Android 15 या उसके बाद के वर्शन वाले डिवाइसों के लिए, एज-टू-एज डिसप्ले अपने-आप चालू हो जाता है.

Android के पुराने वर्शन पर एज-टू-एज डिसप्ले की सेटिंग चालू करने के लिए, यह तरीका अपनाएं:

1. अपने ऐप्लिकेशन या मॉड्यूल की build.gradle फ़ाइल में, androidx.activity लाइब्रेरी के लिए डिपेंडेंसी जोड़ें:

   Kotlin

   dependencies {
       val activity_version = activity_version
       // Java language implementation
       implementation("androidx.activity:activity:$activity_version")
       // Kotlin
       implementation("androidx.activity:activity-ktx:$activity_version")
   }

   Groovy

   dependencies {
       def activity_version = activity_version
       // Java language implementation
       implementation 'androidx.activity:activity:$activity_version'
       // Kotlin
       implementation 'androidx.activity:activity-ktx:$activity_version'
   }

2. अपने ऐप्लिकेशन में enableEdgeToEdge एक्सटेंशन फ़ंक्शन इंपोर्ट करें:

एज-टू-एज डिसप्ले की सेटिंग को मैन्युअल तरीके से चालू करने के लिए, अपने Activity के onCreate में जाकर enableEdgeToEdge को कॉल करें. इसे setContentView से पहले कॉल किया जाना चाहिए.

     override fun onCreate(savedInstanceState: Bundle?) {
       enableEdgeToEdge()
       super.onCreate(savedInstanceState)
       ...
     }
   

     @Override
     protected void onCreate(@Nullable Bundle savedInstanceState) {
       EdgeToEdge.enable(this);
       super.onCreate(savedInstanceState);
       ...
     }
   

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

enableEdgeToEdge() फ़ंक्शन अपने-आप यह तय करता है कि ऐप्लिकेशन को किनारे से किनारे तक दिखाया जाना चाहिए. साथ ही, यह सिस्टम बार के रंगों में बदलाव करता है.

enableEdgeToEdge() फ़ंक्शन का इस्तेमाल किए बिना, अपने ऐप्लिकेशन में एज-टू-एज डिसप्ले की सुविधा चालू करने के लिए, एज-टू-एज डिसप्ले को मैन्युअल तरीके से सेट अप करना लेख पढ़ें.

इनसेट का इस्तेमाल करके ओवरलैप मैनेज करना

आपके ऐप्लिकेशन के कुछ व्यू, सिस्टम बार के पीछे दिख सकते हैं, जैसा कि तीसरे चित्र में दिखाया गया है.

इनसेट पर प्रतिक्रिया देकर, ओवरलैप की समस्या को हल किया जा सकता है. इनसेट से पता चलता है कि स्क्रीन के कौनसे हिस्से, सिस्टम यूज़र इंटरफ़ेस (यूआई) से इंटरसेक्शन करते हैं. जैसे, नेविगेशन बार या स्टेटस बार. इंटरसेक्शन का मतलब कॉन्टेंट के ऊपर दिखने से हो सकता है. हालांकि, इससे आपके ऐप्लिकेशन को सिस्टम जेस्चर के बारे में भी जानकारी मिल सकती है.

ऐप्लिकेशन को किनारों तक दिखाने के लिए, इनसेट के ये टाइप इस्तेमाल किए जा सकते हैं:

• सिस्टम बार इनसेट: यह विकल्प उन व्यू के लिए सबसे अच्छा है जिन पर टैप किया जा सकता है और जिन्हें सिस्टम बार से छिपाया नहीं जाना चाहिए.

• कटआउट इनसेट दिखाएं: उन जगहों के लिए जहां डिवाइस के आकार की वजह से स्क्रीन में कटआउट हो सकता है.

• सिस्टम जेस्चर इनसेट: ये जेस्चर-नेविगेशन वाले ऐसे एरिया होते हैं जिनका इस्तेमाल सिस्टम करता है और जो आपके ऐप्लिकेशन से ज़्यादा प्राथमिकता पाते हैं.

सिस्टम बार इनसेट

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

उदाहरण के लिए, तीसरे चित्र में फ़्लोटिंग ऐक्शन बटन (एफ़एबी) को नेविगेशन बार ने कुछ हद तक छिपा दिया है:

जेस्चर मोड या बटन मोड में, इस तरह के विज़ुअल ओवरलैप से बचने के लिए, WindowInsetsCompat.Type.systemBars() के साथ getInsets(int) का इस्तेमाल करके व्यू के मार्जिन को बढ़ाया जा सकता है.

यहां दिए गए कोड के उदाहरण में, सिस्टम बार इनसेट को लागू करने का तरीका बताया गया है:

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams> {
      leftMargin = insets.left
      bottomMargin = insets.bottom
      rightMargin = insets.right
  }

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

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

यह बात जेस्चर वाले नेविगेशन मोड पर भी लागू होती है, जैसा कि पांचवीं इमेज में दिखाया गया है:

डिसप्ले कटआउट इनसेट

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

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

ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets ->
  val bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
      or WindowInsetsCompat.Type.displayCutout()
  )
  v.updatePadding(
    left = bars.left,
    top = bars.top,
    right = bars.right,
    bottom = bars.bottom,
  )
  WindowInsetsCompat.CONSUMED
}

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  Insets bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

सिस्टम बार और डिसप्ले के कटआउट टाइप के लॉजिकल या का इस्तेमाल करके, WindowInsetsCompat की वैल्यू तय करें.

clipToPadding को RecyclerView पर सेट करें, ताकि पैडिंग, सूची के आइटम के साथ स्क्रोल हो. इससे, उपयोगकर्ता के स्क्रोल करने पर आइटम, सिस्टम बार के पीछे चले जाते हैं, जैसा कि इस उदाहरण में दिखाया गया है.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

सिस्टम जेस्चर इनसेट

सिस्टम जेस्चर इनसेट, विंडो के उन हिस्सों को दिखाते हैं जहां आपके ऐप्लिकेशन के मुकाबले, सिस्टम जेस्चर को प्राथमिकता दी जाती है. ये हिस्से, छठे चित्र में नारंगी रंग में दिखाए गए हैं:

सिस्टम बार इनसेट की तरह, WindowInsetsCompat.Type.systemGestures() के साथ getInsets(int) का इस्तेमाल करके, सिस्टम जेस्चर इनसेट के ओवरलैप होने से बचा जा सकता है.

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

Android 10 या उसके बाद के वर्शन में, सिस्टम जेस्चर इनसेट में होम जेस्चर के लिए सबसे नीचे इनसेट और बैक जेस्चर के लिए बाईं और दाईं ओर इनसेट होते हैं:

नीचे दिए गए कोड के उदाहरण में, सिस्टम जेस्चर इनसेट को लागू करने का तरीका बताया गया है:

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

मटीरियल कॉम्पोनेंट

व्यू पर आधारित कई Android Material Components (com.google.android.material){:.external} अपने-आप इनसेट मैनेज करते हैं. इनमें BottomAppBar, BottomNavigationView, NavigationRailView और NavigationView शामिल हैं

हालांकि, AppBarLayout से इनसेट अपने-आप नहीं बनते. टॉप इनसेट मैनेज करने के लिए, android:fitsSystemWindows="true" जोड़ें.

Compose में मौजूद Material Components की मदद से इनसेट मैनेज करने का तरीका जानें.

पुराने सिस्टम के साथ काम करने वाली इनसेट डिस्पैचिंग

बच्चों के व्यू में इनसेट डिस्पैच होने से रोकने और ओवर-पैडिंग से बचने के लिए, WindowInsetsCompat.CONSUMED कॉन्स्टेंट का इस्तेमाल करके इनसेट का इस्तेमाल किया जा सकता है. हालांकि, Android 10 (एपीआई लेवल 29 और उससे पहले के वर्शन) वाले डिवाइसों पर, WindowInsetsCompat.CONSUMED को कॉल करने के बाद इनसेट, सिबलिंग डिवाइसों पर डिस्पैच नहीं किए जाते. इस वजह से, विज़ुअल ओवरलैप हो सकता है.

यह पक्का करने के लिए कि इनसेट, काम करने वाले सभी Android वर्शन के लिए, सिबलिंग को डिस्पैच किए जाते हैं, इनसेट का इस्तेमाल करने से पहले ViewGroupCompat#installCompatInsetsDispatch का इस्तेमाल करें. यह AndroidX Core और Core-ktx 1.16.0-alpha01 और इसके बाद के वर्शन पर उपलब्ध है.

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
val rootView = findViewById(R.id.main)
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView)

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
LinearLayout rootView = findViewById(R.id.main);
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView);

इमर्सिव मोड

कुछ कॉन्टेंट को फ़ुल स्क्रीन में देखने पर, उपयोगकर्ता को बेहतर अनुभव मिलता है. इमर्सिव मोड के लिए, WindowInsetsController और WindowInsetsControllerCompat लाइब्रेरी का इस्तेमाल करके, सिस्टम बार छिपाए जा सकते हैं:

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

इस सुविधा को लागू करने के बारे में ज़्यादा जानने के लिए, इमर्सिव मोड के लिए सिस्टम बार छिपाना पढ़ें.

सिस्टम बार के आइकॉन

enableEdgeToEdge को कॉल करने से, डिवाइस की थीम बदलने पर, सिस्टम बार के आइकॉन के रंग अपडेट हो जाते हैं.

ऐप्लिकेशन को पूरे स्क्रीन पर दिखाने के लिए, आपको सिस्टम बार के आइकॉन के रंगों को मैन्युअल तरीके से अपडेट करना पड़ सकता है, ताकि वे आपके ऐप्लिकेशन के बैकग्राउंड से अलग दिखें. उदाहरण के लिए, स्टेटस बार के आइकॉन को हल्का बनाने के लिए:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

WindowCompat.getInsetsController(window, window.getDecorView())
    .setAppearanceLightStatusBars(false);

सिस्टम बार की सुरक्षा

जब आपका ऐप्लिकेशन SDK टूल 35 या उसके बाद के वर्शन को टारगेट करता है, तो एज-टू-एज डिसप्ले लागू हो जाता है. सिस्टम स्टेटस बार और जेस्चर नेविगेशन बार पारदर्शी होते हैं. हालांकि, तीन बटन वाला नेविगेशन बार पारभासक होता है.

नेविगेशन के बैकग्राउंड में, डिफ़ॉल्ट रूप से दिखने वाले तीन बटन की पारदर्शी सुरक्षा हटाने के लिए, Window.setNavigationBarContrastEnforced को false पर सेट करें.

अन्य सलाह

देखें कि सूची का आखिरी आइटम, आपके RecyclerView या NestedScrollView में सिस्टम बार से छिपा हुआ तो नहीं है. इसके लिए, इनसेट मैनेज करें और clipToPadding को false पर सेट करें.

इस वीडियो में, RecyclerView को किनारे से किनारे तक दिखने वाले डिसप्ले के साथ दिखाया गया है. इसमें बाईं ओर, डिसप्ले की सुविधा बंद है और दाईं ओर, डिसप्ले की सुविधा चालू है:

कोड सैंपल के लिए, RecyclerView की मदद से डाइनैमिक सूचियां बनाएं सेक्शन में कोड स्निपेट देखें.

अन्य संसाधन

WindowInsets, जेस्चर नेविगेशन, और इनसेट के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, नीचे दिए गए रेफ़रंस देखें:

• Android सिस्टम बार
• Android 15 में एज-टू-एज डिसप्ले की सुविधा लागू करने के लिए, इनसेट मैनेज करने से जुड़ी सलाह
• WindowInsets — लेआउट के लिसनर
• जेस्चर वाला नेविगेशन: इनसेट
• Android पर इनसेट कैसे काम करते हैं?