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

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 के कुछ एपीआई को एक्सपेरिमेंट के तौर पर शुरू किया गया माना जाता है. ऐसे मामलों में आपको 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 बिल्डर टूल की मदद से, ऐसा किया जा सकता है. साथ ही, 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

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

आप इनके ज़रिए अपने ऐप्लिकेशन में मटीरियल थीम के रंग ऐक्सेस कर सकते हैं MaterialTheme.colorScheme:

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

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

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

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

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

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

मुद्रण कला

मटीरियल डिज़ाइन 3, टाइप स्केल के बारे में बताता है. इसमें टेक्स्ट स्टाइल भी शामिल हैं जिन्हें मटीरियल डिज़ाइन 2 से अपनाया गया है. नाम और ग्रुप बनाए गए हैं इससे आसान बनाया जा सकता है: बड़े, मीडियम, डिसप्ले, हेडलाइन, टाइटल, मुख्य हिस्से, और लेबल और हर साइज़ के लिए, छोटे साइज़ में ही विज्ञापन दिखाए जा सकते हैं.

टाइपोग्राफ़ी तय करना

Compose, M3 Typography क्लास के साथ-साथ मौजूदा क्लास का डेटा भी उपलब्ध कराता है TextStyle और फ़ॉन्ट से जुड़ी क्लास — मटीरियल 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
    ),
    // ..
)
// ..
Material3Snippets.kt

आपके प्रॉडक्ट को मटीरियल डिज़ाइन के लिए इस्तेमाल की जाने वाली सभी 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

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

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

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

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

कॉन्टेंट से जुड़े दिशा-निर्देशों के बारे में ज़्यादा जानने के लिए, लागू करें आकार.

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

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

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

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

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

ऊंचाई

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

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

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

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

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

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

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

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

कॉम्पोनेंट की थीम को पसंद के मुताबिक बनाना

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

कार्ड और बटन जैसे ज़्यादातर कॉम्पोनेंट, एक डिफ़ॉल्ट ऑब्जेक्ट के तौर पर रंग दिखाते हैं और एलिवेशन इंटरफ़ेस, जिनमें आपके कॉम्पोनेंट को पसंद के मुताबिक बनाने के लिए बदलाव किए जा सकते हैं:

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 और उसके बाद के वर्शन के नए विज़ुअल स्टाइल और सिस्टम यूज़र इंटरफ़ेस (यूआई) से मिलते-जुलते हैं. दो मुख्य क्षेत्र जहां बदलाव होते हैं रिपल और ओवरस्क्रोल होगा. इन बदलावों को लागू करने के लिए आपको अलग से कुछ नहीं करना होगा.

रिपल

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

ओवरस्क्रोल

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

सुलभता

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

कलर सुलभता

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

सामग्री का रंग सिस्टम मानक टोन मान और माप देता है जो कंट्रास्ट रेशियो को आसानी से पूरा करने के लिए उसका इस्तेमाल किया जा सकता है.

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

प्राइमरी के ऊपर 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 में, डिसप्ले स्माल को डिवाइस के कॉन्टेक्स्ट के आधार पर अलग-अलग वैल्यू असाइन की जा सकती हैं, जैसे कि फ़ोन या टैबलेट.

बड़ी स्क्रीन

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

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

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

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

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

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

• जवाब देने के लिए M3 का सैंपल ऐप्लिकेशन

Docs

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

एपीआई का संदर्भ और सोर्स कोड

• Compose Material 3 API का रेफ़रंस
• सोर्स कोड में मटीरियल 3 के सैंपल लिखना

वीडियो

• Jetpack Compose में मौजूद मटीरियल