XR-এর মাধ্যমে আপনার Android অ্যাপকে 3D-তে নিয়ে আসা

প্রযোজ্য XR ডিভাইস

এইসব XR ডিভাইসের জন্য অভিজ্ঞতা তৈরি করতে এই নির্দেশিকা আপনাকে সাহায্য করে।

XR ডিভাইসের ধরন সম্পর্কে জানুন →

XR ডিভাইসের ধরন সম্পর্কে জানুন →

আপনার 2D মোবাইল বা বড়-স্ক্রিনের Android অ্যাপ Android XR-এ ডিফল্ট হিসেবে কাজ করে, 3D স্পেসের মধ্যে 2D প্যানেল হিসেবে দেখানো হয়। আপনার আগে থেকে থাকা 2D Android অ্যাপকে আরও উন্নত করতে, আপনি ইমারসিভ XR ফিচার যোগ করতে পারেন। এর ফলে, ফ্ল্যাট স্ক্রিন অভিজ্ঞতা থেকে ডায়নামিক, 3D এনভায়রনমেন্টে ট্রানজিশন করা যাবে।

XR-এ আপনার Android অ্যাপ নিয়ে আসার সময় এইসব গুরুত্বপূর্ণ নীতি বিবেচনা করুন।

• স্পেশিয়াল ক্ষমতা: Android XR আপনার অ্যাপের জন্য উপলভ্য স্পেশিয়াল ফিচারের বিভিন্ন রেঞ্জ অফার করে, কিন্তু আপনাকে প্রতিটি ক্ষমতা প্রয়োগ করতে হবে না। আপনার অ্যাপের ভিজ্যুয়াল হায়ারার্কি, লেআউট ও ব্যবহারকারীর অভিজ্ঞতার সাথে মানানসই হয় এমন আইকন স্ট্র্যাটেজিক উপায়ে প্রয়োগ করুন। সত্যিই নিমজ্জনকারী অভিজ্ঞতা তৈরি করতে কাস্টম এনভায়রনমেন্ট এবং একাধিক প্যানেল অন্তর্ভুক্ত করার কথা বিবেচনা করুন। স্পেশিয়াল এলিমেন্টের অপ্টিমাল ইন্টিগ্রেশন নির্ধারণ করতে, স্পেশিয়াল UI ডিজাইন সংক্রান্ত নির্দেশিকা দেখুন।
• অ্যাডাপ্টিভ UI: XR আপনাকে একটি স্পেসিয়াস UI ডিজাইন করার সুবিধা দেয় যা অসীম ক্যানভাস এবং ফ্রিলি রিসাইজেবল উইন্ডোতে নির্বিঘ্নে অ্যাডজাস্ট হয়ে যায়। সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলির মধ্যে একটি হল, এই বিশাল পরিবেশের জন্য আপনার অ্যাপের লেআউট অপ্টিমাইজ করতে আমাদের বড় স্ক্রিন ডিজাইন নির্দেশিকা ব্যবহার করা। আজ আপনার অ্যাপ শুধু মোবাইলের জন্য হলেও, ব্যবহারকারীর অভিজ্ঞতা আরও ভাল করতে আপনি এখনও আকর্ষণীয় এনভায়র্নমেন্ট ব্যবহার করতে পারেন, তবে বড় স্ক্রিনের জন্য অপ্টিমাইজ করা UI হল Android XR-এর জন্য আপনার অ্যাপ অপ্টিমাইজ করার অন্যতম সেরা উপায়।
• UI ফ্রেমওয়ার্ক: XR-এর জন্য Jetpack Compose-এর মাধ্যমে UI তৈরি করলে ভালো হয়। আপনার অ্যাপ যদি ভিউয়ের উপর নির্ভর করে, তাহলে ভিউয়ের সাথে কাজ করার সময় Compose ইন্টারঅপারেবিলিটি ব্যবহার করা সম্পর্কে আরও জানতে XR-এ ভিউয়ের সাথে কাজ করা পর্যালোচনা করুন অথবা সরাসরি Jetpack SceneCore লাইব্রেরির সাথে কাজ করার বিষয়টি মূল্যায়ন করুন।
• Play Store-এ প্রকাশ করা: আপনার XR-এনহ্যান্স করা অ্যাপ Play Store-এ খোঁজার উপযুক্ত কিনা তা যাচাই করতে:
  • অপ্রয়োজনীয় ফিচার প্রয়োজনীয়তা সরিয়ে দিয়ে আপনার অ্যাপকে আরও উন্নত করার কথা বিবেচনা করুন।
  • Play Store-এর সার্চ ফলাফল থেকে আপনার অ্যাপ বাদ দেওয়া আটকাতে, আপনার অ্যাপ XR প্রকাশনা থেকে অপ্ট-আউট করা হয়নি কিনা তা Google Play Console থেকে যাচাই করুন।

2D UI কম্পোনেন্টকে 3D-তে কনভার্ট করার পরামর্শ

এইসব পরামর্শ মেনে চললে, আপনার অ্যাপকে XR-এর জন্য অপ্টিমাইজ করা হয়েছে বলে মনে হওয়ার ব্যাপারে অনেক পার্থক্য হতে পারে।

• বড় স্ক্রিনের সাথে মানানসই হওয়ার বিষয়টিকে অগ্রাধিকার দিন: বড় XR এনভায়রনমেন্টে টেক্সট ও কন্টেন্ট যাতে স্পষ্টভাবে পড়া যায় তা নিশ্চিত করতে, আপনার অ্যাপের UI যাতে বড় স্ক্রিন ডিজাইন সংক্রান্ত নীতি মেনে চলে তা নিশ্চিত করুন।
• স্পেশিয়াল ফিচার কৌশলগতভাবে ব্যবহার করুন: আপনার অ্যাপের ব্যবহারকারীর অভিজ্ঞতার মধ্যে এমন মূল মুহূর্ত শনাক্ত করুন যেখানে স্পেশিয়াল ফিচার যোগ করলে অভিজ্ঞতা উন্নত হবে এবং প্ল্যাটফর্মের অনন্য ক্ষমতাকে কাজে লাগানো যাবে।
• ব্যবহারকারীর সুবিধার কথা মাথায় রেখে স্পেশিয়াল প্যানেল প্লেস করুন: স্পেশিয়াল প্যানেল দিয়ে আপনার লেআউট ডিজাইন করার সময়, ব্যবহারকারীর থেকে আরামদায়ক দূরত্বে সেগুলি পজিশন করুন, যাতে সেগুলি খুব বেশি কাছে বা খুব বেশি দূরে না থাকে।
• স্পেশিয়াল লেআউটের জন্য অ্যাডাপ্টিভ UI ব্যবহার করা: আপনার লেআউটকে একাধিক স্পেশিয়াল প্যানেলে কার্যকরভাবে ভাগ করতে এবং তথ্য উপস্থাপনাকে অপ্টিমাইজ করতে, প্যানেল এবং প্রোগ্রেসিভ রিভিলিংয়ের মতো অ্যাডাপ্টিভ UI কনসেপ্ট ব্যবহার করুন।
• স্থায়ী এলিমেন্ট ও প্যাটার্নের জন্য অরবিটার ব্যবহার করুন: নেভিগেশন ও কন্ট্রোলের মতো স্থায়ী ও প্রাসঙ্গিক UX এলিমেন্টের জন্য অরবিটার রিজার্ভ করুন। স্পষ্টতা বজায় রাখতে এবং বিশৃঙ্খলা এড়াতে অরবিটার ব্যবহার সীমিত করুন।
• উচ্চতা বিচক্ষণতার সাথে ব্যবহার করুন: অস্থায়ী কম্পোনেন্টগুলিতে স্পেসিয়াল উচ্চতা প্রয়োগ করুন যেগুলি স্থির থাকে এবং কন্টেন্টের সাথে স্ক্রল করে না। ভিজ্যুয়াল অস্বস্তি এড়াতে এবং ব্যালেন্সড ভিজ্যুয়াল হায়ারার্কি বজায় রাখতে, বড় বড় জায়গা উঁচু করে দেখাবেন না।

XR-এর জন্য Jetpack Compose নতুন কম্পোনেন্ট নিয়ে আসে যা XR এনহ্যান্সমেন্ট ম্যানেজ করে, ফলে আপনাকে তা করতে হয় না। যেমন, আপনি SpatialPopup এবং SpatialDialog ব্যবহার করে তাদের 2D সমকক্ষদের রিপ্লেস করতে পারবেন। স্পেশিয়াল UI উপলভ্য না থাকলে, এইসব কম্পোনেন্ট সাধারণ 2D UI হিসেবে দেখা যায় এবং উপলভ্য হলে আপনার অ্যাপের স্পেশিয়াল UI দেখানো হয়। এগুলি ব্যবহার করা ততটাই সহজ যতটা সংশ্লিষ্ট 2D UI এলিমেন্ট পরিবর্তন করার জন্য একটি লাইন পরিবর্তন করা।

ডায়ালগকে 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 UI এলিমেন্ট উন্নত করা

আরও ফাইন-গ্রেন কন্ট্রোলের মাধ্যমে UI উন্নত করতে চাইলে, আমরা SpatialElevation প্রদান করি যাতে আপনি SpatialElevationLevel-এর মাধ্যমে সেট করা Z-অ্যাক্সিসে স্পেশিয়াল প্যানেলের উপরের লেভেলে আপনার অ্যাপের যেকোনও কম্পোজ করার উপযুক্ত আইটেম উন্নত করতে পারেন। এটি ব্যবহারকারীর মনোযোগ আকর্ষণ করতে, আরও ভালো হায়ারার্কি তৈরি করতে এবং পাঠযোগ্যতা উন্নত করতে সাহায্য করে, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে।

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

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• বড় জায়গা ও প্লেন যেমন, বটম শিট ও সাইড শিট স্প্যাশিয়ালাইজ বা এলিভেট করবেন না।
• কন্টেন্টের সাথে স্ক্রল করা যায় এমন UI এলিমেন্টকে উন্নত করবেন না।

2D কম্পোনেন্টকে অরবিটারে মাইগ্রেট করা

অরবিটার হল ফ্লোটিং এলিমেন্ট যা সাধারণত এমন কন্ট্রোল থাকে যেগুলির সাথে ব্যবহারকারী ইন্টার‍্যাক্ট করতে পারেন। অরবিটারকে স্পেশিয়াল প্যানেল বা স্পেশিয়াল লেআউটের মতো অন্যান্য এন্টিটির সাথে অ্যাঙ্কর করা যেতে পারে। এগুলি কন্টেন্টকে আরও বেশি জায়গা দেয় এবং মূল কন্টেন্টকে বাধা না দিয়েই ব্যবহারকারীদের ফিচার দ্রুত অ্যাক্সেস করতে দেয়।

নিচের উদাহরণ কোড থেকে আপনি জানতে পারবেন যে কীভাবে 2D UI কম্পোনেন্টকে অরবিটারে মাইগ্রেট করতে হয়।

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    alignment = OrbiterAlignment.TopStart(
        edgeOffsetType = OrbiterEdgeOffsetType.OuterEdge,
        offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding))
    )
) {
    NavigationRail()
}
Orbiter.kt

অরবিটার সম্পর্কে গুরুত্বপূর্ণ তথ্য

• অরবিটার হল এমন কম্পোনেন্ট যা আগে থেকে থাকা UI এলিমেন্টকে স্পেশিয়াল প্যানেলের সাথে অ্যাটাচ করার জন্য ডিজাইন করা হয়েছে
• কোন কোন এলিমেন্ট অরবিটারদের জন্য মাইগ্রেট করতে হবে এবং কোন কোন প্যাটার্ন এড়িয়ে যেতে হবে তা যাচাই করতে, আমাদের Android XR অ্যাপ ডিজাইন সংক্রান্ত নির্দেশিকা দেখুন।
• আমরা সাজেস্ট করি যে নেভিগেশন রেল, উপরের অ্যাপ বার বা নিচের অ্যাপ বারের মতো অল্প কয়েকটি নেভিগেশন কম্পোনেন্টই অ্যাডাপ্ট করুন।
• স্পেশিয়াল UI চালু না থাকলে অরবিটার দেখা যায় না। যেমন, সেগুলি Home Space-এ বা ফোন, ট্যাবলেট ও ফোল্ডেবলের মতো ডিভাইসে দেখা যাবে না।

2D কম্পোনেন্টকে স্পেশিয়াল প্যানেলে মাইগ্রেট করা

স্পেশিয়াল প্যানেল হল Android XR অ্যাপের UI-এর মৌলিক বিল্ডিং ব্লক।

প্যানেলগুলি UI এলিমেন্ট, ইন্ট্যার‍্যাক্টিভ কম্পোনেন্ট এবং ইমারসিভ কন্টেন্টের কন্টেনার হিসেবে কাজ করে। ডিজাইন করার সময়, ব্যবহারকারীর কন্ট্রোলের জন্য অরবিটারের মতো কম্পোনেন্ট যোগ করতে পারেন এবং নির্দিষ্ট ইন্টার‍্যাকশনের প্রতি দৃষ্টি আকর্ষণ করতে UI এলিমেন্টকে স্পেসিয়ালি উন্নত করতে পারেন।

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• কোন কোন এলিমেন্ট প্যানেলে মাইগ্রেট করতে হবে এবং কোন কোন প্যাটার্ন এড়িয়ে চলতে হবে তা যাচাই করতে, Android XR অ্যাপ ডিজাইন সংক্রান্ত নির্দেশিকা দেখুন ।
• স্পেশিয়াল প্যানেল প্লেসমেন্টের পেশাদার পদ্ধতি অনুসরণ করুন:
  • প্যানেলগুলি ব্যবহারকারীর চোখ থেকে ১.৫ মিটার দূরে কেন্দ্রে স্পন করতে হবে।
  • ব্যবহারকারীর ফিল্ড অফ ভিউয়ের কেন্দ্রীয় ৪১° অংশে কন্টেন্ট দেখাতে হবে।
• ব্যবহারকারী সরলেও প্যানেল নিজের জায়গায় থাকে। অ্যাঙ্করিং শুধুমাত্র পাসথ্রু-এর জন্য উপলভ্য।
• প্যানেলের জন্য সিস্টেমের সাজেস্ট করা ৩২ dp রাউন্ডেড কোণ ব্যবহার করুন।
• টাচ টার্গেট ৫৬ ডিপি হতে হবে এবং ৪৮ ডিপি-র থেকে ছোট হলে চলবে না।
• পাঠযোগ্যতার জন্য কনট্রাস্ট রেশিও বজায় রাখুন, বিশেষ করে আপনি কোনও স্বচ্ছ ব্যাকগ্রাউন্ড ব্যবহার করলে।
• আপনার অ্যাপের জন্য ডার্ক ও লাইট থিম প্রয়োগ করতে Android ডিজাইন কালার প্রিন্সিপাল ফলো করুন এবং Material Design কালার সিস্টেম ব্যবহার করুন।
• আগে থেকে থাকা UI এলিমেন্টের সাথে স্পেশিয়াল প্যানেল API ব্যবহার করুন।

2D UI-কে একটি স্পেশিয়াল প্যানেলে মাইগ্রেট করা

ডিফল্ট হিসেবে, আপনার অ্যাপ হোম স্পেসে একটি প্যানেল সহ দেখানো হয়। হোম স্পেস ও ফুল স্পেসের মধ্যে কীভাবে পরিবর্তন করবেন তা জানুন। সেই কন্টেন্ট Full Space-এ আনতে, আপনি SpatialPanel ব্যবহার করতে পারেন।

আপনি কীভাবে এটি করতে পারেন তার একটি উদাহরণ এখানে দেওয়া হল।

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

আপনার 2D UI একাধিক স্পেশিয়াল প্যানেলে মাইগ্রেট করা

আপনার অ্যাপের UI-এর জন্য আপনি একটি স্পেশিয়াল প্যানেল ব্যবহার করতে পারেন অথবা একাধিক স্পেশিয়াল প্যানেলে আপনার 2D UI মাইগ্রেট করতে পারেন। আপনার অ্যাপের UI-এর জন্য একাধিক প্যানেল ব্যবহার করার বিকল্প বেছে নিলে, আপনি প্যানেলগুলিকে পজিশন করতে ও রোটেট করতে পারবেন (এটি আপনার UI-কে 2D-তে লেআউট করার মতো)। আপনি কী অর্জন করতে চান সেই বিষয়ে একটি স্পষ্ট ডিজাইন ভিশন নিয়ে শুরু করবেন এবং তারপরে প্যানেল পজিশন ও রোটেট করতে, আপনি Spatial UI লেআউট API (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) ও সাবস্পেস মডিফায়ার ব্যবহার করতে পারবেন। আপনি একাধিক প্যানেল প্রয়োগ করার সময় কিছু মূল প্যাটার্ন এড়িয়ে চলতে হবে।

• ওভারল্যাপ করা প্যানেল এড়িয়ে চলুন, যা ব্যবহারকারীকে গুরুত্বপূর্ণ তথ্য দেখতে বাধা দেবে।
• প্যানেল দিয়ে ব্যবহারকারীকে অতিষ্ঠ করে তুলবেন না।
• অস্বস্তিকর বা চোখে না পড়ার মতো জায়গায় প্যানেল প্লেস করা এড়িয়ে চলুন। যেমন: ব্যবহারকারীর পিছনে রাখা প্যানেল সহজে চোখে পড়ে না।
• আপনার স্পেশিয়াল UI ডেভেলপ করা সম্পর্কে আরও জানতে, আমাদের সম্পূর্ণ নির্দেশিকা দেখুন।

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

স্পেশিয়াল ক্ষমতা আছে কিনা চেক করা

আপনি কোনও নির্দিষ্ট UI এলিমেন্ট দেখাবেন কিনা সেই বিষয়ে সিদ্ধান্ত নেওয়ার সময়, নির্দিষ্ট XR ডিভাইস বা মোড চেক করা এড়িয়ে যান। সময়ের সাথে সাথে কোনও ডিভাইসের ক্ষমতা পরিবর্তন হলে, ক্ষমতা চেক করার পরিবর্তে ডিভাইস বা মোড চেক করলে সমস্যা হতে পারে। এর পরিবর্তে, নিম্নলিখিত উদাহরণে দেখানো প্রয়োজনীয় স্পেশিয়ালাইজেশন ক্ষমতা সরাসরি চেক করতে LocalSpatialCapabilities.current.isSpatialUiEnabled ব্যবহার করুন। এই পদ্ধতি নিশ্চিত করে যে আপনার অ্যাপটি XR-এর বিভিন্ন অভিজ্ঞতার সাথে সঠিকভাবে মানিয়ে নেয়। এর জন্য, নতুন ডিভাইস বা ক্ষমতা পরিবর্তন হলে প্রতিবার আপডেট করার প্রয়োজন হয় না।

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

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

ব্যবহারকারীর চারপাশের পরিবেশ পরিবর্তন করতে এনভায়রনমেন্ট ব্যবহার করুন

আপনি যখন নিজের অ্যাপে ইমার্সন তৈরি করতে চান, তখন আপনার ব্যবহারকারীর চারপাশের পরিবেশ পরিবর্তন করে এটি করতে পারেন। কোডে এনভায়রনমেন্ট যোগ করা একটি সহজ পরিবর্তন যা আপনার অ্যাপের বর্তমান UI-এর উপর উল্লেখযোগ্য প্রভাব না ফেলেই করা যায়। এনভায়র্নমেন্ট সেট করা সম্পর্কে আরও জানতে, আমাদের সম্পূর্ণ নির্দেশিকা দেখতে ভুলবেন না।

3D কন্টেন্ট যোগ করা

3D মডেল ও স্পেশিয়াল ভিডিওর মতো 3D কন্টেন্ট আরও ইমারসিভ অভিজ্ঞতা তৈরি করতে এবং স্পেশিয়াল জ্ঞান যোগ করতে সাহায্য করতে পারে। আপনার অ্যাপ তখনই শুধু 3D কন্টেন্ট দেখাতে পারবে যখন স্পেশিয়াল ক্যাপাবিলিটি উপলভ্য থাকবে, তাই আপনাকে প্রথমে স্পেশিয়াল ক্যাপাবিলিটি উপলভ্য আছে কিনা তা চেক করে নিতে হবে।

3D মডেল, স্পেশিয়াল ভিডিও বা স্পেশিয়াল অডিও যোগ করার জন্য উপযুক্ত নির্দেশিকা দেখুন।