কীভাবে করবেন

Jetpack XR SDK ব্যবহার করে Androidify-কে XR-এ নিয়ে আসা

৯ মিনিটের পাঠ
Dereck Bridie
ডেভেলপার সম্পর্ক প্রকৌশলী

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

স্যামসাং গ্যালাক্সি এক্সআর উন্মোচনের মাধ্যমে, অ্যান্ড্রয়েড এক্সআর দ্বারা চালিত প্রথম ডিভাইসটি আনুষ্ঠানিকভাবে এসে গেছে। এখন ব্যবহারকারীরা প্লে স্টোর থেকে তাদের পছন্দের অনেক অ্যাপ সম্পূর্ণ নতুন এক মাত্রায় উপভোগ করতে পারবেন: তৃতীয় মাত্রা!

তৃতীয় মাত্রাটি বেশ প্রশস্ত, যেখানে আপনার অ্যাপগুলোর জন্যও প্রচুর জায়গা রয়েছে। আপনার অ্যাপের জন্য উপযুক্ত টুলগুলো ব্যবহার করে আজই শুরু করুন। উদাহরণস্বরূপ, আপনি Kotlin এবং Compose-এর মতো আধুনিক অ্যান্ড্রয়েড ডেভেলপমেন্ট টুল ব্যবহার করে ইমারসিভ XR অভিজ্ঞতা তৈরি করতে Jetpack XR SDK ব্যবহার করতে পারেন।

এই ব্লগ পোস্টে, আমরা আমাদের প্রিয় Androidify অ্যাপের অভিনবত্বকে XR-এ নিয়ে আসার নিজস্ব যাত্রার কথা বলব এবং আপনার অ্যাপগুলোকেও XR-এ নিয়ে আসার জন্য কী কী প্রয়োজন, তার প্রাথমিক বিষয়গুলোও আলোচনা করব।

অ্যান্ড্রয়েডিফাই-এর মাধ্যমে একটি ভ্রমণ

Androidify একটি ওপেন সোর্স অ্যাপ যা আপনাকে Gemini, CameraX, Navigation 3 এবং অবশ্যই Jetpack Compose-এর মতো কিছু অত্যাধুনিক প্রযুক্তি ব্যবহার করে অ্যান্ড্রয়েড বট তৈরি করতে দেয়। Androidify প্রাথমিকভাবে অ্যাডাপ্টিভ লেআউট তৈরির মাধ্যমে ফোন, ফোল্ডেবল এবং ট্যাবলেটে চমৎকারভাবে দেখানোর জন্য ডিজাইন করা হয়েছিল।

কাস্টমাইজ.png

অ্যান্ড্রয়েডিফাই বিভিন্ন ফর্ম ফ্যাক্টরে দেখতে চমৎকার লাগে।

অ্যাডাপ্টিভ লেআউটের একটি মূল ভিত্তি হলো পুনঃব্যবহারযোগ্য কম্পোজেবল। Jetpack Compose আপনাকে ছোট ছোট UI কম্পোনেন্ট তৈরি করতে সাহায্য করে, যা ব্যবহারকারী যে ধরনের ডিভাইসেই থাকুক না কেন, স্বজ্ঞাত ইউজার এক্সপেরিয়েন্স তৈরির জন্য বিভিন্ন উপায়ে সাজানো যেতে পারে। প্রকৃতপক্ষে, অ্যাপে কোনো পরিবর্তন ছাড়াই Androidify, Android XR-এর সাথে সামঞ্জস্যপূর্ণ!

কাস্টমাইজ_২.png

কোনো কোড পরিবর্তন ছাড়াই Androidify তার বড় পর্দার জন্য রেসপন্সিভ লেআউট ব্যবহার করে XR-এর সাথে খাপ খাইয়ে নেয়।

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

এক্সআর-এ নিজেকে মানিয়ে নেওয়া

চলুন অ্যান্ড্রয়েড এক্সআর-এর কিছু মূল ধারণা আলোচনা করা যাক, যার শুরুতেই থাকছে অ্যাপ চালানোর দুটি মোড: হোম স্পেস এবং ফুল স্পেস।

হোমস্পেস.png
হোম স্পেসে অ্যাপস
হোমস্পেস২.পিএনজি
সম্পূর্ণ স্পেসে অ্যাপ

হোম স্পেসে একাধিক অ্যাপ পাশাপাশি চালানো যায়, ফলে ব্যবহারকারীরা বিভিন্ন উইন্ডোতে মাল্টিটাস্কিং করতে পারেন। সেই অর্থে, এটি অনেকটা বড় স্ক্রিনের অ্যান্ড্রয়েড ডিভাইসের ডেস্কটপ উইন্ডোইংয়ের মতোই, তবে ভার্চুয়াল জগতে!

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

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

Androidify-এর নতুন মাত্রার জন্য ডিজাইন

একটি চমৎকার অ্যাপের সূচনা হয় একটি দারুণ ডিজাইন দিয়ে। অ্যান্ড্রয়েড ডেভরেল-এর সিনিয়র ডিজাইন অ্যাডভোকেট আইভি নাইট, অ্যান্ড্রয়েডিফাই-এর বিদ্যমান ডিজাইনগুলো থেকে এক্সআর (XR)-এর জন্য একটি নতুন ডিজাইন তৈরি করার দায়িত্ব নিয়েছিলেন। এবার আপনি বলুন, আইভি!

এক্সআর (XR)-এর জন্য ডিজাইন করতে একটি স্বতন্ত্র পদ্ধতির প্রয়োজন ছিল, কিন্তু প্রকৃতপক্ষে মোবাইল ডিজাইনের সাথে এর অনেক মিলও ছিল। আমরা কন্টেইনমেন্ট (containment) বা সীমাবদ্ধতা নিয়ে চিন্তা করে শুরু করেছিলাম: কীভাবে আমাদের UI এলিমেন্টগুলোকে সাবস্পেসের (subspace) মধ্যে সাজানো ও গ্রুপ করা যায়, হয় স্পষ্টভাবে সীমানা দেখিয়ে অথবা সূক্ষ্মভাবে তার ইঙ্গিত দিয়ে। আমরা স্পেশিয়াল UI এলিমেন্টগুলোর (spatial UI elements) বিভিন্ন আকারকে গ্রহণ করতেও শিখেছি, যেগুলো ব্যবহারকারীর প্রতিক্রিয়ায় নিজেদের মানিয়ে নিতে ও নড়াচড়া করতে পারে। অ্যান্ড্রয়েডিফাই (Androidify)-এর মতো, অ্যাডাপটিভ লেআউট (adaptive layouts) ব্যবহার করে বিল্ড করুন , যাতে আপনি আপনার স্পেশিয়াল UI-এর জন্য লেআউটগুলোকে বিভিন্ন অংশে ভাগ করতে পারেন।

হোম স্পেস দিয়ে ডিজাইন শুরু করা

সৌভাগ্যবশত, অ্যান্ড্রয়েড এক্সআর আপনাকে হোম স্পেসের জন্য আপনার অ্যাপটি বর্তমান অবস্থাতেই শুরু করার সুযোগ দেয়, তাই আমরা শুধু একটি উইন্ডো টুলবার এবং ফুল স্পেস ট্রানজিশন বাটন যোগ করেই বর্ধিত এক্সআর ডিজাইনগুলোতে রূপান্তর করতে পেরেছি।

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

সম্পূর্ণ স্থানের দিকে বৃহত্তর পরিবর্তনের জন্য ডিজাইন করা

ফুল স্পেস ছিল সবচেয়ে বড় পরিবর্তন, কিন্তু এটিই আমাদের ডিজাইনকে মানিয়ে নেওয়ার জন্য সবচেয়ে বেশি সৃজনশীল সুযোগ করে দিয়েছিল।

tablet_to_xr.webp
ট্যাবলেট থেকে এক্সআর পর্যন্ত

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

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

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

আপনার অ্যাপকে স্থানিক করে তোলার জন্য অন্যান্য ডিজাইন টিপস

  • উপাদানগুলোকে মুক্ত রাখুন : কম্পোনেন্টগুলোকে আলাদা করে তাদের জন্য প্রকৃত (স্থানিক) জায়গা তৈরি করুন। এখন সময় এসেছে ঐ UI এলিমেন্টগুলোকে একটু শ্বাস ফেলার জায়গা দেওয়ার।
  • পৃষ্ঠতল অপসারণ করুন : পটভূমি লুকান, দেখুন এটি আপনার ডিজাইনগুলিতে কী পরিবর্তন আনে।
  • গতির মাধ্যমে অনুপ্রাণিত করুন : আপনি আপনার অ্যাপে কীভাবে ট্রানজিশন ব্যবহার করছেন? সেই চরিত্রটি ব্যবহার করে কল্পনা করুন যে আপনার অ্যাপটি ভিআর-এ প্রবেশ করছে।
  • একটি অ্যাঙ্কর বেছে নিন : ব্যবহারকারীদেরকে এই বিশাল পরিসরে হারিয়ে যেতে দেবেন না। এমন একটি উপাদান রাখুন যা UI-কে একত্রিত করতে বা একটি ভিত্তি স্থাপন করতে সাহায্য করে।

XR UI ডিজাইন প্যাটার্ন সম্পর্কে আরও জানতে, Android Developers-এ Design for Android XR দেখুন।

স্থানিক UI এর মৌলিক বিষয়

XR-এর জন্য Androidify ডিজাইন করার সময় আইভি কীভাবে তার মানসিকতা পরিবর্তন করেছিলেন, সেই অভিজ্ঞতা নিয়ে আলোচনা করার পর, চলুন স্পেশিয়াল UI তৈরি করা নিয়ে কথা বলা যাক। আপনি যদি আধুনিক অ্যান্ড্রয়েড টুলস এবং লাইব্রেরি নিয়ে কাজ করতে অভ্যস্ত হন, তবে Jetpack XR SDK ব্যবহার করে একটি স্পেশিয়াল UI তৈরি করা আপনার কাছে পরিচিত মনে হবে। আপনি এমন কিছু ধারণা পাবেন যার সাথে আপনি ইতিমধ্যেই পরিচিত, যেমন Compose ব্যবহার করে লেআউট তৈরি করা। প্রকৃতপক্ষে, স্পেশিয়াল লেআউটগুলো সারি, কলাম এবং স্পেসার ব্যবহার করে তৈরি 2D লেআউটের মতোই:

spatialrows.png

এই উপাদানগুলো SpatialRows এবং SpatialColumns এ সাজানো থাকে

এখানে প্রদর্শিত স্থানিক উপাদানগুলো হলো SpatialPanel কম্পোজেবল, যা আপনাকে টেক্সট, বাটন এবং ভিডিওর মতো ২ডি কন্টেন্ট প্রদর্শন করতে দেয়।

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

একটি SpatialPanel হলো একটি সাবস্পেস কম্পোজেবল । সাবস্পেস কম্পোজেবল অবশ্যই একটি সাবস্পেসের মধ্যে থাকতে হবে এবং SubspaceModifier অবজেক্ট দ্বারা পরিবর্তিত হয়। সাবস্পেস আপনার অ্যাপের UI হায়ারার্কির যেকোনো জায়গায় স্থাপন করা যেতে পারে এবং এটি শুধুমাত্র সাবস্পেস কম্পোজেবল ধারণ করতে পারে। SubspaceModifier অবজেক্টগুলোও Modifier অবজেক্টের মতোই: এগুলো সাইজিং এবং পজিশনিং-এর মতো প্যারামিটার নিয়ন্ত্রণ করে।

একটি Orbiter   এগুলোকে একটি SpatialPanel সাথে সংযুক্ত করা যায় এবং এর সাথে সংযুক্ত কন্টেন্টের সাথে সাথে এটিও চলাচল করতে পারে। এগুলো প্রায়শই সংযুক্ত কন্টেন্ট সম্পর্কে প্রাসঙ্গিক নিয়ন্ত্রণ প্রদান করতে ব্যবহৃত হয়, যা কন্টেন্টটিকে প্রধান মনোযোগের কেন্দ্রবিন্দুতে রাখে। এগুলোকে কন্টেন্টের যেকোনো চারটি দিকে, একটি কনফিগারযোগ্য দূরত্বে স্থাপন করা যেতে পারে।

অরবিটার.পিএনজি
একটি স্পেশিয়ালপ্যানেলের তলদেশে একটি অরবিটার সংযুক্ত থাকে।

আরও অনেক স্পেশিয়াল UI এলিমেন্ট আছে, কিন্তু Androidify-এর জন্য স্পেশিয়াল লেআউট তৈরি করতে আমরা প্রধানত এইগুলোই ব্যবহার করেছি।

এক্সআর ডেভেলপমেন্ট শুরু করা

চলুন প্রজেক্ট সেটআপ দিয়ে শুরু করা যাক। আমরা Jetpack XR Compose ডিপেন্ডেন্সিটি যুক্ত করেছি, যা আপনি Jetpack XR ডিপেন্ডেন্সি পেজে খুঁজে পাবেন।

আমরা এমন একটি বাটনের জন্য কোড যোগ করেছি যা ব্যবহারকারীকে ফুল স্পেসে নিয়ে যায়, এবং এটি করার সক্ষমতা শনাক্ত করার মাধ্যমেই এর কাজ শুরু হয়:

@Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

তারপরে, আমরা আমাদের বিদ্যমান লেআউটগুলিতে 'Expand Content' আইকনটি ব্যবহার করে একটি নতুন বাটন কম্পোনেন্ট তৈরি করেছি এবং এটিকে একটি onClick বিহেভিয়ার দিয়েছি:

@Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

এখন, ওই বাটনটিতে ক্লিক করলে ফুল স্পেসে শুধু মিডিয়াম লেআউটটি দেখা যায়। আমরা স্পেশিয়াল সক্ষমতা যাচাই করে দেখতে পারি যে স্পেশিয়াল UI দেখানো সম্ভব কি না – সেক্ষেত্রে, আমরা এর পরিবর্তে আমাদের নতুন স্পেশিয়াল লেআউটটি দেখাবো:

@Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

হোম স্ক্রিনের জন্য ডিজাইন বাস্তবায়ন করা হচ্ছে

এটি কীভাবে বাস্তবায়িত হয়েছিল তা বোঝার জন্য, চলুন ফুল স্পেস-এর হোম স্ক্রিনের স্থানিক নকশায় ফিরে যাই।

কাস্টমাইজ_৩.পিএনজি

আমরা এখানে দুটি SpatialPanel এলিমেন্ট চিহ্নিত করেছি: ডানদিকের প্যানেলটিতে ভিডিও কার্ডটি রয়েছে, এবং অন্যটিতে মূল UI রয়েছে। সবশেষে, উপরে একটি Orbiter সংযুক্ত আছে। চলুন ভিডিও প্লেয়ার প্যানেলটি দিয়ে শুরু করা যাক:

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

আমরা সাধারণ লেআউটগুলো থেকে 2D VideoPlayer কম্পোনেন্টটি কোনো অতিরিক্ত পরিবর্তন ছাড়াই একটি SpatialPanel এ পুনরায় ব্যবহার করেছি! স্বতন্ত্রভাবে এটি দেখতে এইরকম:

bluetiel.png

মূল কন্টেন্ট প্যানেলের ক্ষেত্রেও একই পদ্ধতি অনুসরণ করা হয়েছে: আমরা মিডিয়াম প্যানেলের কন্টেন্ট একটি SpatialPanel পুনরায় ব্যবহার করেছি।

SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

আমরা এই প্যানেলটিতে একটি ResizePolicy দিয়েছি, যা প্যানেলটির প্রান্তের কাছাকাছি কিছু হ্যান্ডেল তৈরি করে, যার মাধ্যমে ব্যবহারকারী প্যানেলটির আকার পরিবর্তন করতে পারেন। এছাড়াও এতে একটি MovePolicy রয়েছে, যা ব্যবহারকারীকে এটিকে টেনে সরাতে দেয়।

কাস্টমাইজ_৪.পিএনজি

এদেরকে একই সাবস্পেসে রাখলে এরা একে অপরের থেকে স্বাধীন হয়ে যায়, তাই আমরা ভিডিওপ্লেয়ার প্যানেলটিকে মূল কন্টেন্ট প্যানেলের চাইল্ড বানিয়েছি। এর ফলে, প্যারেন্ট-চাইল্ড সম্পর্কের মাধ্যমে মূল কন্টেন্ট প্যানেলটিকে ড্র্যাগ করলে ভিডিওপ্লেয়ার প্যানেলটিও সরে যায়।

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

এভাবেই আমরা প্রথম স্ক্রিনটা তৈরি করেছিলাম!

অন্যান্য স্ক্রিনগুলিতে যাওয়া হচ্ছে

আমি অন্য স্ক্রিনগুলোও সংক্ষেপে আলোচনা করব এবং প্রতিটির জন্য গৃহীত নির্দিষ্ট বিষয়গুলো তুলে ধরব।

fullspace.png
ফুল স্পেসে ক্রিয়েশন স্ক্রিন

এখানে, আমরা Medium লেআউটের উপাদানগুলো পুনরায় ব্যবহার করে SpatialRow এবং SpatialColumn কম্পোজেবল ব্যবহার করে প্রস্তাবিত দেখার স্থানের সাথে মানানসই একটি লেআউট তৈরি করেছি।

fullspace_2.png

সম্পূর্ণ স্ক্রিনে ফলাফল: একটি প্রম্পট অনুযায়ী একটি বট তৈরি করা হয়েছে: লাল বেসবল ক্যাপ, অ্যাভিয়েটর সানগ্লাস, একটি হালকা নীল টি-শার্ট, লাল ও সাদা চেকের শর্টস, সবুজ ফ্লিপ ফ্লপ এবং হাতে একটি টেনিস র‍্যাকেট।


ফলাফলের স্ক্রিনটি একটি ফেদারিং এফেক্ট ব্যবহার করে প্রশংসাসূচক উদ্ধৃতিগুলো দেখায়, যার ফলে সেগুলো স্ক্রিনের প্রান্তের দিকে ধীরে ধীরে মিলিয়ে যায়। এছাড়াও, ব্যবহৃত ইনপুটটি দেখানোর সময় এটি একটি প্রকৃত ৩ডি ট্রানজিশন ব্যবহার করে, যা ছবিটিকে শূন্যে উল্টে দেয়।

গুগল প্লে স্টোরে প্রকাশ করা

এখন যেহেতু অ্যাপটি স্পেশিয়াল লেআউট সহ XR-এর জন্য প্রস্তুত, আমরা এটিকে প্লে স্টোরে প্রকাশ করেছি। অ্যাপটির AndroidManifest.xml ফাইলে আমরা একটি চূড়ান্ত ও গুরুত্বপূর্ণ পরিবর্তন এনেছি:

<!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

এর মাধ্যমে প্লে স্টোর জানতে পারে যে এই অ্যাপটিতে এক্সআর-এর জন্য স্বতন্ত্র বৈশিষ্ট্য রয়েছে এবং একটি ব্যাজ দেখিয়ে ব্যবহারকারীদের জানিয়ে দেয় যে অ্যাপটি এক্সআর-কে মাথায় রেখে তৈরি করা হয়েছে।

androidify2.png
Android XR-এর Google Play Store-এ দেখানো Androidify


রিলিজ আপলোড করার সময়, XR-এর জন্য রিলিজ করতে আমাদের কোনো বিশেষ পদক্ষেপের প্রয়োজন নেই: মোবাইল ট্র্যাকের ব্যবহারকারীদের কাছে এবং XR ডিভাইসের ব্যবহারকারীদের কাছে একই অ্যাপ স্বাভাবিকভাবে বিতরণ করা হয়! তবে, আপনি আপনার অ্যাপের XR-নির্দিষ্ট স্ক্রিনশট যোগ করতে পারেন, অথবা একটি স্পেশিয়াল ভিডিও অ্যাসেট ব্যবহার করে আপনার অ্যাপের একটি ইমারসিভ প্রিভিউ আপলোড করতে পারেন। অ্যান্ড্রয়েড XR ডিভাইসগুলিতে, প্লে স্টোর স্বয়ংক্রিয়ভাবে এটিকে একটি ইমারসিভ 3D প্রিভিউ হিসাবে প্রদর্শন করে, যা ব্যবহারকারীদের অ্যাপটি ইনস্টল করার আগেই আপনার কন্টেন্টের গভীরতা এবং বিশালতা অনুভব করার সুযোগ দেয়।

আজই আপনার নিজস্ব অভিজ্ঞতা তৈরি করা শুরু করুন।

একটি বিদ্যমান 2D Jetpack Compose অ্যাপকে কীভাবে স্পেশিয়ালাইজ করা যায়, তার একটি চমৎকার উদাহরণ হলো Androidify। আজ আমরা Androidify-এর জন্য একটি স্পেশিয়াল UI তৈরির সম্পূর্ণ প্রক্রিয়াটি দেখিয়েছি, যা ডিজাইন থেকে শুরু করে কোড এবং পাবলিশিং পর্যন্ত বিস্তৃত। আমরা বিদ্যমান ডিজাইনগুলোকে স্পেশিয়াল প্যারাডাইমের সাথে কাজ করার জন্য পরিবর্তন করেছি, ব্যবহারকারী 'Full Space'-এ প্রবেশ করলে প্রদর্শিত হয় এমন স্পেশিয়াল লেআউট তৈরি করতে SpatialPanel এবং Orbiter কম্পোজেবল ব্যবহার করেছি, এবং সবশেষে, অ্যাপটির নতুন সংস্করণটি প্লে স্টোরে প্রকাশ করেছি।

আমরা আশা করি এই ব্লগ পোস্টটি আপনাকে বুঝতে সাহায্য করেছে যে কীভাবে আপনি আপনার নিজের অ্যাপগুলো অ্যান্ড্রয়েড এক্সআর-এ আনতে পারেন! এখানে আরও কয়েকটি লিঙ্ক দেওয়া হলো যা আপনাকে এই কাজে সাহায্য করতে পারে:

    লিখেছেন:

    পড়তে থাকুন