व्यू में कॉन्टेंट को किनारे से किनारे तक दिखाना

Compose को आज़माएं

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

Compose में एज-टू-एज डिसप्ले की सुविधा →

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

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

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

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

1. एज-टू-एज डिसप्ले की सुविधा चालू करें
2. अलग-अलग फ़ॉर्म फ़ैक्टर पर उपयोगकर्ता अनुभव को ऑप्टिमाइज़ करने के लिए, अडैप्टिव लेआउट लागू करें
3. विज़ुअल ओवरलैप को मैनेज करें
4. सिस्टम बार के पीछे, स्क्रिम दिखाने पर विचार करें

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

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

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

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

 @Override
      protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WindowCompat.enableEdgeToEdge(getWindow());
        ...
      }

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

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

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

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

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

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

• सिस्टम बार इनसेट: ऐसे व्यू के लिए सबसे सही है जिन पर टैप किया जा सकता है और जो सिस्टम बार की वजह से विज़ुअल तौर पर नहीं दिखने चाहिए.

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

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

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

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

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

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

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

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

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

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

<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" />

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

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

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

इन इनसेट का इस्तेमाल करके, स्वाइप किए जा सकने वाले व्यू को किनारों से दूर ले जाएं या पैड करें. आम तौर पर, इनका इस्तेमाल बॉटम शीट, गेम में स्वाइप करने, और 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 के कई मटीरियल कॉम्पोनेंट (com.google.android.material) इनसेट को अपने-आप मैनेज करते हैं. इनमें BottomAppBar, BottomNavigationView, NavigationRailView और NavigationView शामिल हैं

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

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

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

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

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

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

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

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

हालांकि, हो सकता है कि सिस्टम के डिफ़ॉल्ट, सभी इस्तेमाल के मामलों के लिए काम न करें. यह तय करने के लिए कि पारदर्शी या पारभासी सिस्टम बार का इस्तेमाल करना है या नहीं, Android सिस्टम बार के डिज़ाइन से जुड़े दिशा-निर्देश और एज-टू-एज डिज़ाइन देखें.

पारदर्शी सिस्टम बार बनाना

Android 15 (एसडीके 35) या इसके बाद के वर्शन को टारगेट करके या पुराने वर्शन के लिए डिफ़ॉल्ट आर्ग्युमेंट के साथ enableEdgeToEdge() को कॉल करके, पारदर्शी स्टेटस बार बनाएं.

Android 15 या इसके बाद के वर्शन को टारगेट करके या पुराने वर्शन के लिए डिफ़ॉल्ट आर्ग्युमेंट के साथ enableEdgeToEdge() को कॉल करके, पारदर्शी जेस्चर नेविगेशन बार बनाएं. तीन बटन वाले नेविगेशन बार के लिए, को Window.setNavigationBarContrastEnforced false पर सेट करें. ऐसा न करने पर, पारभासी स्क्रिम लागू होगा.

पारभासी सिस्टम बार बनाना

पारभासी स्टेटस बार बनाने के लिए, यह तरीका अपनाएं:

1. अपनी androidx-core डिपेंडेंसी को 1.16.0-beta01 या इसके बाद के वर्शन पर अपडेट करें
2. अपने एक्सएमएल लेआउट को androidx.core.view.insets.ProtectionLayout में रैप करें और कोई आईडी असाइन करें.
3. प्रोटेक्शन सेट करने के लिए, प्रोग्राम के ज़रिए ProtectionLayout को ऐक्सेस करें. साथ ही, स्टेटस बार के लिए साइड और GradientProtection तय करें.

<androidx.core.view.insets.ProtectionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_protection"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/item_list"
        android:clipToPadding="false"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--items-->

    </ScrollView>

</androidx.core.view.insets.ProtectionLayout>
system_bar_protection.xml

findViewById<ProtectionLayout>(R.id.list_protection)
    .setProtections(
        listOf(
            GradientProtection(
                WindowInsetsCompat.Side.TOP,
                // Ideally, this is the pane's background color
                paneBackgroundColor
            )
        )
    )
SystemBarProtectionSnippet.kt

पक्का करें कि GradientProtection में पास किया गया ColorInt, कॉन्टेंट के बैकग्राउंड से मेल खाता हो. उदाहरण के लिए, फ़ोल्ड होने वाले डिवाइस पर दिखने वाले लिस्ट-डिटेल लेआउट में, लिस्ट पैनल और डिटेल पैनल के लिए अलग-अलग रंगों के GradientProtections हो सकते हैं.

पारभासी जेस्चर नेविगेशन बार न बनाएं. पारभासी तीन बटन वाला नेविगेशन बार बनाने के लिए, इनमें से कोई एक काम करें:

• अगर आपके लेआउट को पहले से ही ProtectionView में रैप किया गया है, तो setProtections तरीके में, ColorProtection या GradientProtection को पास किया जा सकता है. ऐसा करने से पहले, पक्का करें कि window.isNavigationBarContrastEnforced = false हो.
• इसके अलावा, window.isNavigationBarContrastEnforced = true सेट करें.

अन्य सुझाव

इनसेट को मैनेज करते समय कुछ और सुझाव.

स्क्रोल करने वाले कॉन्टेंट को एज-टू-एज डिसप्ले में दिखाना

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

यहां दिए गए वीडियो में, RecyclerView को एज-टू-एज डिसप्ले की सुविधा बंद (बाईं ओर) और चालू (दाईं ओर) करके दिखाया गया है:

कोड के उदाहरण के लिए, RecyclerView के साथ डाइनैमिक सूचियां बनाना सेक्शन में दिए गए कोड स्निपेट देखें.

फ़ुल-स्क्रीन डायलॉग को एज-टू-एज डिसप्ले में दिखाना

फ़ुल-स्क्रीन डायलॉग को एज-टू-एज डिसप्ले में दिखाने के लिए, डायलॉग पर enableEdgeToEdge को कॉल करें.

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}

public class MyAlertDialogFragment extends DialogFragment {
    @Override
    public void onStart() {
        super.onStart();
        Dialog dialog = getDialog();
        if (dialog != null) {
            Window window = dialog.getWindow();
            if (window != null) {
                WindowCompat.enableEdgeToEdge(window);
            }
        }
    }
    ...
}

अन्य संसाधन

एज-टू-एज डिसप्ले की सुविधा के बारे में ज़्यादा जानने के लिए, यहां दिए गए रेफ़रंस देखें.

ब्लॉग

• Android 15 में, एज-टू-एज डिसप्ले की सुविधा लागू करने के लिए, इनसेट को मैनेज करने के सुझाव
• WindowInsets — लेआउट के लिए लिसनर

डिज़ाइन

• Android सिस्टम बार
• एज-टू-एज डिज़ाइन

अन्य दस्तावेज़

• Android पर Chrome के लिए, एज-टू-एज डिसप्ले की सुविधा पर माइग्रेट करने की गाइड

वीडियो

• आने वाले समय के लिए Android को तैयार करना
• जेस्चर नेविगेशन: इनसेट