अपने स्पेशल यूज़र इंटरफ़ेस (यूआई) के लिए, मटीरियल डिज़ाइन लागू करना

इस्तेमाल किए जा सकने वाले XR डिवाइस

इन दिशा-निर्देशों से आपको इस तरह के एक्सआर डिवाइसों के लिए अनुभव तैयार करने में मदद मिलती है.

एक्सआर डिवाइस के टाइप के बारे में जानें →

एक्सआर हेडसेट

वायर वाले एक्सआर स्मार्ट ग्लास

एक्सआर डिवाइस के टाइप के बारे में जानें →

मटीरियल डिज़ाइन, एक्सआर के लिए कॉम्पोनेंट और लेआउट उपलब्ध कराता है. Material 3 लाइब्रेरी, अडैप्टिव लेआउट, और XR Compose Material 3 लाइब्रेरी का इस्तेमाल करके, Compose ऐप्लिकेशन में स्पेशल यूज़र इंटरफ़ेस (यूआई) के व्यवहार बनाए जा सकते हैं.

एक्सआर कॉम्पोनेंट के लिए Material 3 का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन की डिपेंडेंसी में XR Compose Material 3 लाइब्रेरी जोड़ें. इसके अलावा, स्टैंडर्ड Material 3 कॉम्पोनेंट को सीधे Jetpack Compose for XR कंटेनर में भी रखा जा सकता है. जैसे, Orbiter, SpatialDialog, और SpatialPanel.

एक्सआर कॉम्पोनेंट के लिए Material 3 का इस्तेमाल करना

androidx.xr.compose.material3 लाइब्रेरी, XR के लिए Material 3 उपलब्ध कराती है. इसमें सामान्य स्पेशल यूज़र इंटरफ़ेस (यूआई) पैटर्न के कॉम्पोनेंट शामिल हैं. जैसे, नेविगेशन रेल और बार, टॉप ऐप्लिकेशन बार, फ़्लोटिंग टूलबार, डायलॉग, सूची की जानकारी वाले लेआउट, और होम स्पेस और फ़ुल स्पेस के बीच स्विच करने के लिए टॉगल बटन. इस लाइब्रेरी में मौजूद, स्पेशलाइज़्ड Spatial* कंपोज़ेबल, एक्सपेरिमेंट के तौर पर उपलब्ध हैं. इन्हें इस्तेमाल करने के लिए, @OptIn(ExperimentalMaterial3XrApi::class) में शामिल होना ज़रूरी है.

LocalSpatialCapabilities.current.isSpatialUiEnabled स्पेशल यूज़र इंटरफ़ेस (यूआई) चालू होने पर, XR कॉम्पोनेंट के लिए Material 3 को रेंडर करने के लिए, को चुनें. साथ ही, स्पेशल यूज़र इंटरफ़ेस (यूआई) चालू न होने पर, स्टैंडर्ड Material 3 कॉम्पोनेंट को रेंडर करने के लिए, को चुनें. ज़्यादा जानकारी के लिए, स्पेशल ऑडियो की सुविधाओं की जांच करना लेख पढ़ें.

नेविगेशन रेल

स्पेशल यूज़र इंटरफ़ेस (यूआई) चालू होने पर, शुरुआत में अलाइन किए गए Orbiter में Material 3 नेविगेशन रेल दिखाने के लिए, SpatialNavigationRail या SpatialWideNavigationRail का इस्तेमाल करें. ज़्यादा जानकारी के लिए, मटीरियल डिज़ाइन के दिशा-निर्देश देखें.

नॉन-स्पेशलाइज़्ड नेविगेशन रेल

स्पेशलाइज़्ड (एक्सआर के हिसाब से अडैप्ट की गई) नेविगेशन रेल

नेविगेशन बार

स्पेशल यूज़र इंटरफ़ेस (यूआई) चालू होने पर, सबसे नीचे अलाइन किए गए Orbiter में Material 3 नेविगेशन बार दिखाने के लिए, SpatialNavigationBar या SpatialShortNavigationBar का इस्तेमाल करें. ज़्यादा जानकारी के लिए, मटीरियल डिज़ाइन के दिशा-निर्देश देखें.

नॉन-स्पेशलाइज़्ड नेविगेशन बार

स्पेशलाइज़्ड (एक्सआर के हिसाब से बनाया गया) नेविगेशन बार

डायलॉग

स्पेशल एलिवेशन वाले SpatialDialog में, बुनियादी सूचना वाला डायलॉग दिखाने के लिए, SpatialBasicAlertDialog का इस्तेमाल करें. इसके अलावा, स्टैंडर्ड Material 3 डायलॉग के कॉन्टेंट को सीधे SpatialDialog में रैप करें.

ज़्यादा जानकारी के लिए, डायलॉग और अडैप्टिव डिज़ाइन के दिशा-निर्देश देखें.

नॉन-स्पेशलाइज़्ड डायलॉग

स्पेशलाइज़्ड (एक्सआर के हिसाब से बनाया गया) डायलॉग

टॉप ऐप्लिकेशन बार

स्पेशल यूज़र इंटरफ़ेस (यूआई) चालू होने पर, सबसे ऊपर अलाइन किए गए Orbiter के अंदर Material 3 टॉप ऐप्लिकेशन बार दिखाने के लिए, SpatialTopAppBar या SpatialTwoRowsTopAppBar का इस्तेमाल करें.

ज़्यादा जानकारी के लिए, टॉप ऐप्लिकेशन बार और अडैप्टिव डिज़ाइन के दिशा-निर्देश देखें.

नॉन-स्पेशलाइज़्ड टॉप ऐप्लिकेशन बार

स्पेशलाइज़्ड (एक्सआर के हिसाब से बनाया गया) टॉप ऐप्लिकेशन बार

एक्सआर के लिए सूची की जानकारी वाला लेआउट

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

नॉन-स्पेशलाइज़्ड ListDetailPaneScaffold

स्पेशलाइज़्ड (एक्सआर के हिसाब से बनाया गया) ListDetailPaneScaffold

एक्सआर के लिए, सपोर्ट पैनल का लेआउट

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

नॉन-स्पेशलाइज़्ड SupportingPaneScaffold

स्पेशलाइज़्ड (एक्सआर के हिसाब से बनाया गया) SupportingPaneScaffold

Figma के लिए Material 3 डिज़ाइन किट की मदद से डिज़ाइन करना शुरू करें

शुरू करने के लिए, Material 3 डिज़ाइन किट डाउनलोड करें

इन्हें भी देखें

• Jetpack Compose for XR की मदद से यूज़र इंटरफ़ेस (यूआई) बनाना
• होम स्पेस से फ़ुल स्पेस पर ट्रांज़िशन करना
• स्पेशल यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करने से जुड़े दिशा-निर्देश