इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

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

पहला डायग्राम. एज-टू-एज लेआउट में सिस्टम बार.

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

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

स्टेटस बार के पीछे की तस्वीरों का एक उदाहरण — **दूसरी इमेज.** स्टेटस बार के पीछे मौजूद इमेज का उदाहरण.

अहम जानकारी: Android 15 (एपीआई लेवल 35) और इसके बाद के वर्शन पर, एज-टू-एज डिसप्ले की सुविधा लागू की जाती है. ऐसा तब होता है, जब आपका ऐप्लिकेशन SDK टूल 35 को टारगेट करता है. अगर आपका ऐप्लिकेशन पहले से ही पूरे डिवाइस के स्क्रीन साइज़ के हिसाब से नहीं है, तो हो सकता है कि आपके ऐप्लिकेशन के कुछ हिस्से छिप जाएं. ऐसे में, आपको इनसेट मैनेज करने होंगे. ऐप्लिकेशन के हिसाब से, यह काम अहम हो भी सकता है और नहीं भी.

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

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

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

अपने ऐप्लिकेशन या मॉड्यूल की 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")
}

ग्रूवी

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

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

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

Kotlin

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

Java

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

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

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

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

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

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

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

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

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

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

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

उदाहरण के लिए, तीसरी इमेज में मौजूद फ़्लोटिंग ऐक्शन बटन (एफ़एबी) नेविगेशन बार की वजह से कुछ हद तक धुंधला दिखता है:

लागू किए गए एज-टू-एज का एक उदाहरण, लेकिन नेविगेशन बार, एफ़एबी को कवर कर रहा है — **तीसरा डायग्राम.** नेविगेशन बार, जो एफ़एबी को एक से दूसरे किनारे तक के लेआउट में ओवरलैप कर रहा है.

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

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

Kotlin

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
}

Java

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;
});

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

पारदर्शी नेविगेशन बार, जो एफ़एबी को कवर नहीं करता — **चौथी इमेज.** बटन मोड में विज़ुअल ओवरलैप की समस्या को ठीक करना.

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

जेस्चर वाले नेविगेशन के साथ किनारे से किनारे तक — **पांचवीं इमेज.** जेस्चर वाले नेविगेशन मोड में विज़ुअल ओवरलैप की समस्या को ठीक करना.

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

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

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

Kotlin

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
}

Java

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 या इसके बाद के वर्शन में, सिस्टम जेस्चर इनसेट में होम जेस्चर के लिए सबसे नीचे एक इनसेट और बैक जेस्चर के लिए बाईं और दाईं ओर एक-एक इनसेट होता है:

सिस्टम जेस्चर इनसेट मेज़रमेंट का उदाहरण — **सातवीं इमेज.** सिस्टम जेस्चर इनसेट की मेज़रमेंट.

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

Kotlin

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
}

Java

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 मटीरियल कॉम्पोनेंट (com.google.android.material){:.external} का इस्तेमाल करके, इनसेट को अपने-आप मैनेज किया जाता है. इनमें BottomAppBar, BottomNavigationView, NavigationRailView और NavigationView शामिल हैं

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

Compose में मटीरियल कॉम्पोनेंट की मदद से इनसेट को हैंडल करने का तरीका जानें.

इमर्सिव मोड

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

Kotlin

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

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

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

Java

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());

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

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

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

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

अन्य संसाधन

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