আপনার স্পেশিয়াল UI-এর জন্য মেটেরিয়াল ডিজাইন প্রয়োগ করা

প্রযোজ্য XR ডিভাইস
এই নির্দেশিকা আপনাকে এই ধরনের XR ডিভাইসের জন্য অভিজ্ঞতা তৈরি করতে সাহায্য করে।
XR হেডসেট
তারযুক্ত XR গ্লাস

Material Design, XR-এর জন্য কম্পোনেন্ট ও লেআউট প্রদান করে। Material 3 লাইব্রেরি, অ্যাডাপ্টিভ লেআউট এবং XR Compose Material 3 লাইব্রেরি ব্যবহার করে, আপনি Compose অ্যাপে স্পেশিয়াল UI আচরণ তৈরি করতে পারবেন।

XR কম্পোনেন্টের জন্য Material 3 ব্যবহার করতে, আপনার অ্যাপের ডিপেন্ডেন্সিতে XR Compose Material 3 লাইব্রেরি যোগ করুন অথবা Orbiter, SpatialDialog ও SpatialPanel-এর মতো XR কন্টেনারের জন্য Jetpack Compose-এর মধ্যে সরাসরি স্ট্যান্ডার্ড Material 3 কম্পোনেন্ট রাখুন।

XR কম্পোনেন্টের জন্য Material 3 ব্যবহার করা

androidx.xr.compose.material3 লাইব্রেরি সাধারণ স্পেশিয়াল UI প্যাটার্নের জন্য XR কম্পোনেন্টের জন্য Material 3 প্রদান করে—এর মধ্যে রয়েছে নেভিগেশন রেল ও বার, টপ অ্যাপ বার, ফ্লোটিং টুলবার, ডায়ালগ, লিস্ট-ডিটেল লেআউট এবং হোম স্পেস ও ফুল স্পেসের মধ্যে পরিবর্তন করার জন্য টগল বোতাম। এই লাইব্রেরিতে স্পেশিয়ালাইজড Spatial* কম্পোজেবলগুলি পরীক্ষামূলক এবং @OptIn(ExperimentalMaterial3XrApi::class)-এর মাধ্যমে অপ্ট-ইন করতে হবে।

স্পেশিয়াল UI চালু থাকলে XR কম্পোনেন্টের জন্য Material 3 এবং স্পেশিয়াল UI চালু না থাকলে স্ট্যান্ডার্ড Material 3 কম্পোনেন্ট রেন্ডার করতে LocalSpatialCapabilities.current.isSpatialUiEnabled চেক করুন। আরও তথ্যের জন্য, স্পেশিয়াল ক্যাপাবিলিটি চেক করুন।

স্পেশিয়াল UI চালু থাকলে, শুরুতে-অ্যালাইন করা Orbiter-এ মেটেরিয়াল ৩ নেভিগেশন রেল দেখাতে SpatialNavigationRail বা SpatialWideNavigationRail ব্যবহার করুন। আরও তথ্যের জন্য, মেটেরিয়াল ডিজাইন নির্দেশিকা দেখুন।

নন-স্পেশিয়ালাইজড নেভিগেশন
রেল

নন-স্পেশিয়ালাইজড নেভিগেশন রেল

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড) নেভিগেশন
রেল

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড) নেভিগেশন রেল

স্পেশিয়াল UI চালু থাকলে, নিচের দিকে অ্যালাইন করা Orbiter-এ Material 3 নেভিগেশন বার দেখাতে, SpatialNavigationBar বা SpatialShortNavigationBar ব্যবহার করুন। আরও তথ্যের জন্য, মেটেরিয়াল ডিজাইন নির্দেশিকা দেখুন।

নন-স্পেশিয়ালাইজড নেভিগেশন
বার

নন-স্পেশিয়ালাইজড নেভিগেশন বার

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড) নেভিগেশন
বার

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড) নেভিগেশন বার

ডায়ালগ

SpatialDialog-এর মধ্যে স্পেশিয়াল এলিভেশন সহ বেসিক অ্যালার্ট ডায়ালগ দেখাতে SpatialBasicAlertDialog ব্যবহার করুন অথবা স্ট্যান্ডার্ড মেটেরিয়াল ৩ ডায়ালগ কন্টেন্ট সরাসরি SpatialDialog-এ র‍্যাপ করুন।

আরও তথ্যের জন্য, ডায়ালগ এবং অ্যাডাপ্টিভ ডিজাইন নির্দেশিকা দেখুন।

Non-spatialized
সংলাপ

নন-স্পেশিয়ালাইজড ডায়ালগ

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড)
ডায়ালগ

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড) ডায়ালগ

স্ক্রিনের উপরের দিকে থাকা অ্যাপ বার

স্পেশিয়াল UI চালু থাকলে, উপরে-অ্যালাইন করা Orbiter-এর মধ্যে Material 3 টপ অ্যাপ বার দেখাতে SpatialTopAppBar বা SpatialTwoRowsTopAppBar ব্যবহার করুন।

আরও তথ্যের জন্য, শীর্ষ অ্যাপ বার এবং অ্যাডাপ্টিভ ডিজাইন নির্দেশিকা দেখুন।

নন-স্পেশিয়ালাইজড টপ অ্যাপ
বার

নন-স্পেশিয়ালাইজড টপ অ্যাপ বার

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড) টপ অ্যাপ
বার

স্পেশিয়ালাইজড (XR-এর জন্য মানানসই) টপ অ্যাপ বার

XR-এর জন্য লিস্ট-ডিটেল লেআউট

স্পেশিয়াল UI চালু থাকলে SpatialListDetailPaneScaffold ব্যবহার করুন যাতে Material 3 অ্যাডাপ্টিভ লিস্ট-ডিটেল লেআউট দেখানো যায় যেখানে প্রতিটি প্যান তার নিজস্ব SpatialPanel-এর মধ্যে থাকে। স্পেশিয়াল UI চালু না থাকলে, ListDetailPaneScaffold ব্যবহার করুন। আরও তথ্যের জন্য, তালিকা-বিবরণ লেআউট এবং অ্যাডাপ্টিভ ডিজাইন সংক্রান্ত নির্দেশিকা দেখুন।

Non-spatialized
ListDetailPaneScaffold

নন-স্পেশিয়ালাইজড ListDetailPaneScaffold

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড)
ListDetailPaneScaffold

স্পেশিয়ালাইজড (XR-এর জন্য মানানসই) ListDetailPaneScaffold

XR-এর জন্য প্যানেল লেআউট সাপোর্ট

স্পেশিয়াল UI চালু করা থাকলে, আপনার প্রধান প্যান ও সহায়ক প্যান আলাদা আলাদা SpatialPanel কন্টেনারে রাখুন, যা Subspace-এর মধ্যে SpatialRow-এ থাকবে। স্পেশিয়াল UI চালু না থাকলে, SupportingPaneScaffold ব্যবহার করুন। আরও তথ্যের জন্য, সাপোর্টিং প্যানেল এবং অ্যাডাপ্টিভ ডিজাইন নির্দেশিকা দেখুন।

নন-স্পেশিয়ালাইজড
SupportingPaneScaffold

নন-স্পেশিয়ালাইজড SupportingPaneScaffold

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড)
SupportingPaneScaffold

স্পেশিয়ালাইজড (XR-অ্যাডাপ্টেড) SupportingPaneScaffold

Figma-এর জন্য Material 3 ডিজাইন কিট ব্যবহার করে ডিজাইন করা শুরু করুন

Material 3 ডিজাইন কিট থেকে এলিমেন্টের কোলাজ

শুরু করতে Material 3 ডিজাইন কিট ডাউনলোড করুন

এছাড়াও দেখুন