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

Compose का इस्तेमाल करके मैसेज लिखना

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

Compose में एक किनारे से दूसरे किनारे तक →

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

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

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

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

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

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

दूसरी इमेज. स्टेटस बार के पीछे मौजूद इमेज का उदाहरण.

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

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

अगर आपका ऐप्लिकेशन, 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 से पहले कॉल किया जाना चाहिए.

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-ऐक्सिस में दिखता है. इनका इस्तेमाल, आपके ऐप्लिकेशन में टैप किए जा सकने वाले व्यू को मूव करने या पैड करने के लिए किया जाता है. साथ ही, यह ज़रूरी है कि सिस्टम बार से ये व्यू न छिपें.

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

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

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

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

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

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

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

छठी इमेज. सिस्टम जेस्चर इनसेट.

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

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

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

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

इमर्सिव मोड

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

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

अन्य संसाधन

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

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