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 पर खोजा जा सके:

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

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

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

XR के लिए Jetpack Compose में नए कॉम्पोनेंट जोड़े गए हैं. ये कॉम्पोनेंट, 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 का इस्तेमाल करने का सुझाव देते हैं. इससे, अपने ऐप्लिकेशन में किसी भी कॉम्पोज़ेबल को ज़ेड-ऐक्सिस पर, स्पेस पैनल के ऊपर ले जाया जा सकता है. ज़ेड-ऐक्सिस को 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 {
    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 कॉन्टेंट दिखा सकता है, जब स्पेशल ऑडियो की सुविधाएं उपलब्ध हों. इसलिए, पहले यह देखें कि स्पेशल ऑडियो की सुविधाएं उपलब्ध हैं या नहीं.

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