Compose में मटीरियल डिज़ाइन 3

Jetpack Compose में, Material Design 3 को लागू करने की सुविधा मिलती है. यह मटीरियल डिज़ाइन का नया वर्शन है. Material 3 में, थीम के लिए अपडेट किए गए विकल्प, कॉम्पोनेंट, और Material You की डाइनैमिक कलर जैसी सुविधाएं शामिल हैं. साथ ही, इसे Android 12 और उसके बाद के वर्शन पर, नए विज़ुअल स्टाइल और सिस्टम यूज़र इंटरफ़ेस के साथ काम करने के लिए डिज़ाइन किया गया है.

यहां हम Reply के सैंपल ऐप्लिकेशन का उदाहरण देकर, Material Design 3 को लागू करने का तरीका बता रहे हैं. जवाब का सैंपल, पूरी तरह से Material Design 3 पर आधारित है.

डिपेंडेंसी

Compose ऐप्लिकेशन में Material 3 का इस्तेमाल शुरू करने के लिए, अपनी build.gradle फ़ाइलों में Compose Material 3 डिपेंडेंसी जोड़ें:

implementation "androidx.compose.material3:material3:$material3_version"

डिपेंडेंसी जोड़ने के बाद, अपने ऐप्लिकेशन में मटीरियल डिज़ाइन सिस्टम जोड़े जा सकते हैं. इनमें रंग, टाइपोग्राफ़ी, और आकार शामिल हैं.

प्रयोग के लिए एपीआई

कुछ M3 API को एक्सपेरिमेंट के तौर पर माना जाता है. ऐसे मामलों में, आपको ExperimentalMaterial3Api ऐनोटेशन का इस्तेमाल करके, फ़ंक्शन या फ़ाइल लेवल पर ऑप्ट इन करना होगा:

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

मटीरियल थीमिंग

M3 थीम में ये सबसिस्टम शामिल होते हैं: रंग योजना, टाइपोग्राफ़ी, और आकार. इन वैल्यू को पसंद के मुताबिक बनाने पर, आपके बदलाव उन M3 कॉम्पोनेंट में अपने-आप दिखने लगते हैं जिनका इस्तेमाल आपने ऐप्लिकेशन बनाने के लिए किया है.

Jetpack Compose, M3 MaterialTheme composable के साथ इन कॉन्सेप्ट को लागू करता है:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}
Material3Snippets.kt

अपने ऐप्लिकेशन के कॉन्टेंट को थीम के हिसाब से बनाने के लिए, अपने ऐप्लिकेशन के हिसाब से कलर स्कीम, टाइपोग्राफ़ी, और आकार तय करें.

रंग संयोजन

कलर स्कीम का आधार, पांच मुख्य रंगों का सेट होता है. इनमें से हर रंग, 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)
// ..
// ..
Material3Snippets.kt

• 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
    )
}
Material3Snippets.kt

हल्के और गहरे रंग वाली थीम के साथ काम करने के लिए, 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
}
Material3Snippets.kt

रंग का इस्तेमाल

अपने ऐप्लिकेशन में Material थीम के रंगों को ऐक्सेस करने के लिए, MaterialTheme.colorScheme का इस्तेमाल करें:

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)
Material3Snippets.kt

हर कलर रोल का इस्तेमाल कई जगहों पर किया जा सकता है. यह कॉम्पोनेंट की स्थिति, प्रमुखता, और ज़ोर देने के आधार पर तय होता है.

• प्राइमरी, बेस कलर होता है. इसका इस्तेमाल मुख्य कॉम्पोनेंट के लिए किया जाता है. जैसे, प्रमुख बटन, ऐक्टिव स्टेटस, और बेहतर किए गए प्लैटफ़ॉर्म के टिनट.
• सेकंडरी की कलर का इस्तेमाल, यूज़र इंटरफ़ेस (यूआई) में कम अहमियत वाले कॉम्पोनेंट के लिए किया जाता है. जैसे, फ़िल्टर चिप. इससे कलर एक्सप्रेशन के अवसर बढ़ते हैं.
• तीसरे क्रम के मुख्य रंग का इस्तेमाल, कंट्रास्ट वाले एक्सेंट की भूमिकाएं तय करने के लिए किया जाता है. इनका इस्तेमाल, प्राइमरी और सेकंडरी रंगों को संतुलित करने या किसी एलिमेंट पर ज़्यादा ध्यान खींचने के लिए किया जा सकता है.

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,
    )
}
Material3Snippets.kt

यहां जवाब के नेविगेशन ड्रॉअर में देखा जा सकता है कि मुख्य और तीसरे दर्जे के कंटेनर के रंगों को कंट्रास्ट में कैसे इस्तेमाल किया जाता है, ताकि ज़्यादा ध्यान खींचा जा सके.

मुद्रण कला

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, Material 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
    ),
    // ..
)
// ..
Material3Snippets.kt

ऐसा हो सकता है कि आपके प्रॉडक्ट के लिए, 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
),
Material3Snippets.kt

Typography तय करने के बाद, उसे M3 MaterialTheme को पास करें:

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}
Material3Snippets.kt

टेक्स्ट स्टाइल का इस्तेमाल करना

MaterialTheme.typography का इस्तेमाल करके, M3 MaterialTheme कॉम्पोज़ेबल के लिए उपलब्ध टाइपोग्राफ़ी को वापस पाया जा सकता है:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)
Material3Snippets.kt

टाइपोग्राफ़ी लागू करने के लिए, 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)
)
Material3Snippets.kt

Shapes तय करने के बाद, उसे M3 MaterialTheme को पास किया जा सकता है:

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}
Material3Snippets.kt

आकार इस्तेमाल करना

MaterialTheme में मौजूद सभी कॉम्पोनेंट के लिए, शेप स्केल को पसंद के मुताबिक बनाया जा सकता है या फिर इसे हर कॉम्पोनेंट के हिसाब से बनाया जा सकता है.

डिफ़ॉल्ट वैल्यू के साथ मीडियम और बड़े साइज़ का आकार लागू करें:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}
Material3Snippets.kt

Compose में दो और आकार — RectangleShape और CircleShape — भी मौजूद हैं. आयताकार आकार में बॉर्डर रेडियस नहीं है और गोलाकार आकार में किनारों को पूरी तरह से घेरा गया है:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Material3Snippets.kt

यहां दिए गए उदाहरणों में, कुछ ऐसे कॉम्पोनेंट दिखाए गए हैं जिन पर डिफ़ॉल्ट शेप वैल्यू लागू की गई हैं:

आकार लागू करने के लिए, Material के दिशा-निर्देशों के बारे में ज़्यादा पढ़ें.

टेक्स्ट को हाइलाइट करना

M3 में, कलर के वैरिएशन और उसके ऑन-कलर कॉम्बिनेशन का इस्तेमाल करके, फ़ोकस दिया जाता है. M3 में, अपने यूज़र इंटरफ़ेस (यूआई) पर फ़ोकस करने के दो तरीके हैं:

• बड़े किए गए M3 कलर सिस्टम के, सर्फ़ेस पर, सर्फ़ेस के वैरिएंट के साथ-साथ सर्फ़ेस और बैकग्राउंड के रंगों का इस्तेमाल करना. उदाहरण के लिए, अलग-अलग लेवल पर फ़ोकस देने के लिए, surface का इस्तेमाल on-surface-variant के साथ और surface-variant का इस्तेमाल on-surface के साथ किया जा सकता है.

• टेक्स्ट के लिए अलग-अलग फ़ॉन्ट वेट का इस्तेमाल करना. ऊपर, आपने देखा कि अलग-अलग तरह से फ़ोकस करने के लिए, हमारे टाइप स्केल में पसंद के मुताबिक अहमियत दी जा सकती है.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)
Material3Snippets.kt

ऊंचाई

Material 3 में, मुख्य रूप से टोनल कलर ओवरले का इस्तेमाल करके ऊंचाई को दिखाया जाता है. यह कंटेनर और प्लैटफ़ॉर्म को एक-दूसरे से अलग करने का एक नया तरीका है. इसमें, टोन की ऊंचाई बढ़ाने के लिए, छाया के साथ-साथ ज़्यादा प्रमुख टोन का इस्तेमाल किया जाता है.

गहरे रंग वाली थीम में, एलिवेशन ओवरले को भी Material 3 में टोनल कलर ओवरले में बदल दिया गया है. ओवरले का रंग, प्राइमरी कलर स्लॉट से लिया जाता है.

ज़्यादातर M3 कॉम्पोनेंट के पीछे मौजूद बैकिंग कॉम्पोज़ेबल, M3 सर्फ़स में, टोन और शैडो एलिवेशन, दोनों के लिए सहायता शामिल है:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}
Material3Snippets.kt

मटीरियल कॉम्पोनेंट

मटीरियल डिज़ाइन में मटीरियल कॉम्पोनेंट का एक बेहतरीन सेट होता है. जैसे, बटन, चिप, कार्ड, नेविगेशन बार. ये कॉम्पोनेंट, पहले से ही मटीरियल थीम का पालन करते हैं. साथ ही, इनकी मदद से मटीरियल डिज़ाइन वाले खूबसूरत ऐप्लिकेशन बनाए जा सकते हैं. डिफ़ॉल्ट प्रॉपर्टी के साथ, कॉम्पोनेंट का इस्तेमाल तुरंत शुरू किया जा सकता है.

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}
Material3Snippets.kt

M3, एक ही कॉम्पोनेंट के कई वर्शन उपलब्ध कराता है, ताकि इन्हें ज़रूरत के हिसाब से अलग-अलग भूमिकाओं में इस्तेमाल किया जा सके.

• सबसे ज़्यादा अहमियत वाली कार्रवाई के लिए, बड़ा किया गया फ़्लोटिंग ऐक्शन बटन:

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}
Material3Snippets.kt

• ज़्यादा अहमियत वाली कार्रवाई के लिए, भरा हुआ बटन:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}
Material3Snippets.kt

• कम अहमियत वाली कार्रवाई के लिए टेक्स्ट बटन:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}
Material3Snippets.kt

मटीरियल बटन और अन्य कॉम्पोनेंट के बारे में ज़्यादा पढ़ा जा सकता है. Material 3 में कई तरह के कॉम्पोनेंट सुइट उपलब्ध हैं. जैसे, बटन, ऐप्लिकेशन बार, नेविगेशन कॉम्पोनेंट. ये खास तौर पर, अलग-अलग इस्तेमाल के उदाहरणों और स्क्रीन साइज़ के लिए डिज़ाइन किए गए हैं.

नेविगेशन कॉम्पोनेंट

Material में कई नेविगेशन कॉम्पोनेंट भी होते हैं. इनकी मदद से, अलग-अलग स्क्रीन साइज़ और स्थितियों के हिसाब से नेविगेशन लागू किया जा सकता है.

NavigationBar का इस्तेमाल कॉम्पैक्ट डिवाइसों के लिए तब किया जाता है, जब आपको पांच या उससे कम डिस्टिनेशन को टारगेट करना हो:

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

NavigationRail का इस्तेमाल, छोटे से लेकर मध्यम साइज़ के टैबलेट या फ़ोन के लिए, लैंडस्केप मोड में किया जाता है. इससे उपयोगकर्ताओं को बेहतर अनुभव मिलता है और उन डिवाइसों के लिए उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है.

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

डिफ़ॉल्ट थीम में, दोनों का इस्तेमाल करके जवाब दें, ताकि सभी डिवाइस साइज़ के लिए उपयोगकर्ता को बेहतर अनुभव दिया जा सके.

NavigationDrawer का इस्तेमाल, मीडियम से लेकर बड़े साइज़ के टैबलेट के लिए किया जाता है. इनमें ज़्यादा जानकारी दिखाने के लिए ज़रूरत के मुताबिक जगह होती है. NavigationRail के साथ PermanentNavigationDrawer या ModalNavigationDrawer, दोनों का इस्तेमाल किया जा सकता है.

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}
Material3Snippets.kt

नेविगेशन के विकल्पों से, उपयोगकर्ता अनुभव, काम करने के तरीके, और ऐप्लिकेशन को ऐक्सेस करने की सुविधा बेहतर होती है. ऐडैप्टिव कोडलैब बनाना में, 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
}
Material3Snippets.kt

Material 3 को पसंद के मुताबिक बनाने के बारे में ज़्यादा पढ़ें.

सिस्टम यूज़र इंटरफ़ेस (यूआई)

Material You के कुछ हिस्से, Android 12 और उसके बाद के वर्शन के नए विज़ुअल स्टाइल और सिस्टम यूज़र इंटरफ़ेस (यूआई) से मिलते-जुलते हैं. रिपल और स्क्रीन पर ऊपर से नीचे की ओर स्क्रोल करने की सुविधा में बदलाव किए गए हैं. इन बदलावों को लागू करने के लिए, आपको कुछ और करने की ज़रूरत नहीं है.

रिपल

अब रिपल, सतहों को रोशन करने के लिए, दबाए जाने पर हल्की चमक का इस्तेमाल करता है. Material Ripple बनाना, Android पर प्लैटफ़ॉर्म RippleDrawable का इस्तेमाल करता है. इसलिए, Android 12 और इसके बाद के वर्शन पर, सभी Material कॉम्पोनेंट के लिए स्पार्कल रिपल उपलब्ध है.

ओवरस्क्रोल

अब ओवरस्क्रोल, स्क्रोल किए जा रहे कंटेनर के किनारे पर स्ट्रेच इफ़ेक्ट का इस्तेमाल करता है. Compose Foundation 1.1.0 और इसके बाद के वर्शन में, स्क्रोलिंग कंटेनर कॉम्पोज़ेबल में, स्ट्रेच ओवरस्क्रोल डिफ़ॉल्ट रूप से चालू होता है. जैसे, LazyColumn, LazyRow, और LazyVerticalGrid. इस बात से कोई फ़र्क़ नहीं पड़ता कि एपीआई लेवल क्या है.

सुलभता

Material Components में पहले से मौजूद सुलभता मानकों को, सभी के लिए उपलब्ध प्रॉडक्ट डिज़ाइन करने के लिए डिज़ाइन किया गया है. अपने प्रॉडक्ट के ऐक्सेस की सुविधा को समझने से, सभी उपयोगकर्ताओं के लिए उसे इस्तेमाल करना आसान हो जाता है. इनमें वे लोग भी शामिल हैं जिन्हें कम दिखने, अंधे होने, सुनने में दिक्कत होने, समझने में दिक्कत होने, हाथ-पैरों में दिक्कत होने या किसी स्थिति में दिक्कत होने (जैसे, हाथ टूटना) की समस्या है.

रंग की सुविधा

डाइनैमिक कलर को इस तरह डिज़ाइन किया गया है कि यह कलर कंट्रास्ट के लिए, सुलभता से जुड़े स्टैंडर्ड को पूरा करता हो. टोनल पैलेट का सिस्टम, किसी भी कलर स्कीम को डिफ़ॉल्ट रूप से ऐक्सेस करने के लिए ज़रूरी है.

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
    )
) {
}
Material3Snippets.kt

टाइपोग्राफ़ी की सुलभता

M3 टाइप का स्केल, स्टैटिक टाइप के रैंप और वैल्यू को अपडेट करता है. इससे, साइज़ की कैटगरी का आसान, लेकिन डाइनैमिक फ़्रेमवर्क मिलता है. यह फ़्रेमवर्क सभी डिवाइसों पर काम करता है.

उदाहरण के लिए, M3 में, डिसप्ले स्माल को डिवाइस के कॉन्टेक्स्ट के आधार पर अलग-अलग वैल्यू असाइन की जा सकती हैं, जैसे कि फ़ोन या टैबलेट.

बड़ी स्क्रीन

Material, अडैप्टिव लेआउट और फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए दिशा-निर्देश देता है. इससे आपके ऐप्लिकेशन को ऐक्सेस करना आसान हो जाता है. साथ ही, बड़े डिवाइसों को इस्तेमाल करने वाले लोगों के लिए, डिवाइस को इस्तेमाल करने का अनुभव बेहतर हो जाता है.

Material में अलग-अलग तरह के नेविगेशन उपलब्ध होते हैं. इनकी मदद से, बड़े डिवाइसों पर उपयोगकर्ताओं को बेहतर अनुभव दिया जा सकता है.

Android के बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के दिशा-निर्देशों के बारे में ज़्यादा जानें. साथ ही, ऐप्लिकेशन को अलग-अलग डिवाइसों के हिसाब से ढालने और उसे ऐक्सेस करने लायक बनाने के लिए, जवाब का सैंपल देखें.

ज़्यादा जानें

Compose में मटीरियल थीम के बारे में ज़्यादा जानने के लिए, ये संसाधन देखें:

सैंपल ऐप्लिकेशन

• Reply M3 का सैंपल ऐप्लिकेशन

Docs

• Compose में, Material 2 से Material 3 पर माइग्रेट करना
• Material डिज़ाइन के दिशा-निर्देश

एपीआई का रेफ़रंस और सोर्स कोड

• Compose Material 3 API का रेफ़रंस
• सोर्स कोड में Material 3 के सैंपल बनाना

वीडियो

• Jetpack Compose में Material You

आपके लिए सुझाव

• ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
• Compose में, Material 2 से Material 3 पर माइग्रेट करना
• Compose में Material Design 2
• Compose में कस्टम डिज़ाइन सिस्टम