আপনার অ্যান্ড্রয়েড অ্যাপকে XR দিয়ে 3D-এ আনুন

সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

আপনার 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()
}
SpatialDialog.kt

একটি পপআপকে স্থানিক পপআপে রূপান্তর করুন

// 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(spatialElevationLevel = SpatialElevationLevel.Level4) {
    ComposableThatShouldElevateInXr()
}
SpatialElevation.kt

কোড সম্পর্কে মূল পয়েন্ট

• বড় এলাকা এবং প্লেন যেমন নীচের শীট এবং পাশের শীটগুলি স্থানিক বা উঁচু করবেন না।
• বিষয়বস্তুর সাথে স্ক্রোলযোগ্য UI উপাদানগুলিকে উন্নত করবেন না৷

অরবিটারে 2D উপাদান স্থানান্তর করুন

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

নিম্নলিখিত উদাহরণ কোডটি দেখায় যে আপনি কীভাবে একটি 2D UI উপাদান একটি অরবিটারে স্থানান্তর করতে পারেন।

// Previous approach
NavigationRail()

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

অরবিটার সম্পর্কে মূল পয়েন্ট

• অরবিটার হল একটি স্থানিক প্যানেলে বিদ্যমান 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()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

আপনার 2D UI একাধিক স্থানিক প্যানেলে স্থানান্তর করুন

আপনি আপনার অ্যাপের UI এর জন্য একটি একক স্থানিক প্যানেল ব্যবহার করতে পারেন, অথবা আপনি আপনার 2D UI একাধিক স্থানিক প্যানেলে স্থানান্তর করতে পারেন। আপনি যদি আপনার অ্যাপের UI-এর জন্য একাধিক প্যানেল ব্যবহার করতে বেছে নেন, তাহলে আপনি প্যানেলগুলিকে অবস্থান এবং ঘোরাতে পারেন (আপনার UI 2D তে সাজানোর অনুরূপ)। আপনি যা করতে চান তার জন্য আপনি একটি পরিষ্কার নকশা দৃষ্টি দিয়ে শুরু করবেন এবং তারপরে আপনি স্থানিক 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 ব্যবহার করুন। এই পদ্ধতিটি নিশ্চিত করে যে আপনার অ্যাপটি এক্সআর অভিজ্ঞতার বিস্তৃত পরিসরের সাথে সঠিকভাবে খাপ খাইয়ে নিচ্ছে প্রতিবার নতুন ডিভাইসের আবির্ভাব বা ক্ষমতা পরিবর্তনের প্রয়োজন ছাড়াই।

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

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

ব্যবহারকারীর পরিবেশ পরিবর্তন করতে পরিবেশ ব্যবহার করুন

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

3D সামগ্রী যোগ করুন

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

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