تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يوفّر Material Design مكونات وتنسيقات تتكيّف مع الواقع المعزّز. باستخدام
مكتبة Material 3 الحالية، يتم تحسين المكوّنات والتصاميم التكيُّفية
بسلوكيات واجهة المستخدم المكانية.
يمكنك تعديل عملية تنفيذ M3 الحالية من خلال إضافة ملف EnableXrComponentOverrides wrapper. أضِف مكتبة XR Compose Material3
إلى مكتبات تطبيقك المُستخدَمة.
استخدام EnableXrComponentOverrides لتعديل تطبيقك الحالي
سيتم تعديل جميع عناصر واجهة مستخدم Compose في M3 داخل حزمة EnableXrComponentOverrides على أجهزة XR. يتيح لك هذا الغلاف اختيار أيّ مكوّنات تريد
استبعادها من هذا السلوك.
أضِف حزمة EnableXrComponentOverrides لتعديل تطبيقك وفقًا لمبادئ Material
Design لتجربة الواقع المعزّز.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Implement Material Design for XR\n\nMaterial Design provides components and layouts that adapt for XR. Using the\nexisting [Material 3 library](/jetpack/androidx/releases/compose-material3), components and [adaptive layouts](/jetpack/androidx/releases/compose-material3-adaptive) are\nenhanced with spatial UI behaviors. \nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the\nvideo](/static/videos/design/ui/xr/visual-design-ls-adapted-opt.mp4) and watch it with a video player.\n\nYou can adapt your current M3 implementation by adding the\n`EnableXrComponentOverrides` wrapper. Add the [XR Compose Material3 library](/jetpack/androidx/releases/xr-compose-material3#declaring_dependencies)\nto your app's dependencies.\n\nUse EnableXrComponentOverrides to adapt your existing app\n---------------------------------------------------------\n\nAll M3 Compose UI inside of the [`EnableXrComponentOverrides`](/reference/kotlin/androidx/xr/compose/material3/package-summary#EnableXrComponentOverrides(androidx.xr.compose.material3.XrComponentOverrideEnabler,kotlin.Function0)) wrapper will\nadapt on XR devices. This wrapper lets you choose any components you want to\nexclude from this behavior.\n\nAdd the `EnableXrComponentOverrides` wrapper to adapt your app to Material\nDesign for XR.\n\nNavigation rail\n---------------\n\nNavigation rail in any Compose layout, including [`NavigationSuiteScaffold`](/develop/ui/compose/layouts/adaptive/build-adaptive-navigation)\nwill automatically adapt to XR Orbiter. For more information, read [Material\nDesign guidelines](https://m3.material.io/components/navigation-rail/xr).\n\n\nNon-spatialized navigation rail \n\nSpatialized (XR-adapted) navigation rail\n\n\u003cbr /\u003e\n\nNavigation bar\n--------------\n\nNavigation bar in any Compose layout, including [`NavigationSuiteScaffold`](/develop/ui/compose/layouts/adaptive/build-adaptive-navigation)\nwill automatically adapt to XR orbiter. For more information, read [Material\nDesign guidelines](https://m3.material.io/components/navigation-bar/xr).\n\n\nNon-spatialized navigation bar \n\nSpatialized (XR-adapted) navigation bar\n\n\u003cbr /\u003e\n\nDialogs\n-------\n\nA `BasicAlertDialog` will adapt to XR, adding elevation to the component.\n\nLearn more about [Dialogs](https://m3.material.io/components/dialogs/xr) and [adaptive design guidelines](https://m3.material.io/foundations/adaptive-design).\n\n\nNon-spatialized dialog \n\nSpatialized (XR-adapted) dialog\n\n\u003cbr /\u003e\n\nTop app bars\n------------\n\nA `TopAppBar` will automatically adapt to XR orbiter.\n\nLearn more about [Top app bars](https://m3.material.io/components/app-bars/xr) and [adaptive design\nguidelines](https://m3.material.io/foundations/adaptive-design).\n\n\nNon-spatialized top app bar \n\nSpatialized (XR-adapted) top app bar\n\n\u003cbr /\u003e\n\nList-detail layout for XR\n-------------------------\n\n[Compose Material 3 Adaptive Layouts](/jetpack/androidx/releases/compose-material3-adaptive) in XR have a 1:1 mapping where each\npane is placed inside its own XR spatial panel. Learn more about\n[`ListDetailPaneScaffold`](/develop/ui/compose/layouts/adaptive/list-detail) and [adaptive design guidelines](https://m3.material.io/foundations/adaptive-design).\n\n\nNon-spatialized ListDetailPaneScaffold \n\nSpatialized (XR-adapted) ListDetailPaneScaffold\n\n\u003cbr /\u003e\n\nSupport pane layout for XR\n--------------------------\n\n[Compose Material 3 Adaptive Layouts](/jetpack/androidx/releases/compose-material3-adaptive) in XR have a 1:1 mapping where each\npane is placed inside its own XR spatial panel. Learn more about\n[`SupportingPaneScaffold`](/develop/ui/compose/layouts/adaptive/build-a-supporting-pane-layout) and [adaptive design guidelines](https://m3.material.io/foundations/adaptive-design).\n\n\nNon-spatialized SupportingPaneScaffold \n\nSpatialized (XR-adapted) SupportingPaneScaffold\n\n\u003cbr /\u003e\n\nStart designing with the Material 3 Design Kit for Figma\n--------------------------------------------------------\n\n[Download the Material 3 Design Kit to get started](https://www.figma.com/community/file/1035203688168086460)\n\nSee also\n--------\n\n- [Develop UI with Jetpack Compose for XR](/develop/xr/jetpack-xr-sdk/develop-ui)\n- [Spatial UI design guidelines](/design/ui/xr/guides/spatial-ui)"]]
