Jetpack Compose में, Material You और मटीरियल 3 एक्सप्रेसिव को लागू करने की सुविधा मिलती है. मटीरियल 3 एक्सप्रेसिव, मटीरियल डिज़ाइन का अगला वर्शन है. M3 Expressive, Material Design 3 का एक नया वर्शन है. इसमें रिसर्च के आधार पर थीम, कॉम्पोनेंट, मोशन, टाइपोग्राफ़ी वगैरह से जुड़े अपडेट शामिल हैं. इन्हें इस तरह से डिज़ाइन किया गया है कि आपको दिलचस्प और आकर्षक प्रॉडक्ट बनाने में मदद मिले, जो उपयोगकर्ताओं को पसंद आएं. यह Material You की, उपयोगकर्ता की गतिविधि और दिलचस्पी के हिसाब से उपलब्ध सुविधाओं के साथ भी काम करता है. जैसे, डाइनैमिक कलर. M3 Expressive, Android 16 की विज़ुअल स्टाइल और सिस्टम यूज़र इंटरफ़ेस (यूआई) को बेहतर बनाता है.
यहां हम Material Design 3 को लागू करने का तरीका बता रहे हैं. इसके लिए, हमने Reply सैंपल ऐप्लिकेशन का इस्तेमाल किया है. Reply का सैंपल, पूरी तरह से मटीरियल डिज़ाइन 3 पर आधारित है.
निर्भर है
अपने Compose ऐप्लिकेशन में Material 3 का इस्तेमाल शुरू करने के लिए, अपनी build.gradle फ़ाइलों में Compose Material 3 डिपेंडेंसी जोड़ें:
implementation "androidx.compose.material3:material3:$material3_version"
डिपेंडेंसी जोड़ने के बाद, अपने ऐप्लिकेशन में मटीरियल डिज़ाइन सिस्टम जोड़े जा सकते हैं. इनमें रंग, टाइपोग्राफ़ी, और आकार शामिल हैं.
एक्सपेरिमेंट के तौर पर उपलब्ध एपीआई
कुछ M3 एपीआई को एक्सपेरिमेंट के तौर पर इस्तेमाल किया जाता है. ऐसे मामलों में, आपको ExperimentalMaterial3Api ऐनोटेशन का इस्तेमाल करके, फ़ंक्शन या फ़ाइल लेवल पर शामिल होना होगा:
// import androidx.compose.material3.ExperimentalMaterial3Api @Composable fun AppComposable() { // M3 composables }
मटीरियल थीमिंग
M3 थीम में ये सबसिस्टम शामिल होते हैं: कलर स्कीम, टाइपोग्राफ़ी, और शेप. इन वैल्यू को पसंद के मुताबिक बनाने पर, आपके बदलाव उन M3 कॉम्पोनेंट में अपने-आप दिखते हैं जिनका इस्तेमाल करके आपने ऐप्लिकेशन बनाया है.
Jetpack Compose, इन कॉन्सेप्ट को M3 MaterialTheme कंपोज़ेबल के साथ लागू करता है:
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
अपने ऐप्लिकेशन के कॉन्टेंट को थीम देने के लिए, कलर स्कीम, टाइपोग्राफ़ी, और आकार तय करें.
कलर स्कीम
कलर स्कीम का आधार, पांच मुख्य रंगों का सेट होता है. इनमें से हर रंग, 13 टोन वाले टोनल पैलेट से जुड़ा होता है. इनका इस्तेमाल, Material 3 के कॉम्पोनेंट करते हैं. उदाहरण के लिए, Reply के लिए लाइट थीम की कलर स्कीम यह है:
कलर स्कीम और कलर रोल के बारे में ज़्यादा जानें.
कलर स्कीम जनरेट करना
कस्टम ColorScheme को मैन्युअल तरीके से बनाया जा सकता है. हालांकि, अपने ब्रैंड के सोर्स कलर का इस्तेमाल करके इसे जनरेट करना ज़्यादा आसान होता है. Material Theme Builder टूल की मदद से ऐसा किया जा सकता है. साथ ही, Compose मटीरियल थीमिंग कोड को एक्सपोर्ट भी किया जा सकता है. ये फ़ाइलें जनरेट होती हैं:
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 का मुख्य हिस्सा है. इसमें एक एल्गोरिदम, उपयोगकर्ता के वॉलपेपर से पसंद के हिसाब से रंग चुनता है. इन रंगों को उपयोगकर्ता के ऐप्लिकेशन और सिस्टम के यूज़र इंटरफ़ेस (यूआई) पर लागू किया जाता है. इस कलर पैलेट का इस्तेमाल, लाइट और डार्क कलर स्कीम जनरेट करने के लिए शुरुआती पॉइंट के तौर पर किया जाता है.
डाइनैमिक कलर की सुविधा, 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 }
रंगों का इस्तेमाल
MaterialTheme.colorScheme का इस्तेमाल करके, अपने ऐप्लिकेशन में मटीरियल थीम के रंग ऐक्सेस किए जा सकते हैं:
Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )
हर कलर रोल का इस्तेमाल अलग-अलग जगहों पर किया जा सकता है. यह कॉम्पोनेंट की स्थिति, अहमियत, और ज़ोर देने के तरीके पर निर्भर करता है.
- प्राइमरी कलर, बेस कलर होता है. इसका इस्तेमाल मुख्य कॉम्पोनेंट के लिए किया जाता है. जैसे, मुख्य बटन, ऐक्टिव स्टेटस, और एलिवेटेड सरफ़ेस का टिंट.
- सेकंडरी की कलर का इस्तेमाल, यूज़र इंटरफ़ेस (यूआई) में कम अहम कॉम्पोनेंट के लिए किया जाता है. जैसे, फ़िल्टर चिप. इससे रंग के ज़रिए अपनी पसंद को ज़ाहिर करने के ज़्यादा मौके मिलते हैं.
- टर्शियरी की कलर का इस्तेमाल, कंट्रास्ट वाले एक्सेंट की भूमिकाओं को तय करने के लिए किया जाता है. इनका इस्तेमाल, प्राइमरी और सेकंडरी कलर को बैलेंस करने या किसी एलिमेंट पर ज़्यादा ध्यान खींचने के लिए किया जा सकता है.
Reply के सैंपल ऐप्लिकेशन के डिज़ाइन में, चुनी गई आइटम पर ज़ोर देने के लिए, primary-container के ऊपर on-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, ) }
यहां Reply के नेविगेशन पैनल में देखा जा सकता है कि सेकंडरी और टर्शियरी कंटेनर के रंगों का इस्तेमाल, कंट्रास्ट के तौर पर कैसे किया जाता है. इससे, कॉन्टेंट को हाइलाइट करने और उसे आकर्षक बनाने में मदद मिलती है.
टाइपोग्राफ़ी
मटीरियल डिज़ाइन 3 में टाइप स्केल को तय किया गया है. इसमें टेक्स्ट स्टाइल भी शामिल हैं. इन्हें मटीरियल डिज़ाइन 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, Material 3 टाइप स्केल को मॉडल करने के लिए, M3 Typography क्लास उपलब्ध कराता है. साथ ही, यह मौजूदा TextStyle और फ़ॉन्ट से जुड़ी क्लास भी उपलब्ध कराता है. 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 तय करने के बाद, उसे M3 MaterialTheme को पास करें:
MaterialTheme( typography = replyTypography, ) { // M3 app Content }
टेक्स्ट स्टाइल का इस्तेमाल करना
MaterialTheme.typography का इस्तेमाल करके, M3 MaterialTheme कंपोज़ेबल को दी गई टाइपोग्राफ़ी को वापस पाया जा सकता है:
Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )
टाइपोग्राफ़ी लागू करने के बारे में, मटीरियल के दिशा-निर्देशों में ज़्यादा पढ़ा जा सकता है.
आकार
मटीरियल सरफ़ेस को अलग-अलग शेप में दिखाया जा सकता है. शेप, लोगों का ध्यान खींचने, कॉम्पोनेंट की पहचान करने, स्थिति बताने, और ब्रैंड को दिखाने में मदद करते हैं.
शेप स्केल से कंटेनर के कोनों की स्टाइल तय होती है. इससे कोनों को चौकोर से लेकर पूरी तरह से गोल तक, अलग-अलग तरह से घुमाया जा सकता है.
आकार तय करना
Compose, 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 तय करने के बाद, इसे M3 MaterialTheme को पास किया जा सकता है:
MaterialTheme( shapes = replyShapes, ) { // M3 app Content }
आकृतियों का इस्तेमाल करना
MaterialTheme में मौजूद सभी कॉम्पोनेंट के लिए, शेप स्केल को पसंद के मुताबिक बनाया जा सकता है या हर कॉम्पोनेंट के लिए अलग-अलग शेप स्केल सेट किया जा सकता है.
डिफ़ॉल्ट वैल्यू के साथ मीडियम और बड़े साइज़ का आकार लागू करना:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ } FloatingActionButton( shape = MaterialTheme.shapes.large, onClick = { } ) { /* fab content */ }
इसके अलावा, दो और शेप हैं — RectangleShape और CircleShape — जो Compose का हिस्सा हैं. रेक्टैंगल शेप में कोई बॉर्डर रेडियस नहीं होता है और सर्कल शेप में पूरी तरह से गोल किनारे दिखते हैं:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
यहां दिए गए उदाहरणों में, कुछ कॉम्पोनेंट दिखाए गए हैं. इनमें डिफ़ॉल्ट शेप वैल्यू लागू की गई हैं:
शेप लागू करने के बारे में, मटीरियल डिज़ाइन के दिशा-निर्देशों में ज़्यादा पढ़ा जा सकता है.
टेक्स्ट को हाइलाइट करना
M3 में, रंग और उसके ऑन-कलर कॉम्बिनेशन के वैरिएशन का इस्तेमाल करके, किसी एलिमेंट पर ज़ोर दिया जाता है. M3 में, अपने यूज़र इंटरफ़ेस (यूआई) पर ज़ोर देने के दो तरीके हैं:
- M3 कलर सिस्टम के एक्सपैंडेड वर्शन से, on-surface और on-surface-variants रंगों के साथ-साथ surface, surface-variant, और background रंगों का इस्तेमाल करना. उदाहरण के लिए, सरफ़ेस का इस्तेमाल ऑन-सरफ़ेस-वैरिएंट के साथ किया जा सकता है. साथ ही, सरफ़ेस-वैरिएंट का इस्तेमाल ऑन-सरफ़ेस के साथ किया जा सकता है, ताकि अलग-अलग लेवल पर ज़ोर दिया जा सके.
- टेक्स्ट के लिए अलग-अलग फ़ॉन्ट वेट का इस्तेमाल करना. ऊपर, आपने देखा कि अलग-अलग तरह से ज़ोर देने के लिए, हमारे टाइप स्केल को कस्टम वेट दिए जा सकते हैं.
bodyLarge = TextStyle( fontWeight = FontWeight.Bold ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal )
ऊंचाई
Material 3 में एलिवेशन को मुख्य रूप से टोनल कलर ओवरले का इस्तेमाल करके दिखाया जाता है. यह कंटेनर और प्लैटफ़ॉर्म को एक-दूसरे से अलग दिखाने का एक नया तरीका है. टोनल एलिवेशन को बढ़ाने के लिए, शैडो के अलावा ज़्यादा गहरे टोन का इस्तेमाल किया जाता है.
Material 3 में, गहरे रंग वाली थीम में एलिवेशन ओवरले को टोनल कलर ओवरले में बदल दिया गया है. ओवरले का रंग, मुख्य रंग के स्लॉट से आता है.
M3 Surface, ज़्यादातर M3 कॉम्पोनेंट के पीछे मौजूद बैकिंग कंपोज़ेबल है. इसमें टोनल और शैडो एलिवेशन, दोनों के लिए सहायता शामिल है:
Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }
मटीरियल कॉम्पोनेंट
मटीरियल डिज़ाइन में, मटीरियल कॉम्पोनेंट का एक बड़ा सेट होता है. जैसे, बटन, चिप, कार्ड, और नेविगेशन बार. ये कॉम्पोनेंट, मटीरियल थीमिंग के मुताबिक होते हैं. इनकी मदद से, मटीरियल डिज़ाइन वाले शानदार ऐप्लिकेशन बनाए जा सकते हैं. डिफ़ॉल्ट प्रॉपर्टी वाले कॉम्पोनेंट का इस्तेमाल, तुरंत किया जा सकता है.
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 3 में कॉम्पोनेंट के कई सुइट उपलब्ध हैं. जैसे, बटन, ऐप्लिकेशन बार, और नेविगेशन कॉम्पोनेंट. इन्हें खास तौर पर, अलग-अलग इस्तेमाल के उदाहरणों और स्क्रीन साइज़ के लिए डिज़ाइन किया गया है.
नेविगेशन कॉम्पोनेंट
Material में कई नेविगेशन कॉम्पोनेंट भी मिलते हैं. इनकी मदद से, अलग-अलग स्क्रीन साइज़ और स्थितियों के हिसाब से नेविगेशन लागू किया जा सकता है.
NavigationBar का इस्तेमाल, छोटे डिवाइसों के लिए किया जाता है. ऐसा तब किया जाता है, जब आपको पांच या इससे कम डेस्टिनेशन को टारगेट करना हो:
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 = { } ) } }
BottomNavigationBar (बाईं ओर) और NavigationRail (दाईं ओर) के जवाब का शोकेससभी डिवाइस साइज़ के लिए बेहतरीन उपयोगकर्ता अनुभव देने के लिए, डिफ़ॉल्ट थीम में दोनों का इस्तेमाल करके जवाब दें.
NavigationDrawer का इस्तेमाल, मीडियम से लेकर बड़े साइज़ के टैबलेट के लिए किया जाता है. इनमें जानकारी दिखाने के लिए, ज़रूरत के मुताबिक जगह होती है. NavigationRail के साथ, PermanentNavigationDrawer या ModalNavigationDrawer, दोनों का इस्तेमाल किया जा सकता है.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { }, label = { } ) } }) { }
नेविगेशन के विकल्प, उपयोगकर्ता अनुभव, एर्गोनॉमिक्स, और पहुंच को बेहतर बनाते हैं. Compose अडैप्टिव कोड लैब में, मटीरियल नेविगेशन कॉम्पोनेंट के बारे में ज़्यादा जानें.
किसी कॉम्पोनेंट की थीम को पसंद के मुताबिक बनाना
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 और इसके बाद के वर्शन पर उपलब्ध नए विज़ुअल स्टाइल और सिस्टम यूज़र इंटरफ़ेस (यूआई) से ली गई हैं. दो मुख्य बदलाव, रिपल और ओवरस्क्रोल से जुड़े हैं. इन बदलावों को लागू करने के लिए, आपको कुछ और करने की ज़रूरत नहीं है.
रिपल
रिपल इफ़ेक्ट में अब दबाए जाने पर, सतहों को रोशन करने के लिए हल्की चमक का इस्तेमाल किया जाता है. Compose Material Ripple, Android पर बैकग्राउंड में प्लैटफ़ॉर्म RippleDrawable का इस्तेमाल करता है. इसलिए, स्पार्कल रिपल, Android 12 और इसके बाद के वर्शन पर सभी Material कॉम्पोनेंट के लिए उपलब्ध है.
ओवरस्क्रोल
ओवरस्क्रोल अब स्क्रोलिंग कंटेनर के किनारे पर स्ट्रेच इफ़ेक्ट का इस्तेमाल करता है.
स्ट्रेच ओवरस्क्रोल की सुविधा, स्क्रोल किए जा सकने वाले कंटेनर कंपोज़ेबल में डिफ़ॉल्ट रूप से चालू होती है. उदाहरण के लिए, Compose Foundation 1.1.0 और इसके बाद के वर्शन में, LazyColumn, LazyRow, और LazyVerticalGrid. यह सुविधा, एपीआई लेवल पर निर्भर नहीं करती.
सुलभता
मटीरियल कॉम्पोनेंट में पहले से मौजूद सुलभता स्टैंडर्ड, प्रॉडक्ट डिज़ाइन को सभी के लिए सुलभ बनाने के लिए डिज़ाइन किए गए हैं. अपने प्रॉडक्ट की सुलभता को समझने से, सभी उपयोगकर्ताओं के लिए उसे इस्तेमाल करना आसान हो सकता है. इनमें कम दृष्टि, दृष्टिहीनता, सुनने में परेशानी, संज्ञानात्मक अक्षमता, मोटर अक्षमता या किसी स्थिति की वजह से आई अक्षमता (जैसे, हाथ टूटना) वाले लोग शामिल हैं.
रंगों की सुलभता
डाइनैमिक कलर को इस तरह डिज़ाइन किया गया है कि यह कलर कंट्रास्ट के लिए सुलभता के मानकों को पूरा करे. किसी भी कलर स्कीम को डिफ़ॉल्ट रूप से सुलभ बनाने के लिए, टोनल पैलेट का सिस्टम ज़रूरी है.
Material के कलर सिस्टम में, स्टैंडर्ड टोन वैल्यू और मेज़रमेंट की सुविधा मिलती है. इनका इस्तेमाल करके, सुलभता के लिए तय किए गए कंट्रास्ट रेशियो को पूरा किया जा सकता है.
सभी मटीरियल कॉम्पोनेंट और डाइनैमिक थीमिंग में, पहले से ही ऊपर दिए गए कलर रोल का इस्तेमाल किया जाता है. ये कलर रोल, टोनल पैलेट के सेट से लिए जाते हैं. इन्हें सुलभता की ज़रूरी शर्तों को पूरा करने के लिए चुना जाता है. हालांकि, अगर कॉम्पोनेंट को पसंद के मुताबिक बनाया जा रहा है, तो पक्का करें कि सही कलर रोल का इस्तेमाल किया जाए और रंगों का गलत कॉम्बिनेशन न बने.
प्राइमरी के ऊपर ऑन-प्राइमरी और प्राइमरी-कंटेनर के ऊपर ऑन-प्राइमरी-कंटेनर का इस्तेमाल करें. साथ ही, अन्य एक्सेंट और न्यूट्रल रंगों के लिए भी ऐसा ही करें, ताकि उपयोगकर्ता को सुलभ कंट्रास्ट मिल सके.
प्राइमरी कंटेनर के ऊपर टर्शियरी कंटेनर का इस्तेमाल करने से, उपयोगकर्ता को खराब कंट्रास्ट वाला बटन दिखता है:
// ✅ 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 पर बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी से जुड़े दिशा-निर्देशों के बारे में ज़्यादा जानें. साथ ही, अडैप्टिव और सुलभ डिज़ाइन के लिए, हमारा Reply सैंपल देखें.
ज़्यादा जानें
Compose में मटीरियल थीमिंग के बारे में ज़्यादा जानने के लिए, ये संसाधन देखें:
सैंपल के तौर पर मिले ऐप्लिकेशन
Docs
एपीआई का संदर्भ और सोर्स कोड
वीडियो
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर, लिंक टेक्स्ट दिखता है
- Compose में, Material 2 से Material 3 पर माइग्रेट करना
- Compose में मटीरियल डिज़ाइन 2
- Compose में कस्टम डिज़ाइन सिस्टम