يتيح Jetpack Compose تنفيذ Material Design 3، وهو المرحلة التالية من تطوير نظام Material Design. تشمل Material 3 تصاميم ومكونات وميزات تخصيص Material You المعدّلة مثل اللون الديناميكي، وهي مصممة لتكون متوافقة مع النمط المرئي الجديد وواجهة مستخدم النظام على Android 12 والإصدارات الأحدث.
في ما يلي، نوضّح كيفية تنفيذ Material Design 3 باستخدام نموذج تطبيق Reply كمثال. تعتمد عينة Reply بالكامل على Material Design 3.
التبعية
لبدء استخدام Material 3 في تطبيق Compose، أضِف التبعية Compose Material 3
إلى ملفات build.gradle
:
implementation "androidx.compose.material3:material3:$material3_version"
بعد إضافة التبعية، يمكنك البدء بإضافة أنظمة Material Design، بما في ذلك اللون وأسلوب الخط والشكل، إلى تطبيقاتك.
واجهات برمجة التطبيقات التجريبية
تُعتبر بعض واجهات برمجة تطبيقات M3 تجريبية. في هذه الحالات، عليك تفعيل الميزة على مستوى
الدالة أو الملف باستخدام التعليق التوضيحي ExperimentalMaterial3Api
:
// import androidx.compose.material3.ExperimentalMaterial3Api @Composable fun AppComposable() { // M3 composables }
تخصيص التصميم المتعدد الأبعاد
يحتوي مظهر M3 على الأنظمة الفرعية التالية: نظام الألوان وأسلوب الخط والأشكال. عند تخصيص هذه القيم، تظهر تغييراتك تلقائيًا في مكوّنات M3 التي تستخدمها لإنشاء تطبيقك.
تنفِّذ Jetpack Compose هذه المفاهيم باستخدام MaterialTheme
M3
القابل للإنشاء:
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
لتصميم محتوى تطبيقك، حدد نظام الألوان وأسلوب الخط والأشكال الخاصة بتطبيقك.
النمط اللوني
أساس نظام الألوان هو مجموعة من خمسة ألوان رئيسية. يرتبط كلّ من هذه الألوان بلوحة ألوان تتضمّن 13 لونًا، وتستخدمها مكونات Material 3. على سبيل المثال، هذا هو نظام الألوان للمظهر الفاتح في الرد:
اطّلِع على مزيد من المعلومات عن مخطط الألوان وأدوار الألوان.
إنشاء أنظمة ألوان
على الرغم من أنّه يمكنك إنشاء ColorScheme
مخصّص يدويًا، من الأسهل في أغلب الأحيان
إنشاء ColorScheme
باستخدام ألوان المصدر من علامتك التجارية. تتيح لك أداة أداة إنشاء themes Material Design إجراء ذلك، وتصدير
رمز تنسيق المظهر اختياريًا. يتم إنشاء الملفات التالية:
- يحتوي
Color.kt
على ألوان مظهرك مع جميع الأدوار المحددة لكل من الألوان الفاتحة والداكنة.
val md_theme_light_primary = Color(0xFF476810) val md_theme_light_onPrimary = Color(0xFFFFFFFF) val md_theme_light_primaryContainer = Color(0xFFC7F089) // .. // .. val md_theme_dark_primary = Color(0xFFACD370) val md_theme_dark_onPrimary = Color(0xFF213600) val md_theme_dark_primaryContainer = Color(0xFF324F00) // .. // ..
- يحتوي
Theme.kt
على إعدادات لاستخدام الألوان الفاتحة والداكنة ومظهر التطبيق.
private val LightColorScheme = lightColorScheme( primary = md_theme_light_primary, onPrimary = md_theme_light_onPrimary, primaryContainer = md_theme_light_primaryContainer, // .. ) private val DarkColorScheme = darkColorScheme( primary = md_theme_dark_primary, onPrimary = md_theme_dark_onPrimary, primaryContainer = md_theme_dark_primaryContainer, // .. ) @Composable fun ReplyTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colorScheme = if (!darkTheme) { LightColorScheme } else { DarkColorScheme } MaterialTheme( colorScheme = colorScheme, content = content ) }
لاستخدام المظهرَين الفاتح والداكن، استخدِم isSystemInDarkTheme()
. وبناءً على إعداد النظام، حدِّد نظام الألوان الذي تريد استخدامه: فاتح أم داكن.
الألوان الديناميكية
الألوان الديناميكية هي الجزء الرئيسي من لغة Material You، حيث تُستخرج إحدى الخطوات algorithmic ألوانًا مخصّصة من خلفية المستخدم لتطبيقها على التطبيقات وواجهة مستخدم النظام. تُستخدم لوحة الألوان هذه كنقطة بداية لإنشاء أنظمة ألوان فاتحة وداكنة.
تتوفّر ميزة "الألوان الديناميكية" على نظام التشغيل Android 12 والإصدارات الأحدث. إذا كان الخيار "اللون الديناميكي"
متاحًا، يمكنك إعداد ColorScheme
ديناميكي. وإذا لم يكن الأمر كذلك، عليك الرجوع
إلى استخدام ColorScheme
مخصّص فاتح أو داكن.
يوفّر ColorScheme
دوالّ إنشاء لإنشاء نظام ألوان ديناميكي فاتح أو
داكن:
// Dynamic color is available on Android 12+ val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colors = when { dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current) dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current) darkTheme -> DarkColorScheme else -> LightColorScheme }
استخدام الألوان
يمكنك الوصول إلى ألوان مظهر Material في تطبيقك من خلال
MaterialTheme.colorScheme
:
Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )
يمكن استخدام كل دور للّون في مجموعة متنوعة من المواضع حسب حالة المكوّن ومستوى بروزه وتركيزه.
- اللون الأساسي هو اللون الأساسي، ويستخدم للمكونات الرئيسية مثل الأزرار البارزة والحالات النشطة ودرجة لون الأسطح المرتفعة.
- يُستخدَم اللون الثانوي للمفتاح مع العناصر الأقل بروزًا في واجهة المستخدم، مثل شرائح الفلاتر، ويزيد من فرص التعبير عن الألوان.
- يُستخدم اللون الرئيسي الثالث لاشتقاق أدوار اللكنات المتباينة التي يمكن استخدامها لموازنة الألوان الأساسية والثانوية أو جذب انتباه محسّن لعنصر.
يستخدم تصميم نموذج تطبيق Reply لون on-primary-container فوق primary-container للتأكيد على العنصر المحدّد.
Card( colors = CardDefaults.cardColors( containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceVariant ) ) { Text( text = "Dinner club", style = MaterialTheme.typography.bodyLarge, color = if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer else MaterialTheme.colorScheme.onSurface, ) }
يمكنك هنا أن ترى في درج "التنقل خلال الرد" كيف يتم استخدام ألوان الحاوية الثانوية والثالثة في التباين لإنشاء التوكيد والتمييز.
أسلوب الخط
يحدد التصميم المتعدد الأبعاد 3 مقياس من النوع، بما في ذلك أنماط النص التي تم تعديلها من خلال Material Design 2. تم تبسيط التسمية والتجميع لـ: العرض، والعنوان، والعنوان، والنص الأساسي، والتسمية، بأحجام كبيرة ومتوسطة وصغيرة لكل منها.
M3 | الحجم التلقائي للخط/ارتفاع الخط |
displayLarge |
Roboto 57/64 |
displayMedium |
Roboto 45/52 |
displaySmall |
Roboto 36/44 |
headlineLarge |
Roboto 32/40 |
headlineMedium |
Roboto 28/36 |
headlineSmall |
Roboto 24/32 |
titleLarge |
New- Roboto Medium 22/28 |
titleMedium |
Roboto Medium 16/24 |
titleSmall |
Roboto Medium 14/20 |
bodyLarge |
Roboto 16/24 |
bodyMedium |
Roboto 14/20 |
bodySmall |
Roboto 12/16 |
labelLarge |
Roboto Medium 14/20 |
labelMedium |
Roboto Medium 12/16 |
labelSmall |
New Roboto Medium, 11/16 |
تعريف أسلوب الخط
توفّر أداة Compose فئة M3 Typography
، بالإضافة إلى الفئتَين الحاليتَين
TextStyle
والفقرات ذات الصلة بالخط، لوضع نماذج لمقياس نوع Material 3. توفر الدالة الإنشائية Typography
قيمًا تلقائية لكل نمط حتى تتمكّن من حذف أي معلمات لا تريد تخصيصها:
val replyTypography = Typography( titleLarge = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = 0.sp ), titleMedium = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp ), // .. ) // ..
من المرجّح ألا يحتاج منتجك إلى جميع الأنماط التلقائية الـ 15 من مقياس نوع تصميم المواد. في هذا المثال، تم اختيار خمسة مقاسات لمجموعة مُعدَّلة مع حذف الباقي.
يمكنك تخصيص أسلوب الخط من خلال تغيير القيم التلقائية للسمة TextStyle
والسمات المرتبطة بالخط، مثل fontFamily
وletterSpacing
.
bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontFamily = FontFamily.SansSerif, fontStyle = FontStyle.Italic, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp, baselineShift = BaselineShift.Subscript ),
بعد تحديد Typography
، نقْله إلى MaterialTheme
M3:
MaterialTheme( typography = replyTypography, ) { // M3 app Content }
استخدام أنماط النصوص
يمكنك استرداد أسلوب الخط المقدَّم في M3 MaterialTheme
القابل للإنشاء من خلال استخدام MaterialTheme.typography
على النحو التالي:
Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )
يمكنك قراءة المزيد عن إرشادات المواد حول تطبيق أسلوب الخط.
الأشكال
يمكن عرض مساحات العرض في أشكال مختلفة. تجذب الأشكال الانتباه، وتحدِّد المكوّنات، وتوضِّح الحالة، وتعبّر عن العلامة التجارية.
يحدِّد مقياس الشكل نمط زوايا الحاوية، ويقدّم مجموعة من الأشكال المستديرة من المربّع إلى الدائري بالكامل.
تحديد الأشكال
توفّر أداة الإنشاء فئة M3 Shapes
مع مَعلمات موسّعة للسماح باستخدام
أشكال M3 الجديدة. يشبه مقياس الشكل M3 مقياس الكتابة، ما يتيح مجموعة معبرة من الأشكال في واجهة المستخدم.
تتوفّر أشكال بأحجام مختلفة:
- صغير جدًا
- صغير
- متوسط
- كبيرة
- كبير جدًا
يكون لكل شكل قيمة تلقائية، ولكن يمكنك إلغاء هذه القيم:
val replyShapes = Shapes( extraSmall = RoundedCornerShape(4.dp), small = RoundedCornerShape(8.dp), medium = RoundedCornerShape(12.dp), large = RoundedCornerShape(16.dp), extraLarge = RoundedCornerShape(24.dp) )
بعد تحديد Shapes
، يمكنك تمريرها إلى MaterialTheme
M3:
MaterialTheme( shapes = replyShapes, ) { // M3 app Content }
استخدام الأشكال
يمكنك تخصيص مقياس الشكل لجميع المكوّنات في MaterialTheme
أو
يمكنك إجراء ذلك لكل مكوّن على حدة.
طبِّق الشكلَين المتوسط والكبير بالقيم التلقائية:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ } FloatingActionButton( shape = MaterialTheme.shapes.large, onClick = { } ) { /* fab content */ }
هناك شكلان آخران، RectangleShape
وCircleShape
، وهما جزء
من ميزة "الإنشاء". يكون شكل المستطيل بدون نصف قطر حدي، بينما يُظهر شكل الدائرة حواف محاطة بالكامل:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
توضِّح الأمثلة أدناه بعض المكوّنات التي تم تطبيق قيم الشكل التلقائية عليها:
يمكنك قراءة المزيد عن إرشادات المواد حول تطبيق الشكل.
التأكيد
يتم التأكيد في M3 باستخدام اختلافات في اللون ومجموعاته المتوافقة. في M3، هناك طريقتان لإضافة تركيز إلى واجهة المستخدم:
- استخدام ألوان السطح ولون السطح المتغير والخلفية إلى جانب ألوان السطح المتغير والألوان المتغيرة للسطح من نظام ألوان M3 الموسّع على سبيل المثال، يمكن استخدام surface مع on-surface-variant ويمكن استخدام surface-variant مع on-surface لتوفير مستويات مختلفة من التركيز.
- استخدام كثافة خط مختلفة للنص لقد اطّلعت أعلاه على أنّه يمكنك تحديد قيم تقديرية مخصّصة لمقياس الأنواع من أجل توفير درجة تركيز مختلفة.
bodyLarge = TextStyle( fontWeight = FontWeight.Bold ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal )
الارتفاع
تمثل المادة 3 المسقط الرأسي باستخدام تراكبات ألوان الدرجات اللونية بشكل أساسي. إنها طريقة جديدة للتمييز بين الحاويات والأسطح عن بعضها البعض - يؤدي زيادة ارتفاع درجات اللون إلى استخدام نغمة أكثر بروزًا - بالإضافة إلى الظلال.
تم أيضًا تغيير تراكب الارتفاع في المظاهر الداكنة إلى تراكب ألوان نغمية في Material 3. يأتي لون التراكب من خانة اللون الأساسي.
سطح M3: وهو العنصر الأساسي الذي يمكن دمجه في معظم مكوّنات M3، ويشمل ميزتَي التحسين اللوني وتحسين التظليل:
Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }
مكوّنات التصميم المادّي
يوفّر أسلوب Material Design مجموعة غنية من مكونات Material Design (مثل الأزرار والرقائق والبطاقات وشريط التنقّل) التي تتّبع أسلوب Material Theme وتساعدك في إنشاء تطبيقات جميلة باستخدام أسلوب Material Design. يمكنك بدء استخدام المكوّنات التي تتضمّن سمات تلقائية مباشرةً.
Button(onClick = { /*..*/ }) { Text(text = "My Button") }
يوفّر M3 العديد من النُسخ من المكوّنات نفسها لاستخدامها في أدوار مختلفة حسب التركيز والاهتمام.
- زر إجراء رئيسي ممتد للإجراء الأكثر أهمية:
ExtendedFloatingActionButton( onClick = { /*..*/ }, modifier = Modifier ) { Icon( imageVector = Icons.Default.Edit, contentDescription = stringResource(id = R.string.edit), ) Text( text = stringResource(id = R.string.add_entry), ) }
- زر معبأ لإجراء عالي التوكيد:
Button(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.view_entry)) }
- زر نصي للإجراء الذي يُمنَح أهمية منخفضة:
TextButton(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.replated_articles)) }
يمكنك الاطّلاع على مزيد من المعلومات حول الأزرار والمكوّنات الأخرى في Material Design. توفّر واجهة Material 3 مجموعة كبيرة من مجموعات المكوّنات، مثل الأزرار وأشرطة التطبيقات ومكونات التنقّل المصمّمة خصيصًا لحالات الاستخدام وأحجام الشاشات المختلفة.
مكونات التنقّل
توفّر Material أيضًا العديد من مكوّنات التنقّل التي تساعدك في تنفيذ التنقّل، استنادًا إلى أحجام الشاشات وحالاتها المختلفة.
يتم استخدام NavigationBar
للأجهزة المدمجة عندما تريد استهداف 5 وجهات أو أقل:
NavigationBar(modifier = Modifier.fillMaxWidth()) { Destinations.entries.forEach { replyDestination -> NavigationBarItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
يُستخدَم NavigationRail
للأجهزة اللوحية أو الهواتف الصغيرة أو المتوسطة الحجم في
الوضع الأفقي. ويوفّر هذا الإجراء راحة للمستخدمين ويحسن تجربتهم
على هذه الأجهزة.
NavigationRail( modifier = Modifier.fillMaxHeight(), ) { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }
يمكنك الردّ باستخدام كليهما في المظهر التلقائي لتوفير تجربة شاملة للمستخدمين على جميع أحجام الأجهزة.
يتم استخدام NavigationDrawer
على الأجهزة اللوحية متوسطة الحجم إلى الكبيرة التي تتوفّر فيها
مساحة كافية لعرض التفاصيل. يمكنك استخدام PermanentNavigationDrawer
أو
ModalNavigationDrawer
مع NavigationRail
.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { }, label = { } ) } }) { }
تعمل خيارات التنقّل على تحسين تجربة المستخدم وسهولة الاستخدام وإمكانية الوصول. يمكنك الاطّلاع على مزيد من المعلومات حول مكوّنات التنقّل في واجهة المستخدم المستندة إلى لغة Material Design في إنشاء رمز برمجي لتطبيق متوافق مع مختلف الأجهزة.
تخصيص مظهر المكوّن
يشجّع التصميم M3 على التخصيص والمرونة. يتم تطبيق ألوان تلقائية على جميع المكوّنات، ولكنّها توفّر واجهات برمجة تطبيقات مرنة لتخصيص ألوانها إذا كان ذلك مطلوبًا.
توفّر معظم المكوّنات، مثل البطاقات والأزرار، عنصرًا تلقائيًا يعرِض واجهات ملفّات تعريف اللون والموضع العمودي التي يمكن تعديلها لتخصيص المكوّن:
val customCardColors = CardDefaults.cardColors( contentColor = MaterialTheme.colorScheme.primary, containerColor = MaterialTheme.colorScheme.primaryContainer, disabledContentColor = MaterialTheme.colorScheme.surface, disabledContainerColor = MaterialTheme.colorScheme.onSurface, ) val customCardElevation = CardDefaults.cardElevation( defaultElevation = 8.dp, pressedElevation = 2.dp, focusedElevation = 4.dp ) Card( colors = customCardColors, elevation = customCardElevation ) { // m3 card content }
يمكنك الاطّلاع على مزيد من المعلومات عن تخصيص Material 3.
واجهة مستخدِم النظام
تستند بعض جوانب Material You إلى النمط المرئي الجديد وواجهة مستخدم النظام على Android 12 والإصدارات الأحدث. هناك مجالان رئيسيان حيث توجد تغييرات، وهما التموّج والتمرير الزائد. وليس عليك اتّخاذ أي إجراء إضافي لتنفيذ هذه التغييرات.
تمويج
يستخدم تأثير "تموج" الآن وميضًا خفيفًا لإضاءة الأسطح عند الضغط عليها. تستخدِم أداة إنشاء تموّج Material عنصر RippleDrawable الأساسي في نظام Android، لذا يتوفّر التموّج البراق على الإصدار 12 من نظام Android والإصدارات الأحدث لجميع مكونات Material.
تجاوز حد التمرير
يستخدم الآن التمرير السريع تأثير التمدد عند حافة الحاويات التي يمكن التمرير فيها.
تكون ميزة التمديد إلى ما بعد حدود الشاشة مفعّلة تلقائيًا في العناصر القابلة للتجميع التي تتضمّن حاوية لفائف الصفحات، مثل
LazyColumn
وLazyRow
وLazyVerticalGrid
، في الإصدار 1.1.0 من
Compose Foundation والإصدارات الأحدث، بغض النظر عن مستوى واجهة برمجة التطبيقات.
تسهيل الاستخدام
تم تصميم معايير تسهيل الاستخدام المضمّنة في مكونات Material لتوفير أسس لتصميم المنتجات الشاملة. يمكن أن يؤدي فهم مدى سهولة استخدام منتجك إلى تحسين سهولة الاستخدام لجميع المستخدمين، بما في ذلك أولئك الذين يعانون من ضعف في الرؤية أو العمى أو ضعف السمع أو العجز الإدراكي أو العجز الحركي أو العجز الظرفي (مثل كسر الذراع).
تسهيل استخدام الألوان
تم تصميم الألوان الديناميكية لاستيفاء معايير تسهيل الاستخدام في ما يتعلق بتباين الألوان. إنّ نظام لوحات الألوان مهمّ لجعل أيّ مخطط ألوان متاحًا تلقائيًا.
يقدّم نظام الألوان في Material قيمًا وقياسات نغمة عادية يمكن استخدامها لاستيفاء نسب التباين المناسبة للاستخدام من قِبل الأشخاص الذين يعانون من عجز.
تستخدم جميع مكونات Material والتصاميم الديناميكية أدوار الألوان المذكورة أعلاه من مجموعة من لوحات الألوان التي تم اختيارها لاستيفاء متطلبات تسهيل الاستخدام. ومع ذلك، إذا كنت بصدد تخصيص المكوّنات، احرص على استخدام أدوار الألوان المناسبة وتجنُّب عدم المطابقة.
استخدِم on-primary فوق primary، وon-primary-container فوق primary-container، والشيء نفسه مع الألوان المميّزة والمحايدة الأخرى لتوفير تباين سهل الاستخدام للمستخدم.
يؤدي استخدام حاوية ثالثة فوق الحاوية الأساسية إلى منح المستخدم زرًا يتسم بدرجة تضاد منخفضة:
// ✅ Button with sufficient contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary ) ) { } // ❌ Button with poor contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.tertiaryContainer, contentColor = MaterialTheme.colorScheme.primaryContainer ) ) { }
سهولة استخدام أسلوب الخط
يُحدِّث مقياس النوع M3 منحدر النوع الثابت وقيمه لتقديم إطار عمل مبسط وديناميكي لفئات الحجم التي تتدرج على جميع الأجهزة.
على سبيل المثال، في M3، يمكن تعيين قيم مختلفة للشاشة الصغيرة بناءً على سياق الجهاز، مثل الهاتف أو الجهاز اللوحي.
الشاشات الكبيرة
تقدّم Material إرشادات حول التنسيقات المتكيفة والأجهزة القابلة للطي لجعل تطبيقاتك سهلة الاستخدام وتحسين بيئة العمل للمستخدمين الذين يحملون أجهزة كبيرة.
توفّر Material أنواعًا مختلفة من التنقّل لمساعدتك في تقديم تجربة أفضل للمستخدمين على الأجهزة الكبيرة.
يمكنك الاطّلاع على مزيد من المعلومات حول إرشادات جودة التطبيقات المتوافقة مع الشاشات الكبيرة في Android، ونموذج الردّ الخاص بنا للتصميم التكيُّفي والمتوافق مع الأجهزة الجوّالة.
مزيد من المعلومات
لمزيد من المعلومات حول مظاهر Material في تطبيق "الإنشاء"، اطّلِع على موارد التالية:
أمثلة على التطبيقات
مستندات Google
مرجع واجهة برمجة التطبيقات ورمز المصدر
الفيديوهات
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عندما تكون لغة JavaScript غير مفعّلة.
- نقل البيانات من "المادة 2" إلى "المادة 3" في ميزة "الإنشاء"
- تصميم Material Design 2 في ميزة "الإنشاء"
- أنظمة التصميم المخصّصة في Compose