सिस्टम बार की सुरक्षा के बारे में जानकारी

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

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

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

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

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

पारदर्शी स्टेटस बार बनाने के लिए, एक ऐसा कस्टम कंपोज़ेबल बनाएं जो मुख्य कॉन्टेंट को ओवरलैप करे और इनसेट से कवर किए गए हिस्से में ग्रेडिएंट बनाए.

class SystemBarProtectionSnippets : ComponentActivity() {

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

        // enableEdgeToEdge sets window.isNavigationBarContrastEnforced = true
        // which is used to add a translucent scrim to three-button navigation
        enableEdgeToEdge()

        setContent {
            MyTheme {
                // Main content
                MyContent()

                // After drawing main content, draw status bar protection
                StatusBarProtection()
            }
        }
    }
}

@Composable
private fun StatusBarProtection(
    color: Color = MaterialTheme.colorScheme.surfaceContainer,
) {
    Spacer(
        modifier = Modifier
            .fillMaxWidth()
            .height(
                with(LocalDensity.current) {
                    (WindowInsets.statusBars.getTop(this) * 1.2f).toDp()
                }
            )
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        color.copy(alpha = 1f),
                        color.copy(alpha = 0.8f),
                        Color.Transparent
                    )
                )
            )
    )
}

पहली इमेज. एक ट्रांसलूसेंट स्टेटस बार.

अडैप्टिव ऐप्लिकेशन के लिए, पसंद के मुताबिक बनाया गया ऐसा कंपोज़ेबल डालें जो हर पैनल के रंगों से मैच करता हो. जैसा कि एज-टू-एज डिज़ाइन में देखा गया है. पारदर्शी नेविगेशन बार बनाने के लिए, Window.setNavigationBarContrastEnforced को true पर सेट करें.