আপনার 2D মোবাইল বা বড়-স্ক্রীনের অ্যান্ড্রয়েড অ্যাপ Android XR-এ ডিফল্টভাবে কাজ করে, 3D স্থানের ভিতরে 2D প্যানেল হিসাবে প্রদর্শিত হয়। আপনি আপনার বিদ্যমান 2D অ্যান্ড্রয়েড অ্যাপটিকে উন্নত করতে নিমজ্জিত XR বৈশিষ্ট্যগুলি যোগ করতে পারেন, এটিকে একটি ফ্ল্যাট স্ক্রীন অভিজ্ঞতা থেকে একটি গতিশীল 3D পরিবেশে রূপান্তর করতে পারেন৷
আপনার Android অ্যাপকে XR-এ আনার সময় এই গুরুত্বপূর্ণ নীতিগুলি বিবেচনা করুন।
- স্থানিক ক্ষমতা : Android XR আপনার অ্যাপে উপলব্ধ বিভিন্ন স্থানিক বৈশিষ্ট্যের অফার করে, কিন্তু আপনাকে প্রতিটি একক ক্ষমতা প্রয়োগ করতে হবে না। আপনার অ্যাপের ভিজ্যুয়াল হায়ারার্কি, লেআউট এবং ব্যবহারকারীর যাত্রার পরিপূরক সেগুলিকে কৌশলগতভাবে প্রয়োগ করুন। সত্যিকারের নিমগ্ন অভিজ্ঞতা তৈরি করতে কাস্টম পরিবেশ এবং একাধিক প্যানেল অন্তর্ভুক্ত করার কথা বিবেচনা করুন। স্থানিক উপাদানগুলির সর্বোত্তম একীকরণ নির্ধারণ করতে স্থানিক UI ডিজাইন নির্দেশিকা পড়ুন।
- অভিযোজিত UI : XR আপনাকে একটি প্রশস্ত UI ডিজাইন করার নমনীয়তা দেয় যা একটি অসীম ক্যানভাস এবং অবাধে আকার পরিবর্তনযোগ্য উইন্ডোগুলির সাথে নির্বিঘ্নে খাপ খায়। এই বিস্তৃত পরিবেশের জন্য আপনার অ্যাপের বিন্যাস অপ্টিমাইজ করতে আমাদের বড় স্ক্রীন ডিজাইন নির্দেশিকা ব্যবহার করা সবচেয়ে গুরুত্বপূর্ণ বিবেচনার মধ্যে একটি। এমনকি যদি আপনার অ্যাপটি বর্তমানে শুধুমাত্র-মোবাইল হয়, তবুও আপনি ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য মনোমুগ্ধকর পরিবেশ ব্যবহার করতে পারেন, তবে বড় স্ক্রিনের জন্য অপ্টিমাইজ করা একটি UI হল Android XR-এর জন্য আপনার অ্যাপটি অপ্টিমাইজ করার অন্যতম সেরা উপায়।
- UI ফ্রেমওয়ার্ক : আমরা XR-এর জন্য Jetpack Compose দিয়ে আপনার UI তৈরি করার পরামর্শ দিই। যদি আপনার অ্যাপটি বর্তমানে ভিউ এর উপর নির্ভর করে, তাহলে XR-এ ভিউ এর সাথে কাজ করার পর্যালোচনা করুন যাতে ভিউ এর সাথে কাজ করার সময় কম্পোজ ইন্টারঅপারেবিলিটি ব্যবহার করার বিষয়ে আরও জানতে, অথবা জেটপ্যাক সিনকোর লাইব্রেরির সাথে সরাসরি কাজ করার মূল্যায়ন করুন।
- প্লে স্টোরে প্রকাশ করা : আপনার XR-বর্ধিত অ্যাপটি প্লে স্টোরে আবিষ্কারযোগ্য তা নিশ্চিত করতে:
- যেকোনো অপ্রয়োজনীয় বৈশিষ্ট্যের প্রয়োজনীয়তাগুলি সরিয়ে আপনার অ্যাপটিকে স্ট্রিমলাইন করার কথা বিবেচনা করুন৷
- নিশ্চিত করুন যে আপনার অ্যাপটি আপনার Google Play Console থেকে XR প্রকাশনা থেকে অপ্ট-আউট করা হয়েছে যাতে আপনার অ্যাপটিকে Play Store সার্চের ফলাফল থেকে বাদ দেওয়া থেকে রোধ করা যায়।
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>
2D UI উপাদানগুলিকে 3D তে রূপান্তর করার জন্য টিপস৷
এই টিপসগুলি অনুসরণ করলে আপনার অ্যাপটি XR-এর জন্য অপ্টিমাইজ করা হয়েছে বলে মনে করতে একটি বড় পার্থক্য আনতে পারে৷
- বড় স্ক্রীন সামঞ্জস্যকে অগ্রাধিকার দিন : আপনার অ্যাপের UI বৃহৎ স্ক্রীন ডিজাইনের নীতিগুলি মেনে চলে তা নিশ্চিত করুন যাতে বিস্তৃত XR পরিবেশে পাঠ্য এবং বিষয়বস্তুর সর্বোত্তম সুস্পষ্টতা নিশ্চিত করা যায়।
- স্থানিক বৈশিষ্ট্যগুলিকে কৌশলগতভাবে ব্যবহার করুন : আপনার অ্যাপের ব্যবহারকারীর যাত্রার মূল মুহূর্তগুলি চিহ্নিত করুন যেখানে স্থানিক বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করা অভিজ্ঞতাকে বাড়িয়ে তুলবে এবং প্ল্যাটফর্মের অনন্য ক্ষমতাগুলির সুবিধা গ্রহণ করবে৷
- ব্যবহারকারীর স্বাচ্ছন্দ্যের কথা মাথায় রেখে স্থানিক প্যানেলগুলি রাখুন : স্থানিক প্যানেলগুলির সাথে আপনার লেআউট ডিজাইন করার সময়, অপ্রতিরোধ্য বা খুব কাছের অনুভূতি এড়াতে ব্যবহারকারীর থেকে একটি আরামদায়ক দূরত্বে তাদের অবস্থান করুন৷
- স্থানিক লেআউটের জন্য অভিযোজিত UI ব্যবহার করুন : আপনার লেআউটটিকে একাধিক স্থানিক প্যানেলে কার্যকরভাবে পচন করতে, তথ্য উপস্থাপনাকে অপ্টিমাইজ করতে প্যান এবং প্রগতিশীল প্রকাশের মতো অভিযোজিত UI ধারণাগুলি ব্যবহার করুন।
- স্থায়ী উপাদান এবং নিদর্শনগুলির জন্য অরবিটারগুলি ব্যবহার করুন : ন্যাভিগেশন এবং নিয়ন্ত্রণগুলির মতো স্থায়ী এবং প্রাসঙ্গিক UX উপাদানগুলির জন্য অরবিটারগুলি সংরক্ষণ করুন৷ স্বচ্ছতা বজায় রাখতে এবং বিশৃঙ্খলা এড়াতে অরবিটার ব্যবহার সীমিত করুন।
- উচ্চতার ন্যায়সঙ্গত ব্যবহার করুন : অস্থায়ী উপাদানগুলিতে স্থানিক উচ্চতা প্রয়োগ করুন যা স্থির থাকে এবং বিষয়বস্তুর সাথে স্ক্রোল করে না। চাক্ষুষ অস্বস্তি রোধ করতে এবং একটি সুষম ভিজ্যুয়াল শ্রেণিবিন্যাস বজায় রাখতে বড় এলাকাগুলিকে উঁচু করা এড়িয়ে চলুন।
- মেটেরিয়াল ডিজাইন দিয়ে তৈরি করুন : আপনি যদি মেটেরিয়াল ডিজাইনের উপাদানগুলির সর্বশেষ আলফা এবং অভিযোজিত বিন্যাস দিয়ে তৈরি করেন, তাহলে আপনি আপনার অ্যাপে XR পরিবর্তনগুলি বেছে নিতে "EnableXrComponentOverrides" র্যাপার যোগ করতে পারেন। আরও জানতে XR ডকুমেন্টেশনের জন্য আমাদের মেটেরিয়াল ডিজাইন পড়ুন।
XR-এর জন্য Jetpack Compose নতুন কম্পোনেন্টগুলি প্রবর্তন করে যা XR বর্ধিতকরণগুলি পরিচালনা করে যাতে আপনাকে এটি করতে না হয়। উদাহরণস্বরূপ, আপনি তাদের 2D প্রতিস্থাপনের জন্য SpatialPopup এবং SpatialDialog ব্যবহার করতে পারেন। স্থানিক UI উপলব্ধ না হলে এই উপাদানগুলি সাধারণ 2D UI হিসাবে উপস্থিত হয় এবং যখন তারা পারে তখন তারা আপনার অ্যাপের স্থানিক UI দেখায়৷ এগুলি ব্যবহার করা সংশ্লিষ্ট 2D UI উপাদান প্রতিস্থাপন করতে এক-লাইন পরিবর্তন করার মতোই সহজ।
একটি ডায়ালগকে স্থানিক ডায়ালগে রূপান্তর করুন
// Previous approach
Dialog(
onDismissRequest = onDismissRequest
) {
MyDialogContent()
}
// New XR differentiated approach
SpatialDialog(
onDismissRequest = onDismissRequest
) {
MyDialogContent()
}
একটি পপআপকে স্থানিক পপআপে রূপান্তর করুন
// Previous approach
Popup(onDismissRequest = onDismissRequest) {
MyPopupContent()
}
// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
MyPopupContent()
}
2D UI উপাদানগুলিকে উন্নত করুন৷
আপনি যখন আরও সূক্ষ্ম নিয়ন্ত্রণের সাথে UI-কে উন্নীত করতে চান, তখন আমরা SpatialElevation প্রদান করি যাতে আপনি SpatialElevationLevel এর সাথে সেট করা Z-অক্ষের স্থানিক প্যানেলের উপরে একটি স্তরে আপনার অ্যাপ্লিকেশানে যেকোনও কম্পোজেবলকে উন্নীত করতে পারেন৷ এটি একজন ব্যবহারকারীর মনোযোগ পেতে সাহায্য করে, আরও ভাল শ্রেণিবিন্যাস তৈরি করে এবং স্পষ্টতা উন্নত করে, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে।
// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
ComposableThatShouldElevateInXr()
}
কোড সম্পর্কে মূল পয়েন্ট
- বড় এলাকা এবং প্লেন যেমন নীচের শীট এবং পাশের শীটগুলি স্থানিক বা উঁচু করবেন না।
- বিষয়বস্তুর সাথে স্ক্রোলযোগ্য UI উপাদানগুলিকে উন্নত করবেন না৷
অরবিটারে 2D উপাদান স্থানান্তর করুন
অরবিটার হল ভাসমান উপাদান যা স্থানিক প্যানেলের মধ্যে বিষয়বস্তুর জন্য নিয়ন্ত্রণ ধারণ করে। তারা বিষয়বস্তুকে আরও স্থান দেওয়ার অনুমতি দেয় এবং ব্যবহারকারীদের মূল বিষয়বস্তুকে বাধা না দিয়ে বৈশিষ্ট্যগুলিতে দ্রুত অ্যাক্সেস দেয়।
নিম্নলিখিত উদাহরণ কোডটি দেখায় যে আপনি কীভাবে একটি 2D UI উপাদান একটি অরবিটারে স্থানান্তর করতে পারেন।
// Previous approach
NavigationRail()
// New XR differentiated approach
Orbiter(
position = OrbiterEdge.Start,
offset = dimensionResource(R.dimen.start_orbiter_padding),
alignment = Alignment.Start
) {
NavigationRail()
}
অরবিটার সম্পর্কে মূল পয়েন্ট
- অরবিটার হল একটি স্থানিক প্যানেলে বিদ্যমান UI উপাদান সংযুক্ত করার জন্য ডিজাইন করা উপাদান
- অরবিটারগুলির জন্য কোন উপাদানগুলিকে স্থানান্তরিত করতে হবে এবং প্যাটার্নগুলি এড়াতে হবে তা যাচাই করতে আমাদের Android XR অ্যাপ ডিজাইন নির্দেশিকা দেখুন৷
- আমরা নেভিগেশন রেল, শীর্ষ অ্যাপ বার, বা নীচের অ্যাপ বারের মতো শুধুমাত্র কয়েকটি নেভিগেশন উপাদানকে মানিয়ে নেওয়ার পরামর্শ দিই।
- স্থানিক UI সক্ষম না থাকলে অরবিটারগুলি দেখায় না৷ উদাহরণস্বরূপ, সেগুলি হোম স্পেসে বা ফোন, ট্যাবলেট এবং ফোল্ডেবলের মতো ডিভাইসগুলিতে দেখাবে না৷
স্থানিক প্যানেলে 2D উপাদান স্থানান্তর করুন
স্থানিক প্যানেলগুলি হল Android XR অ্যাপের UI এর মৌলিক বিল্ডিং ব্লক।
প্যানেলগুলি UI উপাদান, ইন্টারেক্টিভ উপাদান এবং নিমজ্জিত সামগ্রীর জন্য ধারক হিসাবে কাজ করে। ডিজাইন করার সময়, আপনি ব্যবহারকারীর নিয়ন্ত্রণের জন্য অরবিটারের মতো উপাদান যোগ করতে পারেন এবং নির্দিষ্ট মিথস্ক্রিয়াগুলিতে মনোযোগ আকর্ষণ করতে স্থানিকভাবে UI উপাদানগুলিকে উন্নত করতে পারেন।
কোড সম্পর্কে মূল পয়েন্ট
- কোন উপাদানগুলিকে প্যানেলে স্থানান্তরিত করতে হবে এবং প্যাটার্নগুলি এড়াতে হবে তা যাচাই করতে Android XR অ্যাপ ডিজাইন নির্দেশিকা দেখুন৷
- স্থানিক প্যানেল বসানোর জন্য সর্বোত্তম অনুশীলনগুলি অনুসরণ করুন:
- প্যানেলগুলিকে ব্যবহারকারীর চোখ থেকে 1.5 মিটার দূরে মাঝখানে তৈরি করা উচিত।
- বিষয়বস্তু ব্যবহারকারীর দেখার ক্ষেত্রের 41° কেন্দ্রে উপস্থিত হওয়া উচিত।
- একজন ব্যবহারকারী সরে যাওয়ার সাথে সাথে প্যানেলগুলি তার জায়গায় থাকে। অ্যাঙ্করিং শুধুমাত্র পাসথ্রু জন্য উপলব্ধ.
- প্যানেলের জন্য 32 ডিপি গোলাকার কোণে প্রস্তাবিত সিস্টেমে লেগে থাকুন।
- টাচ টার্গেট 56 dp এবং 48 dp এর কম হওয়া উচিত নয়৷
- পঠনযোগ্যতার জন্য বৈসাদৃশ্য অনুপাত রাখুন, বিশেষ করে যদি আপনি কোনো স্বচ্ছ ব্যাকগ্রাউন্ড ব্যবহার করেন।
- অ্যান্ড্রয়েড ডিজাইনের রঙের নীতিগুলি অনুসরণ করুন এবং আপনার অ্যাপের জন্য গাঢ় এবং হালকা থিমগুলি বাস্তবায়ন করতে মেটেরিয়াল ডিজাইন রঙ সিস্টেম ব্যবহার করুন৷
- বিদ্যমান UI উপাদানগুলির সাথে স্থানিক প্যানেল API ব্যবহার করুন৷
একটি একক স্থানিক প্যানেলে 2D UI স্থানান্তর করুন৷
ডিফল্টরূপে, আপনার অ্যাপ হোম স্পেসে একটি একক প্যানেলের সাথে দেখায়। হোম স্পেস এবং পূর্ণ স্থানের মধ্যে কীভাবে রূপান্তর করতে হয় তা শিখুন । সেই বিষয়বস্তুটিকে পূর্ণ স্থানে আনতে, আপনি SpatialPanel ব্যবহার করতে পারেন।
এখানে আপনি কিভাবে এটি করতে পারে একটি উদাহরণ.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
Subspace {
SpatialPanel(
SubspaceModifier
.resizable(true)
.movable(true)
) {
AppContent(appContainer, widthSizeClass)
}
}
} else {
AppContent(appContainer, widthSizeClass)
}
আপনার 2D UI একাধিক স্থানিক প্যানেলে স্থানান্তর করুন
আপনি আপনার অ্যাপের UI এর জন্য একটি একক স্থানিক প্যানেল ব্যবহার করতে পারেন, অথবা আপনি আপনার 2D UI একাধিক স্থানিক প্যানেলে স্থানান্তর করতে পারেন। আপনি যদি আপনার অ্যাপের UI-এর জন্য একাধিক প্যানেল ব্যবহার করতে বেছে নেন, তাহলে আপনি প্যানেলগুলিকে অবস্থান এবং ঘোরাতে পারেন (আপনার UI 2D তে সাজানোর অনুরূপ)। আপনি যা করতে চান তার জন্য আপনি একটি পরিষ্কার নকশা দৃষ্টি দিয়ে শুরু করবেন এবং তারপরে আপনি স্থানিক UI লেআউট API ( SpatialBox , SpatialRow , SpatialColumn , SpatialLayoutSpacer , SpatialAlignment ) এবং সাবস্পেস মডিফায়ারগুলিকে অবস্থান এবং প্যানেলগুলি ঘোরানোর জন্য ব্যবহার করতে পারেন৷ কিছু মূল নিদর্শন রয়েছে যা আপনি একাধিক প্যানেল প্রয়োগ করার সময় এড়াতে চাইবেন।
- ওভারল্যাপ করা প্যানেলগুলি এড়িয়ে চলুন যা ব্যবহারকারীকে সমালোচনামূলক তথ্য দেখতে বাধা দেবে।
- প্যানেল সহ ব্যবহারকারীকে অভিভূত করা এড়িয়ে চলুন।
- অস্বস্তিকর বা অলক্ষিত প্লেসমেন্টে প্যানেল স্থাপন এড়িয়ে চলুন। উদাহরণ: ব্যবহারকারীর পিছনে রাখা প্যানেলগুলি লক্ষ্য করা কঠিন।
- আপনার স্থানিক UI বিকাশের বিষয়ে আরও জানতে, আমাদের সম্পূর্ণ নির্দেশিকা দেখুন।
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()
}
}
স্থানিক ক্ষমতা পরীক্ষা করুন
আপনি যখন একটি নির্দিষ্ট UI উপাদান প্রদর্শন করবেন কিনা তা সিদ্ধান্ত নিচ্ছেন, নির্দিষ্ট XR ডিভাইস বা মোডগুলি পরীক্ষা করা এড়িয়ে চলুন। ক্ষমতার পরিবর্তে ডিভাইস বা মোডগুলি পরীক্ষা করা সমস্যা সৃষ্টি করতে পারে যখন একটি প্রদত্ত ডিভাইসের ক্ষমতা সময়ের সাথে পরিবর্তিত হয়। পরিবর্তে, নিম্নলিখিত উদাহরণে দেখানো হিসাবে প্রয়োজনীয় স্থানিককরণ ক্ষমতা সরাসরি পরীক্ষা করতে LocalSpatialCapabilities.current.isSpatialUiEnabled ব্যবহার করুন। এই পদ্ধতিটি নিশ্চিত করে যে আপনার অ্যাপটি এক্সআর অভিজ্ঞতার বিস্তৃত পরিসরের সাথে সঠিকভাবে খাপ খাইয়ে নিচ্ছে প্রতিবার নতুন ডিভাইসের আবির্ভাব বা ক্ষমতা পরিবর্তনের প্রয়োজন ছাড়াই।
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
SupportingInfoPanel()
} else {
ButtonToPresentInfoModal()
}
//Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
ব্যবহারকারীর পরিবেশ পরিবর্তন করতে পরিবেশ ব্যবহার করুন
আপনি যখন আপনার ব্যবহারকারীর পরিবেশ পরিবর্তন করে আপনার অ্যাপে নিমজ্জনের অনুভূতি তৈরি করতে চান, আপনি পরিবেশের সাথে তা করতে পারেন। কোডে একটি পরিবেশ যোগ করা একটি সহজবোধ্য পরিবর্তন যা আপনি আপনার অ্যাপের বিদ্যমান UI কে উল্লেখযোগ্যভাবে প্রভাবিত না করেই করতে পারেন। পরিবেশ নির্ধারণের বিষয়ে আরও জানতে, আমাদের সম্পূর্ণ নির্দেশিকা পরীক্ষা করে দেখুন।
3D মডেল যোগ করুন
3D বিষয়বস্তু আরও নিমগ্ন অভিজ্ঞতা তৈরি করতে এবং স্থানিক বোঝাপড়া যোগ করতে সাহায্য করতে পারে। অন্যান্য স্থানিক এবং 3D ক্ষমতার মতো, আপনার অ্যাপটি শুধুমাত্র 3D মডেলগুলি দেখাতে পারে যখন 3D সামগ্রী সক্ষম থাকে, তাই আপনি নিশ্চিত করতে চাইবেন যে আপনার অ্যাপটি আপনার যোগ করা 3D বস্তুগুলি ছাড়াই একটি দুর্দান্ত অভিজ্ঞতা প্রদান করে৷
SceneViewer এর সাথে 3D মডেল যোগ করুন
আপনি যখন আপনার ব্যবহারকারীদের কাছে 3D মডেল উপস্থাপন করতে চান, তখন সমস্যাটি সমাধান করার একাধিক উপায় রয়েছে৷ যখন আপনার সার্ভারে ব্যবহার করার জন্য একটি glTF প্রস্তুত থাকে, তখন সবচেয়ে সহজ উপায় হল SceneViewer XR ব্যবহার করা। আপনি একটি স্পষ্ট অভিপ্রায় তৈরি করে এটি করতে পারেন, যা ডিভাইসে SceneViewer XR অ্যাপ্লিকেশন চালু করবে। এটি ব্যবহারকারীকে বস্তুটি দেখতে এবং অবাধে সরানো এবং তাদের আশেপাশে এটির আকার পরিবর্তন করার অনুমতি দেবে।
সত্তা ভলিউমের সাথে সরাসরি 3D মডেল যোগ করুন
আপনি যখন 3D মডেলের অবস্থান, আপেক্ষিক আকার, বা সূক্ষ্ম-দানাযুক্ত অ্যানিমেশনের মতো জিনিসগুলির উপর আরও নিয়ন্ত্রণ চান, আপনি সরাসরি আপনার অ্যাপে একটি glTF সংস্থান লোড করতে পারেন। একবার 3D মডেল লোড হয়ে গেলে, আপনি একটি glTF মডেল সত্তা মোড়ানোর জন্য ভলিউম কম্পোজেবল ব্যবহার করতে পারেন এবং এটি কীভাবে উপস্থাপন করা হয় তা নিয়ন্ত্রণ করতে সাবস্পেস মডিফায়ার প্রয়োগ করতে পারেন। ভলিউম ব্যবহার করে আপনি ঘোষণামূলকভাবে আপনার স্থানিক UI এর সাথে সম্পর্কিত 3D মডেল স্থাপন করতে পারবেন। আপনার অ্যাপে 3D মডেল দেখানোর বিষয়ে আরও জানতে, সত্তা তৈরি করুন, নিয়ন্ত্রণ করুন এবং পরিচালনা করুন দেখুন।