طراحی متریال راهنمای جامعی برای طراحی بصری، حرکتی و تعاملی در پلتفرم‌ها و دستگاه‌ها است. برای استفاده از طراحی متریال در برنامه‌های اندروید خود، دستورالعمل‌های تعریف شده در مشخصات طراحی متریال را دنبال کنید. اگر برنامه شما از Jetpack Compose استفاده می کند، می توانید از کتابخانه Compose Material 3 استفاده کنید. اگر برنامه شما از view ها استفاده می کند، می توانید از کتابخانه Material Components Android استفاده کنید.
Android ویژگی های زیر را برای کمک به شما در ساخت برنامه های طراحی متریال ارائه می دهد:
یک تم برنامه Material Design برای استایل دادن به تمام ویجت‌های UI شما
ابزارک برای نماهای پیچیده، مانند لیست ها و کارت ها
API برای سایه ها و انیمیشن های سفارشی
موضوع مواد و ویجت ها
برای بهره‌مندی از ویژگی‌های Material، مانند استایل‌سازی برای ویجت‌های استاندارد UI، و ساده‌سازی تعریف سبک برنامه‌تان، یک تم مبتنی بر مواد را در برنامه خود اعمال کنید.
شکل 1. تم مواد تیره.
شکل 2. موضوع مواد سبک.
اگر از Android Studio برای ایجاد پروژه اندروید خود استفاده می کنید، به طور پیش فرض یک تم Material اعمال می کند. برای آشنایی با نحوه به‌روزرسانی طرح زمینه، به سبک‌ها و تم‌ها مراجعه کنید.
برای ارائه تجربه ای آشنا به کاربران خود، از رایج ترین الگوهای UX Material استفاده کنید:
عملکرد اصلی رابط کاربری خود را با یک دکمه عمل شناور (FAB) تبلیغ کنید.
با استفاده از نوار برنامه ، نام تجاری، پیمایش، جستجو و سایر اقدامات خود را نشان دهید.
پیمایش برنامه خود را با کشوی پیمایش نشان داده و پنهان کنید.
برای طرح‌بندی و پیمایش برنامه‌تان، از میان بسیاری از مؤلفه‌های متریال دیگر، مانند نوارهای ابزار جمع‌شده، برگه‌ها، نوار پیمایش پایین و موارد دیگر، یکی را انتخاب کنید. برای مشاهده همه آنها، به کاتالوگ Material Components for Android مراجعه کنید.
در صورت امکان، از نمادهای متریال از پیش تعریف شده استفاده کنید. به عنوان مثال، برای دکمه ناوبری "منو" در کشوی ناوبری خود، از نماد استاندارد "همبرگر" استفاده کنید. برای لیستی از نمادهای موجود، به نمادهای طراحی متریال مراجعه کنید. همچنین می‌توانید نمادهای SVG را از کتابخانه Material Icon با Vector Asset Studio Android Studio وارد کنید.
سایه ها و کارت های ارتفاع
علاوه بر ویژگی های X و Y ، نماها در اندروید دارای ویژگی Z هستند. این ویژگی نشان دهنده ارتفاع یک نمای است که موارد زیر را تعیین می کند:
اندازه سایه آن: نماهایی با مقادیر Z بالاتر سایه های بزرگتری ایجاد می کنند.
ترتیب ترسیم: نماهایی با مقادیر Z بالاتر در بالای نماهای دیگر ظاهر می شوند.
شکل 3. مقدار Z نشان دهنده ارتفاع است.
می‌توانید ارتفاع را به یک طرح‌بندی مبتنی بر کارت اعمال کنید، که به شما کمک می‌کند اطلاعات مهمی را در داخل کارت‌ها نمایش دهید که ظاهری ماده ارائه می‌دهند. می توانید از ویجت CardView برای ایجاد کارت هایی با ارتفاع پیش فرض استفاده کنید. برای اطلاعات بیشتر، به ایجاد طرح‌بندی مبتنی بر کارت مراجعه کنید.
APIهای انیمیشن به شما امکان می‌دهند انیمیشن‌های سفارشی برای بازخورد لمسی در کنترل‌های UI، تغییرات در حالت نمایش و انتقال فعالیت ایجاد کنید.
این API ها به شما اجازه می دهند:
با انیمیشن های بازخورد لمسی به رویدادهای لمسی در نماهای خود پاسخ دهید.
مخفی کردن و نمایش نماها با انیمیشن های آشکار دایره ای .
با انیمیشن‌های انتقال فعالیت سفارشی، بین فعالیت‌ها جابه‌جا شوید.
با حرکت منحنی انیمیشن های طبیعی بیشتری ایجاد کنید.
متحرک سازی تغییرات در یک یا چند ویژگی مشاهده با انیمیشن های تغییر حالت نمایش .
نمایش انیمیشن ها در فهرست حالت های قابل ترسیم بین تغییرات حالت نمایش.
انیمیشن های بازخورد لمسی در چندین نمای استاندارد مانند دکمه ها ساخته شده اند. API های انیمیشن به شما این امکان را می دهند که این انیمیشن ها را سفارشی کنید و به نماهای سفارشی خود اضافه کنید.
این قابلیت‌ها برای ترسیم‌ها به شما کمک می‌کنند برنامه‌های طراحی متریال را پیاده‌سازی کنید:
ترسیم‌های برداری بدون از دست دادن تعریف، مقیاس‌پذیر هستند و برای آیکون‌های درون‌برنامه تک رنگ عالی هستند. درباره ترسیم‌پذیرهای برداری بیشتر بدانید.
رنگ‌بندی قابل ترسیم به شما امکان می‌دهد بیت‌مپ‌ها را به‌عنوان یک ماسک آلفا تعریف کنید و در زمان اجرا آنها را با یک رنگ رنگ کنید. نحوه افزودن رنگ به طرح‌ها را ببینید.
استخراج رنگ به شما امکان می دهد رنگ های برجسته را به طور خودکار از یک تصویر بیت مپ استخراج کنید. نحوه انتخاب رنگ ها با Palette API را ببینید.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین به‌روزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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)."]]
