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

लिखने का तरीका आज़माएं

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

Compose में एज-टू-एज →

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

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

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

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

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

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

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

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

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

   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'
   }

2. enableEdgeToEdge इंपोर्ट करें एक्सटेंशन फ़ंक्शन को जोड़ना होगा:

enableEdgeToEdge को कॉल करके, मैन्युअल तौर पर एज-टू-एज की सुविधा चालू करें आपके Activity में से onCreate में. इसे 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() फ़ंक्शन, देखें एज-टू-एज डिसप्ले को मैन्युअल तरीके से सेट अप करें.

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

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

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

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

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

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

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

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

सिस्टम बार इनसेट, सबसे ज़्यादा इस्तेमाल किए जाने वाले इनसेट हैं. वे वह हिस्सा जहां सिस्टम यूज़र इंटरफ़ेस (यूआई) आपके ऐप्लिकेशन के ऊपर 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 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" />

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

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

सिस्टम बार इनसेट की तरह, सिस्टम जेस्चर इनसेट को ओवरलैप होने से रोका जा सकता है इसका उपयोग कर रहा है getInsets(int) के साथ 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){:.external} इनसेट को अपने-आप हैंडल करता है. इनमें ये शामिल हैं BottomAppBar, BottomNavigationView, NavigationRailView और NavigationView

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

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

इमर्सिव मोड

कुछ कॉन्टेंट को फ़ुल स्क्रीन मोड में देखना सबसे अच्छा होता है. इससे लोगों को ज़्यादा बेहतर अनुभव मिलता है शानदार अनुभव. इमर्सिव मोड के लिए सिस्टम बार को इनका इस्तेमाल करके छिपाया जा सकता है 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());

इमर्सिव मोड के लिए सिस्टम बार छिपाएं देखें देखें.

अन्य संसाधन

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

• WindowInsets — लेआउट को लिसनर
• जेस्चर वाला नेविगेशन: इनसेट
• Android पर इनसेट कैसे काम करते हैं?