अपने यूज़र इंटरफ़ेस (यूआई) को सिस्टम स्टेटस बार के साथ अलाइन करना

Wear OS 7 (एपीआई 37) तक, प्लैटफ़ॉर्म पर ऐप्लिकेशन विंडो के ऊपर सिस्टम स्टेटस बार रेंडर नहीं होता था. ऐप्लिकेशन पूरी स्क्रीन पर दिखते थे और सबसे ऊपर (12 बजे की पोज़िशन) कोई भी कॉन्टेंट दिखाया जा सकता था. जैसे, ऐप्लिकेशन में मौजूद TimeText घड़ी, पसंद के मुताबिक बनाए गए घुमावदार हेडर या सबसे ऊपर मौजूद कंट्रोल.

Wear OS 8 से, सिस्टम ऐप्लिकेशन विंडो के ऊपर 12 बजे की पोज़िशन पर स्टेटस बार रेंडर करता है. इससे समय और स्टेटस इंडिकेटर दिखते हैं. यह सुविधा, Wear OS 7.1 बीटा वर्शन की झलक वाले एम्युलेटर (एपीआई 37.2-beta1) में, सार्वजनिक तौर पर उपलब्ध होने से पहले वाले वर्शन की टेस्टिंग के लिए उपलब्ध है. सिस्टम के स्टेटस बार के साथ ओवरलैप होने से बचने के लिए, ऐप्लिकेशन को अपनी घड़ी (TimeText) रेंडर करना बंद कर देना चाहिए. साथ ही, सबसे ऊपर मौजूद स्टेटस बार विंडो के इनसेट का ध्यान रखना चाहिए. Wear Compose 1.8 और इसके बाद के वर्शन में, AppScaffold और ScreenScaffold इसे अपने-आप मैनेज करते हैं. इसके अलावा, फ़ुल-स्क्रीन इमर्सिव अनुभव की ज़रूरत होने पर, सिस्टम के स्टेटस बार को छिपा देना चाहिए.

Wear OS 8 में सिस्टम स्टेटस बार
पहली इमेज. Wear OS 8 में सिस्टम स्टेटस बार.

इसके मुख्य फ़ायदे ये हैं:

  • एक जैसा विज़ुअल: पूरे सिस्टम और सभी ऐप्लिकेशन में, घड़ी की एक जैसी टाइपोग्राफ़ी, प्लेसमेंट, और बैकप्लेट.
  • सिस्टम स्टेटस इंडिकेटर: इससे प्लैटफ़ॉर्म को स्टेटस आइकॉन दिखाने की अनुमति मिलती है. जैसे, चालू माइक्रोफ़ोन और जगह की जानकारी के इंडिकेटर, कनेक्टिविटी स्टेटस या बैटरी की जानकारी. साथ ही, इससे अलग-अलग प्लैटफ़ॉर्म पर समय दिखाने की अनुमति मिलती है. प्राथमिकता के आधार पर, एक बार में सिर्फ़ एक आइकॉन दिखता है.
  • अपने-आप स्क्रोल होने और ट्रांज़िशन के साथ काम करने की सुविधा: Jetpack Compose for Wear OS 1.8 के साथ जोड़े जाने पर, सिस्टम स्टेटस बार अपने-आप छिप जाता है. ऐसा तब होता है, जब उपयोगकर्ता कॉन्टेंट को स्क्रोल करते हैं. इसके बाद, दो सेकंड तक कोई गतिविधि न होने पर, स्टेटस बार फिर से दिखने लगता है.

अपने ऐप्लिकेशन को सेट अप करना

शुरू करने के लिए, ये ज़रूरी शर्तें पूरी करें:

  1. Android Studio Preview (Canary) इंस्टॉल करें.
  2. एसडीके मैनेजर में, Wear OS 7.1 की झलक दिखाने वाले एम्युलेटर की सिस्टम इमेज (एपीआई 37.2-beta1) डाउनलोड करें. इस वर्शन में, Wear OS 8 SDK से पहले Wear OS 8 सिस्टम के स्टेटस बार को सार्वजनिक तौर पर उपलब्ध होने से पहले इस्तेमाल करने की सुविधा मिलती है.
  3. डिवाइस मैनेजर में, API 37.2-beta1 इमेज का इस्तेमाल करके, Wear OS वर्चुअल डिवाइस बनाएं और लॉन्च करें.

अपने ऐप्लिकेशन में सिस्टम स्टेटस बार की सुविधा देने के लिए, ऐप्लिकेशन के targetSdk वर्शन को 35 या इसके बाद के वर्शन पर अपडेट करें. यह प्लैटफ़ॉर्म, एपीआई 35 और इसके बाद के वर्शन को टारगेट करने वाले ऐप्लिकेशन के लिए ही सिस्टम स्टेटस बार को चालू करता है. ऐसा इसलिए किया जाता है, ताकि लेगसी ऐप्लिकेशन, पुराने सिस्टम के साथ काम कर सकें. इसके अलावा, Wear Compose डिपेंडेंसी को नए ऐल्फ़ा वर्शन पर अपडेट करें. फ़िलहाल, यह वर्शन 1.8.0-alpha02 है, जैसा कि यहां दिए गए कोड स्निपेट में दिखाया गया है. अगर आपका ऐप्लिकेशन, Wear Compose के पुराने वर्शन का इस्तेमाल कर रहा है, तो माइग्रेशन को आसान बनाने के लिए, Wear Compose Material 3 माइग्रेशन स्किल का इस्तेमाल किया जा सकता है.

android {
    defaultConfig {
        targetSdk = 35
    }
}

dependencies {
    implementation("androidx.wear.compose:compose-foundation:1.8.0-alpha02")
    implementation("androidx.wear.compose:compose-material3:1.8.0-alpha02")
}

सिस्टम स्टेटस बार का इस्तेमाल करना

Wear Compose Material 3 1.8.0 के नए ऐल्फ़ा वर्शन—फ़िलहाल 1.8.0-alpha02—में, लाइब्रेरी आपके ऐप्लिकेशन को अपने-आप ऑप्ट इन कर लेती है. इसके लिए, वह com.google.wear.ENABLE_GLOBAL_STATUS_BAR <meta-data> प्रॉपर्टी को आपके AndroidManifest.xml में मर्ज करती है. रनटाइम के दौरान, AppScaffold और ScreenScaffold यह जांच करते हैं कि डिवाइस पर सिस्टम स्टेटस बार चालू है या नहीं. साथ ही, यह भी जांच करते हैं कि मेनिफ़ेस्ट ऑप्ट-इन प्रॉपर्टी, true पर सेट है या नहीं:

  • झलक दिखाने वाले एम्युलेटर / Wear OS 8 और इसके बाद के वर्शन पर (शामिल होने पर): AppScaffold अपने इंटरनल TimeText को दबा देता है, ताकि सिस्टम स्टेटस बार 12 बजे की पोज़िशन पर बिना डुप्लीकेट के साफ़ तौर पर रेंडर हो सके. ScreenScaffold स्टेटस बार के इनसेट की सीमाओं को ध्यान में रखते हुए, contentPadding को फिर से कैलकुलेट करता है. साथ ही, सूची को स्क्रोल करने पर स्टेटस बार को छिपाने और दिखाने के लिए, कोऑर्डिनेट करता है.
  • Wear OS 7 और इससे पुराने वर्शन वाले डिवाइसों पर (या ऑप्ट इन न करने पर): AppScaffold यह अपने-आप स्टैंडर्ड इन-ऐप्लिकेशन TimeText को रेंडर करने लगता है. इससे एक ही कोड बेस से, पुराने सिस्टम के साथ काम करने की सुविधा बनी रहती है.
@Composable
fun GsbSampleApp() {
    // AppScaffold coordinates the system status bar across the app
    // and falls back to rendering TimeText on Wear OS 7 and earlier.
    AppScaffold {
        val columnState = rememberTransformingLazyColumnState()

        // ScreenScaffold includes status bar top inset clearance in
        // contentPadding and hides/shows the status bar during list scrolling.
        ScreenScaffold(scrollState = columnState) { contentPadding ->
            TransformingLazyColumn(
                state = columnState,
                contentPadding = contentPadding,
            ) {
                item {
                    ListHeader { Text("Hello Status Bar") }
                }
                items(count = 15) { index ->
                    Button(onClick = { /* Handle click */ }) {
                        Text("Item #${index + 1}")
                    }
                }
            }
        }
    }
}

सैंपल को चलाने पर, आपको यह दिखेगा:

  • रेस्ट मोड में (सूची में सबसे ऊपर): सिस्टम स्टेटस बार, 12 बजे की पोज़िशन पर दिखता है. "Hello Status Bar" हेडर, स्टेटस बार के इनसेट एरिया के नीचे मौजूद होता है. यह न तो क्लिप होता है और न ही ओवरलैप होता है.
  • नीचे की ओर स्क्रोल करना: सूची में मौजूद आइटम स्क्रोल करने पर, स्टेटस बार छिप जाता है. साथ ही, सूची में मौजूद आइटम, सबसे ऊपर मौजूद बेज़ेल के पीछे एक किनारे से दूसरे किनारे तक स्क्रोल होते हैं.
  • कोई गतिविधि न होने पर: स्क्रोल करना बंद करने और स्क्रीन को रिलीज़ करने पर, स्टेटस बार करीब दो सेकंड के बाद अपने-आप फिर से दिखने लगता है.

आम तौर पर सामने आने वाली स्थितियों और कस्टमाइज़ेशन को मैनेज करना

यहां दिए गए सेक्शन में, सिस्टम स्टेटस बार के साथ काम करते समय आने वाली सामान्य समस्याओं को हल करने का तरीका बताया गया है.

स्क्रोल न होने वाली (स्टैटिक) स्क्रीन को मैनेज करना

स्क्रोल की जा सकने वाली सूची के बजाय, स्टैटिक लेआउट (जैसे, Column या Box) का इस्तेमाल करने वाली स्क्रीन पर, ScreenScaffold से मिले contentPadding को अपने रूट लेआउट पर लागू करें. इससे यूज़र इंटरफ़ेस (यूआई) के सबसे ऊपर मौजूद एलिमेंट, सिस्टम के स्टेटस बार को ओवरलैप नहीं करेंगे:

AppScaffold {
    ScreenScaffold { contentPadding ->
        Column(modifier = Modifier.padding(contentPadding)) {
            Text("Static Screen Content")
        }
    }
}

फ़ुल-स्क्रीन इंटरैक्टिव कॉम्पोनेंट के साथ काम करना

Wear Compose Material 3 में फ़ुल-स्क्रीन इंटरैक्टिव कॉम्पोनेंट, जैसे कि AlertDialog, Dialog, Stepper, TimePicker, और DatePicker, स्क्रीन पर होने पर सिस्टम स्टेटस बार को अपने-आप छिपा देते हैं. इससे उनके कंट्रोल को सर्कुलर डिसप्ले के सबसे ऊपरी हिस्से का पूरा ऐक्सेस मिल जाता है. इसे खारिज करने पर, विंडो इनसेट कंट्रोलर एपीआई का इस्तेमाल करके, सिस्टम स्टेटस बार अपने-आप वापस आ जाता है.

इमर्सिव मोड पर स्विच करना

इमर्सिव मोड पर स्विच करने के लिए, अपने ऐप्लिकेशन या स्क्रीन में StatusBarSuppression कंपोज़ेबल जोड़ें. इस मोड में, सिस्टम स्टेटस बार और लोकल TimeText, दोनों छिपे होते हैं. इमर्सिव मोड को ऐसी स्क्रीन के लिए रिज़र्व करें जिन्हें उपयोगकर्ता कुछ समय के लिए देखता है (पुष्टि करने वाले ओवरले, डायलॉग) या जो पूरी स्क्रीन का इस्तेमाल करती हैं (फ़ुल-स्क्रीन प्रोग्रेस इंडिकेटर).

स्क्रीन-लेवल पर इमर्सिव मोड का इस्तेमाल कब करना चाहिए

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

AppScaffold {
    ScreenScaffold() {
        StatusBarSuppression()
        // Full-screen immersive content
    }
}

ऐप्लिकेशन-लेवल पर इमर्सिव मोड का इस्तेमाल कब करना चाहिए

अगर आपका पूरा ऐप्लिकेशन (या Activity) सभी स्क्रीन पर इमर्सिव फ़ुल-स्क्रीन अनुभव देता है, तो AppScaffold लेवल पर StatusBarSuppression का इस्तेमाल करें. साथ ही, सभी स्क्रीन पर सिस्टम स्टेटस बार को छिपाने के लिए, अपने कॉन्टेंट को रैप करें:

// Use StatusBarSuppression at AppScaffold level and wrap your content
// to suppress status bar in the entire scaffold.
AppScaffold {
    StatusBarSuppression {
        SwipeDismissableNavHost(...) {
            // Nested screens inherit suppression and 0.dp padding
        }
    }
}

पसंद के मुताबिक समय दिखाने वाले टेक्स्ट को ओवरराइड करने की सुविधा

अगर आपको Wear OS 8 पर माइग्रेट करने के दौरान, किसी खास स्क्रीन पर या पूरे ऐप्लिकेशन में, कस्टम कर्व्ड हेडर दिखाना है या सिस्टम स्टेटस बार से कुछ समय के लिए ऑप्ट आउट करना है, तो कस्टम timeText कंपोज़ेबल पास करने से सिस्टम स्टेटस बार को दबाया जा सकता है:

// Screen-level custom TimeText override:
ScreenScaffold(
    timeText = { TimeText { timeTextCurvedText("Custom Status") } },
) {
    // Content
}

// App-level opt-out using in-app TimeText:
AppScaffold(
    timeText = { TimeText() },
) {
    // Screens
}

व्यू का इस्तेमाल करके लागू करना (सुझाया नहीं गया)

अगर आपका ऐप्लिकेशन, Wear OS के लिए Jetpack Compose के बजाय Android व्यू का इस्तेमाल करता है, तो AndroidManifest.xml का इस्तेमाल करके शामिल हों. Wear Compose Material 3 की सबसे नई ऐल्फ़ा रिलीज़ में, सिस्टम स्टेटस बार अपने-आप चालू हो जाता है. हालांकि, व्यू पर आधारित ऐप्लिकेशन के लिए, <application> में ENABLE_GLOBAL_STATUS_BAR <meta-data> टैग जोड़कर, इस सुविधा को चालू करना ज़रूरी है:

<application ...>
    <meta-data
        android:name="com.google.wear.ENABLE_GLOBAL_STATUS_BAR"
        android:value="true" />
</application>

सबसे ऊपर मौजूद विंडो इनसेट को मॉनिटर करना

ViewCompat.setOnApplyWindowInsetsListener का इस्तेमाल करें और windowInsets.getInsets(WindowInsetsCompat.Type.statusBars()) की वैल्यू देखें. statusBarInsets.top > 0 होने पर, अपना लेगसी 12 o'clock यूज़र इंटरफ़ेस (यूआई) हटाएं और टॉप पैडिंग अडजस्ट करें. ऐसा न करने पर, अपने लेगसी यूज़र इंटरफ़ेस (यूआई) पर वापस जाएं:

ViewCompat.setOnApplyWindowInsetsListener(rootView) { view, windowInsets ->
    val statusBarInsets = windowInsets.getInsets(
        WindowInsetsCompat.Type.statusBars()
    )

    if (statusBarInsets.top > 0) {
        // status bar is visible: remove legacy 12 o'clock UI and apply top inset padding
        view.updatePadding(top = statusBarInsets.top)
    } else {
        // status bar is not visible: fall back to legacy UI and padding
    }

    WindowInsetsCompat.CONSUMED
}

प्रोग्राम के हिसाब से स्टेटस बार को छिपाना और दिखाना

Compose में ScreenScaffold के उलट, व्यू-आधारित ऐप्लिकेशन को WindowInsetsControllerCompat का इस्तेमाल करके, सिस्टम स्टेटस बार को साफ़ तौर पर छिपाना या दिखाना चाहिए. उदाहरण के लिए, फ़ुल-स्क्रीन इमर्सिव व्यू में जाते समय या स्क्रोल-अवे व्यवहार को कोऑर्डिनेट करते समय:

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

// Hide the status bar
insetsController.hide(WindowInsetsCompat.Type.statusBars())

// Show the status bar
insetsController.show(WindowInsetsCompat.Type.statusBars())

अपने ऐप्लिकेशन का परीक्षण करें

Wear OS 7.1 के बीटा वर्शन की झलक वाले एम्युलेटर (एपीआई 37.2-beta1) पर अपने ऐप्लिकेशन की जांच करते समय, इन बातों का ध्यान रखें:

  • घड़ी सिर्फ़ एक बार दिखती है: पुष्टि करें कि सिस्टम के स्टेटस बार में समय सिर्फ़ 12 बजे की पोज़िशन पर दिखता हो. साथ ही, ऐप्लिकेशन में मौजूद कोई भी लेगसी TimeText और ऐप्लिकेशन का कॉन्टेंट, इसे ओवरलैप न करता हो.
  • टॉप पैडिंग: पक्का करें कि स्क्रीन के टाइटल, हेडर, और सबसे ऊपर मौजूद बटन, स्टेटस बार के नीचे दिखें.
  • फ़ुल-स्क्रीन ओवरले और डायलॉग: पुष्टि करें कि डायलॉग, पिकर, स्टेपर, और कस्टम फ़ुल-स्क्रीन गतिविधियां खुलने पर स्टेटस बार छिप जाता है और बंद होने पर वापस दिखने लगता है.