Jetpack Compose में, Material Design 3 को लागू करने की सुविधा मिलती है. यह मटीरियल डिज़ाइन का नया वर्शन है. मटीरियल 3 में अपडेट की गई थीम, कॉम्पोनेंट, और Material You के मनमुताबिक बनाई गई डाइनैमिक कलर जैसी सुविधाएं शामिल हैं. इसे Android 12 और उसके बाद के वर्शन पर, नई विज़ुअल स्टाइल और सिस्टम यूज़र इंटरफ़ेस (यूआई) के हिसाब से डिज़ाइन किया गया है.
यहां हम Reply के सैंपल ऐप्लिकेशन का उदाहरण देकर, Material Design 3 को लागू करने का तरीका बता रहे हैं. जवाब का सैंपल, पूरी तरह से Material Design 3 पर आधारित है.
डिपेंडेंसी
अपने Compose ऐप्लिकेशन में Material 3 का इस्तेमाल करने के लिए, Compose Material 3 को अपनी build.gradle फ़ाइलों पर डिपेंडेंसी जोड़ें:
implementation "androidx.compose.material3:material3:$material3_version"
डिपेंडेंसी जोड़ने के बाद, अपने ऐप्लिकेशन में मटीरियल डिज़ाइन सिस्टम जोड़े जा सकते हैं. इनमें रंग, टाइपोग्राफ़ी, और आकार शामिल हैं.
प्रयोग के लिए एपीआई
कुछ M3 API को एक्सपेरिमेंट के तौर पर माना जाता है. ऐसे मामलों में, आपको ExperimentalMaterial3Api ऐनोटेशन का इस्तेमाल करके, फ़ंक्शन या फ़ाइल लेवल पर ऑप्ट इन करना होगा:
// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
// M3 composables
}
मटीरियल थीमिंग
M3 थीम में ये सबसिस्टम होते हैं: कलर स्कीम, टाइपोग्राफ़ी, और शेप. इन वैल्यू को पसंद के मुताबिक बनाने पर, आपके बदलाव उन M3 कॉम्पोनेंट में अपने-आप दिखने लगते हैं जिनका इस्तेमाल आपने ऐप्लिकेशन बनाने के लिए किया है.
Jetpack Compose, M3 MaterialTheme
composable के साथ इन कॉन्सेप्ट को लागू करता है:
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
अपने ऐप्लिकेशन के कॉन्टेंट को थीम के हिसाब से बनाने के लिए, अपने ऐप्लिकेशन के हिसाब से कलर स्कीम, टाइपोग्राफ़ी, और आकार तय करें.
रंग संयोजन
कलर स्कीम का आधार, पांच मुख्य रंगों का सेट होता है. इनमें से हर रंग, 13 टोन वाले टोनल पैलेट से जुड़ा होता है. इसका इस्तेमाल Material 3 के कॉम्पोनेंट करते हैं. उदाहरण के लिए, जवाब के लिए लाइट थीम की कलर स्कीम यह है:
कलर स्कीम और कलर भूमिकाओं के बारे में ज़्यादा पढ़ें.
कलर स्कीम जनरेट करें
कस्टम 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
}
रंग का इस्तेमाल
अपने ऐप्लिकेशन में Material थीम के रंगों को ऐक्सेस करने के लिए,
MaterialTheme.colorScheme:
Text(
text = "Hello theming",
color = MaterialTheme.colorScheme.primary
)
हर कलर रोल का इस्तेमाल कई जगहों पर किया जा सकता है. यह कॉम्पोनेंट की स्थिति, प्रमुखता, और ज़ोर देने के आधार पर तय होता है.
- प्राइमरी, बेस कलर होता है. इसका इस्तेमाल मुख्य कॉम्पोनेंट के लिए किया जाता है. जैसे, प्रमुख बटन, ऐक्टिव स्टेटस, और बेहतर किए गए प्लैटफ़ॉर्म के टिनट.
- सेकंडरी की कलर का इस्तेमाल, यूज़र इंटरफ़ेस (यूआई) में कम अहमियत वाले कॉम्पोनेंट के लिए किया जाता है. जैसे, फ़िल्टर चिप. इससे कलर एक्सप्रेशन के अवसर बढ़ते हैं.
- तीसरे कुंजी के रंग का इस्तेमाल कंट्रास्ट एक्सेंट की भूमिकाएं तय करने के लिए किया जाता है. इनका इस्तेमाल प्राइमरी और सेकंडरी कलर को बैलेंस करने या एलिमेंट पर बेहतर तरीके से ध्यान देने के लिए किया जा सकता है.
Reply के सैंपल ऐप्लिकेशन के डिज़ाइन में, चुने गए आइटम पर फ़ोकस करने के लिए, प्राइमरी-कंटेनर के ऊपर 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,
)
}
यहां जवाब के नेविगेशन ड्रॉअर में देखा जा सकता है कि मुख्य और तीसरे दर्जे के कंटेनर के रंगों को कंट्रास्ट में कैसे इस्तेमाल किया जाता है, ताकि ज़्यादा ध्यान खींचा जा सके.
मुद्रण कला
Material Design 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, मटीरियल 3 टाइप के स्केल का मॉडल बनाने के लिए, मौजूदा TextStyle और फ़ॉन्ट से जुड़ी क्लास के साथ-साथ M3 Typography क्लास उपलब्ध कराता है. 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
),
// ..
)
// ..
ऐसा हो सकता है कि आपके प्रॉडक्ट के लिए, Material Design टाइप स्केल के सभी 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
)
टाइपोग्राफ़ी लागू करने के लिए, Material के दिशा-निर्देशों के बारे में ज़्यादा पढ़ें.
आकृतियां
मेटालिक प्लैटफ़ॉर्म को अलग-अलग आकार में दिखाया जा सकता है. आकार, लोगों का ध्यान खींचते हैं, घटकों की पहचान करते हैं, स्थिति की जानकारी देते हैं, और ब्रैंड को दिखाते हैं.
आकार का स्केल, कंटेनर के कोनों के स्टाइल को तय करता है. इसमें स्क्वेयर से लेकर पूरी तरह से गोलाकार तक, कोने के आकार की रेंज उपलब्ध होती है.
आकार परिभाषित करें
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 दो अन्य शेप हैं, जो कंपोज़ का हिस्सा हैं. आयत का आकार, बॉर्डर की रेडियस के बिना होता है और वृत्त के आकार में पूरे गोले
के किनारे होते हैं:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
यहां दिए गए उदाहरणों में, कुछ ऐसे कॉम्पोनेंट दिखाए गए हैं जिन पर डिफ़ॉल्ट शेप वैल्यू लागू की गई हैं:
आकार लागू करने के लिए, Material के दिशा-निर्देशों के बारे में ज़्यादा पढ़ें.
टेक्स्ट को हाइलाइट करना
M3 में, कलर के वैरिएशन और उसके ऑन-कलर कॉम्बिनेशन का इस्तेमाल करके, फ़ोकस दिया जाता है. M3 में, अपने यूज़र इंटरफ़ेस (यूआई) पर फ़ोकस करने के दो तरीके हैं:
- बड़े किए गए M3 कलर सिस्टम के, सर्फ़ेस पर, सर्फ़ेस के वैरिएंट के साथ-साथ, सर्फ़ेस और बैकग्राउंड के रंगों का इस्तेमाल करना. उदाहरण के लिए, अलग-अलग लेवल पर फ़ोकस देने के लिए, surface का इस्तेमाल on-surface-variant के साथ और surface-variant का इस्तेमाल on-surface के साथ किया जा सकता है.
- टेक्स्ट के लिए अलग-अलग फ़ॉन्ट वेट का इस्तेमाल करना. ऊपर, आपने देखा कि अलग-अलग महत्व देने के लिए हमारे टाइप स्केल के लिए कस्टम वेट उपलब्ध कराए जा सकते हैं.
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
ऊंचाई
Material 3 में, मुख्य रूप से टोनल कलर ओवरले का इस्तेमाल करके ऊंचाई को दिखाया जाता है. यह कंटेनर और सतहों को एक-दूसरे से अलग करने का एक नया तरीका है — इसकी मदद से, गहरे रंग के बैकग्राउंड में शैडो के साथ-साथ ज़्यादा साफ़ टोन का भी इस्तेमाल किया जाता है.
गहरे रंग वाली थीम में, एलिवेशन ओवरले को भी Material 3 में टोनल कलर ओवरले में बदल दिया गया है. ओवरले का रंग, प्राइमरी कलर स्लॉट से लिया जाता है.
ज़्यादातर M3 कॉम्पोनेंट के पीछे मौजूद बैकिंग कॉम्पोज़ेबल, 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 = { }
)
}
}) {
}
नेविगेशन के विकल्पों से, उपयोगकर्ता अनुभव, काम करने के तरीके, और ऐप्लिकेशन को ऐक्सेस करने की सुविधा बेहतर होती है. एडाप्टिव कोडलैब बनाना में, Material नेविगेशन कॉम्पोनेंट के बारे में ज़्यादा जानें.
कॉम्पोनेंट की थीम को पसंद के मुताबिक बनाना
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 Ripple बनाना, Android पर प्लैटफ़ॉर्म RippleDrawable का इस्तेमाल करता है. इसलिए, Android 12 और इसके बाद के वर्शन पर, सभी Material कॉम्पोनेंट के लिए स्पार्कल रिपल उपलब्ध है.
ओवरस्क्रोल
अब ओवरस्क्रोल, स्क्रोल किए जा रहे कंटेनर के किनारे पर स्ट्रेच इफ़ेक्ट का इस्तेमाल करता है.
Compose Foundation 1.1.0 और इसके बाद के वर्शन में, स्क्रोलिंग कंटेनर कॉम्पोज़ेबल में, स्ट्रेच ओवरस्क्रोल डिफ़ॉल्ट रूप से चालू होता है. जैसे, LazyColumn, LazyRow, और LazyVerticalGrid. इस बात से कोई फ़र्क़ नहीं पड़ता कि एपीआई लेवल क्या है.
सुलभता
मटीरियल कॉम्पोनेंट में पहले से मौजूद सुलभता के स्टैंडर्ड को इस तरह से डिज़ाइन किया गया है कि वे किसी एक प्रॉडक्ट के लिए सभी लोगों को ध्यान में रखकर प्रॉडक्ट डिज़ाइन कर पाएं. अपने प्रॉडक्ट के ऐक्सेस की सुविधा को समझने से, सभी उपयोगकर्ताओं के लिए उसे इस्तेमाल करना आसान हो जाता है. इनमें वे लोग भी शामिल हैं जिन्हें कम दिखने, अंधे होने, सुनने में दिक्कत होने, समझने में दिक्कत होने, हाथ-पैरों में दिक्कत होने या किसी स्थिति में दिक्कत होने (जैसे, हाथ टूटना) की समस्या है.
रंग की सुविधा
डाइनैमिक कलर को इस तरह डिज़ाइन किया गया है कि यह कलर कंट्रास्ट के लिए, सुलभता से जुड़े स्टैंडर्ड को पूरा करता हो. किसी भी कलर स्कीम को डिफ़ॉल्ट रूप से ऐक्सेस करने लायक बनाने के लिए, टोनल पैलेट का सिस्टम अहम है.
Material का कलर सिस्टम, स्टैंडर्ड टोन वैल्यू और मेज़रमेंट उपलब्ध कराता है. इनका इस्तेमाल, सुलभ कंट्रास्ट रेशियो को पूरा करने के लिए किया जा सकता है.
मटीरियल कॉम्पोनेंट और डाइनैमिक थीमिंग, पहले से ही टोनल पैलेट के सेट में से, ऊपर दी गई रंग भूमिकाओं का इस्तेमाल कर रहे हैं. इन्हें सुलभता की ज़रूरी शर्तों को पूरा करने के लिए चुना गया है. हालांकि, अगर कॉम्पोनेंट को पसंद के मुताबिक बनाया जा रहा है, तो पक्का करें कि कलर रोल का सही इस्तेमाल किया गया हो और इनके बीच अंतर न हो.
प्राइमरी के ऊपर on-primary और प्राइमरी-कंटेनर के ऊपर on-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 में अलग-अलग तरह के नेविगेशन उपलब्ध होते हैं. इनकी मदद से, बड़े डिवाइसों पर उपयोगकर्ताओं को बेहतर अनुभव दिया जा सकता है.
Android के बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के दिशा-निर्देशों के बारे में ज़्यादा जानें. साथ ही, ऐप्लिकेशन को अलग-अलग डिवाइसों के हिसाब से ढालने और उसे ऐक्सेस करने लायक बनाने के लिए, जवाब का सैंपल देखें.
ज़्यादा जानें
Compose में मटीरियल थीम के बारे में ज़्यादा जानने के लिए, ये संसाधन देखें:
सैंपल ऐप्लिकेशन
Docs
एपीआई का रेफ़रंस और सोर्स कोड
वीडियो
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose में मटीरियल 2 से मटीरियल 3 पर माइग्रेट करना
- Compose में मटीरियल डिज़ाइन 2
- Compose में कस्टम डिज़ाइन सिस्टम