Material Design هو دليل شامل للتصميم المرئي والحركة والتفاعل عبر
الأنظمة الأساسية والأجهزة. لاستخدام التصميم المتعدد الأبعاد في تطبيقات Android، اتبع الإرشادات المحددة في
مواصفات Material Design. إذا كان تطبيقك يستخدم مكتبة Compose في Jetpack، يمكنك استخدام مكتبة Compose Material 3. إذا كان تطبيقك
طرق العرض، يمكنك استخدام
مكونات Android Material
المكتبة.
يوفّر Android الميزات التالية لمساعدتك في إنشاء تطبيقات Material Design:
مظهر تطبيق Material Design لتصميم جميع تطبيقات واجهة المستخدم المصغّرة
التطبيقات المصغّرة للمشاهدات المعقّدة، مثل القوائم والبطاقات
للاستفادة من ميزات Material، مثل تصميم أدوات واجهة المستخدم القياسية،
وتبسيط تعريف نمط التطبيق، وتطبيق مظهر قائم على المواد في تطبيقك.
الشكل 1: مظهر المواد الداكنة
الشكل 2. مظهر فاتح الأبعاد.
إذا كنت تستخدم "استوديو Android" لإنشاء مشروع Android، سيتم تلقائيًا تطبيق "مظهر متعدد الأبعاد".
للتعرّف على كيفية تعديل مظهر مشروعك، يمكنك الاطّلاع على
الأنماط والمظاهر:
لمنح المستخدمين تجربة مألوفة، استخدم أنماط تجربة المستخدم الأكثر شيوعًا في Material:
شجِّع المستخدمين على اتّخاذ الإجراء الرئيسي في واجهة المستخدم باستخدام زر إجراء عائم.
يمكنك عرض علامتك التجارية وعناصر التنقل والبحث والإجراءات الأخرى باستخدام
شريط التطبيقات.
يمكنك إظهار التنقل في تطبيقك وإخفاؤه باستخدام
درج التنقل.
يمكنك الاختيار من بين العديد من مكونات Material الأخرى لتخطيط التطبيق والتنقل، مثل
أشرطة الأدوات وعلامات التبويب وشريط التنقل السفلي والمزيد. للاطّلاع على كلّها، يمكنك الاطّلاع على
كتالوج مكونات Material Design لنظام التشغيل Android.
استخدِم رموز Material Icons المحدّدة مسبقًا كلّما أمكن. على سبيل المثال، بالنسبة إلى التنقل "القائمة" زر
بالنسبة إلى لائحة التنقل، استخدِم "الهامبرغر" القياسي . عرض
رموز التصميم المتعدد الأبعاد لقائمة من
الأيقونات المتاحة. يمكنك أيضًا استيراد رموز SVG من مكتبة Material Icon باستخدام
Vector Asset Studio:
بطاقات وظلال الارتفاع
بالإضافة إلى الموقعَين X وY، تمتلك الملفات الشخصية في Android السمة Z.
يمثل هذا الموقع ارتفاع الملف الشخصي، والذي يحدد ما يلي:
حجم الظل: تؤدي المشاهدات ذات قيم Z الأعلى إلى ظهور ظلال أكبر.
ترتيب الرسم: تظهر المشاهدات ذات قيم Z الأعلى أعلى الملفات الشخصية الأخرى.
الشكل 3. قيمة Z التي تمثّل الارتفاع
يمكنك تطبيق المسقط الرأسي على تخطيط يستند إلى بطاقة، مما يساعدك في عرض أجزاء مهمة من
المعلومات داخل البطاقات التي توفر مظهر Material. يمكنك استخدام التطبيق المصغّر
CardView ل
إنشاء بطاقات بارتفاع تلقائي. لمزيد من المعلومات، يُرجى مراجعة
إنشاء تنسيق مستند إلى بطاقة:
تتيح لك واجهات برمجة تطبيقات الصور المتحركة إنشاء رسوم متحركة مخصصة للتعليقات باللمس في عناصر التحكم في واجهة المستخدم،
والتغييرات في حالة العرض وتحولات الأنشطة.
تتيح لك واجهات برمجة التطبيقات هذه ما يلي:
ويمكنك الرد على أحداث اللمس في طرق العرض باستخدام صور تعليقات اللمس المتحركة.
إخفاء طرق العرض وإظهارها باستخدام الصور المتحركة للاكتشاف الدائري
التبديل بين الأنشطة باستخدام رسوم متحركة مخصّصة لانتقال الأنشطة
أنشئ صورًا متحركة أكثر طبيعية باستخدام الحركة المنحنية.
يمكنك تحريك التغييرات في خاصية عرض واحدة أو أكثر باستخدام الصور المتحركة تغيير حالة العرض.
عرض الصور المتحركة في عناصر قائمة الحالة بين تغييرات حالة العرض
تم دمج الصور المتحركة للملاحظات باللمس في العديد من طرق العرض العادية، مثل الأزرار. واجهات برمجة تطبيقات الرسوم المتحركة
تخصيص هذه الرسوم المتحركة وإضافتها إلى طرق العرض المخصصة الخاصة بك.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-26 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-26 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Material Design for Android\n\nTry the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to work with theming in Compose. \n[Material Design 3 →](/jetpack/compose/designsystems/material3) \n\nMaterial Design is a comprehensive guide for visual, motion, and interaction design across\nplatforms and devices. To use Material Design in your Android apps, follow the guidelines defined in\nthe [Material Design specification](https://m3.material.io/). If your app uses Jetpack\nCompose, you can use the\n[Compose Material 3](/jetpack/androidx/releases/compose-material3) library. If your app\nuses views, you can use the\n[Android Material Components](https://github.com/material-components/material-components-android)\nlibrary. \n\nAndroid provides the following features to help you build Material Design apps:\n\n- A Material Design app theme to style all your UI widgets\n- Widgets for complex views, such as lists and cards\n- APIs for custom shadows and animations\n\nMaterial theme and widgets\n--------------------------\n\nTo take advantage of the Material features, such as styling for standard UI widgets, and to\nstreamline your app's style definition, apply a Material-based theme to your app. \n**Figure 1.** Dark Material theme. \n**Figure 2.** Light Material theme.\n\nIf you use Android Studio to create your Android project, it applies a Material theme by default.\nTo learn how to update your project's theme, see\n[Styles and themes](/develop/ui/views/theming/themes).\n\nTo provide your users a familiar experience, use Material's most common UX patterns:\n\n- Promote your UI's main action with a [floating action button](/guide/topics/ui/floating-action-button) (FAB).\n- Show your brand, navigation, search, and other actions using the [app bar](/training/appbar).\n- Show and hide your app's navigation with the [navigation drawer](/training/implementing-navigation/nav-drawer).\n- Choose from the many other Material Components for your app layout and navigation, such as collapsing toolbars, tabs, a bottom nav bar, and more. To see them all, see the [Material Components for Android catalog](https://m3.material.io/components).\n\nWhenever possible, use predefined Material Icons. For example, for the navigation \"menu\" button\nfor your navigation drawer, use the standard \"hamburger\" icon. See\n[Material Design Icons](https://m3.material.io/styles/icons/overview) for a list of\navailable icons. You can also import SVG icons from the Material Icon library with Android Studio's\n[Vector Asset Studio](/studio/write/vector-asset-studio#importing).\n\nElevation shadows and cards\n---------------------------\n\nIn addition to the *X* and *Y* properties, views in Android have a *Z* property.\nThis property represents the elevation of a view, which determines the following:\n\n- The size of its shadow: views with higher *Z* values cast bigger shadows.\n- The drawing order: views with higher *Z* values appear on top of other views.\n\n**Figure 3.** The *Z* value representing elevation.\n\nYou can apply elevation to a card-based layout, which helps you display important pieces of\ninformation inside cards that provide a Material look. You can use the\n[CardView](/reference/androidx/cardview/widget/CardView) widget to\ncreate cards with a default elevation. For more information, see\n[Create a card-based layout](/guide/topics/ui/layout/cardview).\n\nFor information about adding elevation to other views, see\n[Create shadows and clip views](/training/material/shadows-clipping).\n\nAnimations\n----------\n\n**Figure 4.** A touch feedback animation.\n\nAnimation APIs let you create custom animations for touch feedback in UI controls,\nchanges in view state, and activity transitions.\n\nThese APIs let you:\n\n- Respond to touch events in your views with **touch feedback** animations.\n- Hide and show views with **circular reveal** animations.\n- Switch between activities with custom **activity transition** animations.\n- Create more natural animations with **curved motion**.\n- Animate changes in one or more view properties with **view state change** animations.\n- Show animations in **state list drawables** between view state changes.\n\nTouch feedback animations are built into several standard views, such as buttons. The animation APIs\nlet you customize these animations and add them to your custom views.\n\nFor more information, see\n[Introduction to animations](/training/animation/overview).\n\nDrawables\n---------\n\n[Try the Compose way\nWork with Drawables in Compose\narrow_forward](/jetpack/compose/graphics/images/compare)\n\nThese capabilities for drawables help you implement Material Design apps:\n\n- **Vector drawables** are scalable without losing definition and are perfect for single-color in-app icons. Learn more about [vector drawables](/guide/topics/graphics/vector-drawable-resources).\n- **Drawable tinting** lets you define bitmaps as an alpha mask and tint them with a color at runtime. See how to [add tint to drawables](/guide/topics/graphics/2d-graphics#DrawableTint).\n- **Color extraction** lets you automatically extract prominent colors from a bitmap image. See how to [select colors with the Palette API](/training/material/palette-colors)."]]
