XR की मदद से, अपने Android ऐप्लिकेशन को 3D में दिखाना

एक्सआर की सुविधा वाले डिवाइस

इस गाइड की मदद से, इन तरह के एक्सआर डिवाइसों के लिए अनुभव बनाए जा सकते हैं.

XR डिवाइसों के टाइप के बारे में जानें →

XR डिवाइसों के टाइप के बारे में जानें →

आपका 2D मोबाइल या बड़ी स्क्रीन वाला Android ऐप्लिकेशन, Android XR में डिफ़ॉल्ट रूप से काम करता है. इसे 3D स्पेस में 2D पैनल के तौर पर दिखाया जाता है. अपने मौजूदा 2D Android ऐप्लिकेशन को बेहतर बनाने के लिए, इमर्सिव एक्सआर सुविधाएँ जोड़ी जा सकती हैं. इससे, ऐप्लिकेशन को फ़्लैट स्क्रीन से डाइनैमिक 3D एनवायरमेंट में बदला जा सकता है.

अपने Android ऐप्लिकेशन को XR में लाने के लिए, इन ज़रूरी सिद्धांतों का ध्यान रखें.

• स्पेशल सुविधाएं: Android XR, आपके ऐप्लिकेशन के लिए कई तरह की स्पेशल सुविधाएं उपलब्ध कराता है. हालांकि, आपको हर सुविधा को लागू करने की ज़रूरत नहीं है. उनका इस्तेमाल इस तरह से करें कि वे आपके ऐप्लिकेशन के विज़ुअल, लेआउट, और यूज़र जर्नी के हिसाब से सही हों. बेहतर अनुभव देने के लिए, कस्टम एनवायरमेंट और कई पैनल शामिल करें. स्पेशल एलिमेंट को सबसे सही तरीके से इंटिग्रेट करने के लिए, स्पेशल यूज़र इंटरफ़ेस (यूआई) डिज़ाइन से जुड़े दिशा-निर्देश देखें.
• अडैप्टिव यूज़र इंटरफ़ेस (यूआई): XR की मदद से, बड़ा यूज़र इंटरफ़ेस (यूआई) डिज़ाइन किया जा सकता है. यह यूज़र इंटरफ़ेस (यूआई), अनंत कैनवस और ज़रूरत के हिसाब से साइज़ बदलने वाली विंडो के साथ आसानी से काम करता है. सबसे ज़रूरी बातों में से एक यह है कि आप बड़ी स्क्रीन के लिए डिज़ाइन से जुड़े हमारे दिशा-निर्देशों का इस्तेमाल करें. इससे, बड़ी स्क्रीन के हिसाब से अपने ऐप्लिकेशन के लेआउट को ऑप्टिमाइज़ किया जा सकेगा. अगर आपका ऐप्लिकेशन सिर्फ़ मोबाइल पर काम करता है, तो भी उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, दिलचस्प एनवायरमेंट का इस्तेमाल किया जा सकता है. हालांकि, बड़े डिसप्ले के लिए ऑप्टिमाइज़ किया गया यूज़र इंटरफ़ेस (यूआई), Android XR के लिए अपने ऐप्लिकेशन को ऑप्टिमाइज़ करने का सबसे अच्छा तरीका है.
• यूज़र इंटरफ़ेस फ़्रेमवर्क: हमारा सुझाव है कि आप XR के लिए, Jetpack Compose का इस्तेमाल करके यूज़र इंटरफ़ेस बनाएं. अगर आपका ऐप्लिकेशन व्यू पर निर्भर करता है, तो XR में व्यू के साथ काम करने के बारे में पढ़ें. इससे आपको व्यू के साथ काम करते समय, Compose इंटरऑपरेबिलिटी का फ़ायदा उठाने के बारे में ज़्यादा जानकारी मिलेगी. इसके अलावा, Jetpack SceneCore लाइब्रेरी के साथ सीधे तौर पर काम करने का आकलन करें.
• Play Store पर पब्लिश करना: यह पुष्टि करने के लिए कि XR की सुविधाओं वाला आपका ऐप्लिकेशन, Play Store पर खोजा जा सकता है:
  • ऐप्लिकेशन से जुड़ी ग़ैर-ज़रूरी सुविधाओं को हटाकर, उसे बेहतर बनाएं.
  • पुष्टि करें कि आपके ऐप्लिकेशन को Google Play Console से XR पब्लिशिंग से ऑप्ट-आउट नहीं किया गया है. इससे, आपके ऐप्लिकेशन को Play Store के खोज नतीजों से बाहर नहीं रखा जाएगा.

2D यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को 3D में बदलने के लिए सलाह

इन सुझावों को अपनाने से, आपके ऐप्लिकेशन को एक्सआर डिवाइसों के लिए ऑप्टिमाइज़ किया जा सकता है.

• बड़ी स्क्रीन के साथ काम करने की सुविधा को प्राथमिकता दें: पक्का करें कि आपके ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई), बड़ी स्क्रीन के डिज़ाइन के सिद्धांतों का पालन करता हो. इससे यह पक्का करने में मदद मिलती है कि एक्सआर के बड़े एनवायरमेंट में टेक्स्ट और कॉन्टेंट को आसानी से पढ़ा जा सके.
• स्पेशल फ़ीचर का इस्तेमाल सोच-समझकर करें: अपने ऐप्लिकेशन में उपयोगकर्ता के अनुभव के दौरान, उन अहम पलों की पहचान करें जहां स्पेशल फ़ीचर को शामिल करने से अनुभव बेहतर होगा. साथ ही, प्लैटफ़ॉर्म की खास सुविधाओं का फ़ायदा पाएं.
• स्पेशल पैनल को इस तरह से रखें कि उपयोगकर्ता को देखने में आसानी हो: स्पेशल पैनल के साथ लेआउट डिज़ाइन करते समय, उन्हें उपयोगकर्ता से इतनी दूरी पर रखें कि वे बहुत ज़्यादा न दिखें या बहुत पास न लगें.
• स्पेशल लेआउट के लिए अडैप्टिव यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करें: अडैप्टिव यूज़र इंटरफ़ेस (यूआई) के कॉन्सेप्ट का इस्तेमाल करें. जैसे, पैन और प्रोग्रेसिव रीवीलिंग. इससे अपने लेआउट को कई स्पेशल पैनल में असरदार तरीके से बांटा जा सकता है. साथ ही, जानकारी को बेहतर तरीके से दिखाया जा सकता है.
• हमेशा दिखने वाले एलिमेंट और पैटर्न के लिए ऑर्बिटर का इस्तेमाल करें: ऑर्बिटर को हमेशा दिखने वाले और कॉन्टेक्स्ट के हिसाब से यूज़र एक्सपीरियंस (यूएक्स) एलिमेंट के लिए रिज़र्व करें. जैसे, नेविगेशन और कंट्रोल. ऑर्बिटर का इस्तेमाल सीमित करें, ताकि जानकारी साफ़ तौर पर दिखे और स्क्रीन पर ज़्यादा चीज़ें न दिखें.
• एलिवेशन का सही तरीके से इस्तेमाल करें: एलिवेशन को उन कॉम्पोनेंट पर लागू करें जो कुछ समय के लिए दिखते हैं और एक ही जगह पर बने रहते हैं. साथ ही, कॉन्टेंट के साथ स्क्रोल नहीं करते हैं. बड़े इलाकों को ऊंचा न करें, ताकि देखने में परेशानी न हो और विज़ुअल हैरारकी (दृश्यमानता के हिसाब से क्रम) को संतुलित रखा जा सके.

Jetpack Compose for XR में नए कॉम्पोनेंट जोड़े गए हैं. ये कॉम्पोनेंट, XR की सुविधाओं को मैनेज करते हैं, ताकि आपको ऐसा न करना पड़े. उदाहरण के लिए, 2D वर्शन की जगह SpatialPopup और SpatialDialog का इस्तेमाल किया जा सकता है. स्पेशल यूज़र इंटरफ़ेस (यूआई) उपलब्ध न होने पर, ये कॉम्पोनेंट सामान्य 2D यूज़र इंटरफ़ेस (यूआई) के तौर पर दिखते हैं. साथ ही, उपलब्ध होने पर ये आपके ऐप्लिकेशन के स्पेशल यूज़र इंटरफ़ेस (यूआई) को दिखाते हैं. इनका इस्तेमाल करना उतना ही आसान है जितना कि 2D यूज़र इंटरफ़ेस (यूआई) एलिमेंट को बदलने के लिए, एक लाइन में बदलाव करना.

डायलॉग को SpatialDialog में बदलना

// Previous approach
Dialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}
SpatialDialog.kt

किसी पॉपअप को SpatialPopup में बदलना

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}
SpatialPopup.kt

2D यूज़र इंटरफ़ेस (यूआई) एलिमेंट को एलिवेट करना

जब आपको यूज़र इंटरफ़ेस (यूआई) को ज़्यादा बेहतर कंट्रोल के साथ बेहतर बनाना हो, तो हम SpatialElevation उपलब्ध कराते हैं. इससे, अपने ऐप्लिकेशन में किसी भी कंपोज़ेबल को Z-ऐक्सिस पर उस लेवल से ऊपर ले जाया जा सकता है जिसे आपने SpatialElevationLevel की मदद से सेट किया है. इससे उपयोगकर्ता का ध्यान खींचने, बेहतर हैरारकी बनाने, और पढ़ने में आसानी होती है. उदाहरण के लिए, यहां दिया गया उदाहरण देखें.

// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(elevation = SpatialElevationLevel.Level4) {
    ComposableThatShouldElevateInXr()
}
SpatialElevation.kt

कोड के बारे में मुख्य बातें

• बड़ी जगहों और प्लेन, जैसे कि बॉटम शीट और साइड शीट को स्पैटियलाइज़ या एलिवेट न करें.
• ऐसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट को न बढ़ाएं जिन्हें कॉन्टेंट के साथ स्क्रोल किया जा सकता है.

2D कॉम्पोनेंट को ऑर्बिटर में माइग्रेट करना

ऑर्बिटर, फ़्लोटिंग एलिमेंट होते हैं. इनमें आम तौर पर ऐसे कंट्रोल होते हैं जिनसे उपयोगकर्ता इंटरैक्ट कर सकता है. ऑर्बिटर को स्पैटियल पैनल या अन्य इकाइयों से जोड़ा जा सकता है. जैसे, स्पैटियल लेआउट. इनसे कॉन्टेंट को ज़्यादा जगह मिलती है. साथ ही, उपयोगकर्ताओं को मुख्य कॉन्टेंट में रुकावट डाले बिना, सुविधाओं को तुरंत ऐक्सेस करने की सुविधा मिलती है.

यहां दिए गए उदाहरण कोड में, 2D यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को ऑर्बिटर में माइग्रेट करने का तरीका बताया गया है.

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = ContentEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Top
) {
    NavigationRail()
}
Orbiter.kt

ऑर्बिटर के बारे में खास जानकारी

• ऑर्बिटर ऐसे कॉम्पोनेंट होते हैं जिन्हें मौजूदा यूज़र इंटरफ़ेस (यूआई) एलिमेंट को किसी स्पैटियल पैनल से अटैच करने के लिए डिज़ाइन किया जाता है
• ऑर्बिटर के लिए कौनसा एलिमेंट माइग्रेट करना है और किन पैटर्न से बचना है, यह जानने के लिए Android XR ऐप्लिकेशन डिज़ाइन करने से जुड़े दिशा-निर्देश देखें.
• हमारा सुझाव है कि आप सिर्फ़ कुछ नेविगेशन कॉम्पोनेंट को अडैप्ट करें. जैसे, नेविगेशन रेल, टॉप ऐप्लिकेशन बार या बॉटम ऐप्लिकेशन बार.
• स्पेशल यूज़र इंटरफ़ेस (यूआई) चालू न होने पर, ऑर्बिटर नहीं दिखते. उदाहरण के लिए, ये ऐप्लिकेशन होम स्पेस में या फ़ोन, टैबलेट, और फ़ोल्ड किए जा सकने वाले डिवाइसों पर नहीं दिखेंगे.

2D कॉम्पोनेंट को स्पैटियल पैनल में माइग्रेट करना

स्पेशल पैनल, Android XR ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के बुनियादी बिल्डिंग ब्लॉक होते हैं.

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

कोड के बारे में मुख्य बातें

• पैनलों पर माइग्रेट किए जाने वाले एलिमेंट और जिन पैटर्न से बचना है उनके बारे में जानने के लिए, Android XR ऐप्लिकेशन डिज़ाइन से जुड़े दिशा-निर्देश देखें.
• स्पेशल पैनल को सही जगह पर रखने के लिए, सबसे सही तरीके अपनाएं:
  • पैनल, उपयोगकर्ता की आंखों से 1.5 मीटर की दूरी पर होने चाहिए.
  • कॉन्टेंट, उपयोगकर्ता के व्यू के फ़ील्ड के बीच के 41° में दिखना चाहिए.
• उपयोगकर्ता के स्क्रोल करने पर भी पैनल अपनी जगह पर बने रहते हैं. एंकरिंग की सुविधा सिर्फ़ पासथ्रू के लिए उपलब्ध है.
• पैनल के लिए, सिस्टम की ओर से सुझाए गए 32 डीपी वाले गोल किनारों का इस्तेमाल करें.
• टच टारगेट का साइज़ 56 डीपी होना चाहिए. यह 48 डीपी से कम नहीं होना चाहिए.
• पढ़ने में आसानी हो, इसके लिए कंट्रास्ट रेशियो को बनाए रखें. खास तौर पर, अगर आपने किसी पारदर्शी बैकग्राउंड का इस्तेमाल किया है.
• Android डिज़ाइन के रंग से जुड़े सिद्धांतों का पालन करें. साथ ही, अपने ऐप्लिकेशन के लिए गहरे और हल्के रंग वाली थीम लागू करने के लिए, मटीरियल डिज़ाइन के कलर सिस्टम का इस्तेमाल करें.
• मौजूदा यूज़र इंटरफ़ेस (यूआई) एलिमेंट के साथ Spatial Panels API का इस्तेमाल करें.

2D यूज़र इंटरफ़ेस (यूआई) को एक ही स्पेशल पैनल पर माइग्रेट करना

डिफ़ॉल्ट रूप से, आपका ऐप्लिकेशन Home Space में एक पैनल के साथ दिखता है. होम स्पेस और फ़ुल स्पेस के बीच ट्रांज़िशन करने का तरीका जानें. उस कॉन्टेंट को फ़ुल स्पेस में लाने के लिए, SpatialPanel का इस्तेमाल किया जा सकता है.

यहां एक उदाहरण दिया गया है कि ऐसा कैसे किया जा सकता है.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            dragPolicy = MovePolicy(),
            resizePolicy = ResizePolicy(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

अपने 2D यूज़र इंटरफ़ेस (यूआई) को एक से ज़्यादा स्पेशल पैनल पर माइग्रेट करना

अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के लिए, एक ही स्पेशल पैनल का इस्तेमाल किया जा सकता है. इसके अलावा, अपने 2D यूआई को एक से ज़्यादा स्पेशल पैनल पर माइग्रेट किया जा सकता है. अगर आपको अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के लिए एक से ज़्यादा पैनल इस्तेमाल करने हैं, तो पैनलों को घुमाया जा सकता है और उनकी जगह बदली जा सकती है. यह ठीक वैसा ही है जैसे यूआई को 2D में लेआउट करना. सबसे पहले, आपको यह तय करना होगा कि आपको क्या करना है. इसके बाद, पैनलों को अपनी जगह पर रखने और उन्हें घुमाने के लिए, Spatial UI Layout API (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) और सबस्पेस मॉडिफ़ायर का इस्तेमाल किया जा सकता है. कई पैनल लागू करते समय, आपको कुछ मुख्य पैटर्न से बचना होगा.

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

SpatialRow {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}
SpatialRow.kt

स्पेशल ऑडियो की सुविधा की उपलब्धता की जांच करना

किसी यूज़र इंटरफ़ेस (यूआई) एलिमेंट को दिखाने या न दिखाने का फ़ैसला लेते समय, खास XR डिवाइसों या मोड की जांच करने से बचें. डिवाइस या मोड की जाँच करने के बजाय, क्षमताओं की जाँच करने से समस्याएँ हो सकती हैं. ऐसा तब होता है, जब किसी डिवाइस पर समय के साथ क्षमताएँ बदल जाती हैं. इसके बजाय, ज़रूरी स्पैटियलाइज़ेशन की सुविधाओं की जांच करने के लिए, LocalSpatialCapabilities.current.isSpatialUiEnabled का इस्तेमाल करें. जैसा कि इस उदाहरण में दिखाया गया है. इस तरीके से यह पक्का किया जाता है कि आपका ऐप्लिकेशन, अलग-अलग तरह के XR अनुभवों के हिसाब से सही तरीके से काम करे. इसके लिए, नए डिवाइसों के आने या क्षमताओं में बदलाव होने पर, हर बार अपडेट करने की ज़रूरत नहीं होती.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

// Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
SpatialCapabilities.kt

उपयोगकर्ता के आस-पास के माहौल को बदलने के लिए, एनवायरमेंट का इस्तेमाल करना

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

3D कॉन्टेंट जोड़ना

3D मॉडल और स्पेशल वीडियो जैसे 3D कॉन्टेंट से, ज़्यादा इमर्सिव अनुभव मिलता है. साथ ही, इससे स्पेशल अंडरस्टैंडिंग भी बढ़ती है. आपका ऐप्लिकेशन, 3D कॉन्टेंट सिर्फ़ तब दिखा सकता है, जब उसमें स्पेशल सुविधाएं उपलब्ध हों. इसलिए, आपको सबसे पहले यह देखना होगा कि स्पेशल सुविधाएं उपलब्ध हैं या नहीं.

3D मॉडल, स्पेशल वीडियो या स्पेशल ऑडियो जोड़ने के लिए, सही गाइड देखें.