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

​​

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

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

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

<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

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

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

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

XR के लिए Jetpack Compose में नए कॉम्पोनेंट जोड़े गए हैं. ये कॉम्पोनेंट, XR के बेहतर अनुभव को मैनेज करते हैं, ताकि आपको खुद ऐसा करने की ज़रूरत न पड़े. उदाहरण के लिए, SpatialPopup और SpatialDialog का इस्तेमाल करके, 2D वर्शन को बदला जा सकता है. जब स्पेसिएल यूज़र इंटरफ़ेस (यूआई) उपलब्ध नहीं होता, तो ये कॉम्पोनेंट सामान्य 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 का इस्तेमाल करने का सुझाव देते हैं. इससे, अपने ऐप्लिकेशन में किसी भी कॉम्पोज़ेबल को ज़ेड-ऐक्सिस पर, स्पेस पैनल के ऊपर ले जाया जा सकता है. ज़ेड-ऐक्सिस को SpatialElevationLevel की मदद से सेट किया जाता है. इससे उपयोगकर्ता का ध्यान खींचने, बेहतर हैरारकी बनाने, और टेक्स्ट को पढ़ने में आसानी होती है. इसका उदाहरण यहां दिया गया है.

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

कोड के बारे में अहम जानकारी

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

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

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

नेविगेशन रेल, जिसे स्पेसलाइज़ नहीं किया गया है

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

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

// Previous approach
NavigationRail()

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

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

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

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

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

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

कोड के बारे में अहम जानकारी

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

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

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

यहां एक उदाहरण दिया गया है.

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

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

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

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

स्पेसलाइज़ नहीं किया गया कॉन्टेंट

ऑर्बिटर में स्पेसिएलाइज़्ड (एक्सआर के हिसाब से बनाए गए) मीडिया कंट्रोल और कॉन्टेंट को कई स्पेस पैनल में बांटा गया है

SpatialRow(curveRadius = 825.dp) {
    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

स्पेस ऑडियो की सुविधाएं देखना

किसी खास यूज़र इंटरफ़ेस (यूआई) एलिमेंट को दिखाने का फ़ैसला लेते समय, किसी खास एक्सआर डिवाइस या मोड के लिए जांच करने से बचें. अगर डिवाइसों या मोड की जांच करने के बजाय, डिवाइस की सुविधाओं की जांच की जाती है, तो समय के साथ किसी डिवाइस की सुविधाओं में बदलाव होने पर समस्याएं आ सकती हैं. इसके बजाय, 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 कॉन्टेंट दिखा सकता है, जब स्पेशल ऑडियो की सुविधाएं उपलब्ध हों. इसलिए, आपको सबसे पहले यह [देखना होगा कि स्पेशल ऑडियो की सुविधाएं उपलब्ध हैं या नहीं][develop/xr/jetpack-xr-sdk/check-spatial-capabilities].

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