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

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

नीचे, हमने मटीरियल डिज़ाइन 3 को लागू करने का तरीका बताया है उदाहरण के तौर पर, सैंपल ऐप्लिकेशन के जवाब दें का इस्तेमाल करें. जवाब का नमूना है जो पूरी तरह से मटीरियल डिज़ाइन 3 पर आधारित है.

निर्भर है

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

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

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

एक्सपेरिमेंटल एपीआई

M3 के कुछ एपीआई को एक्सपेरिमेंट के तौर पर शुरू किया गया माना जाता है. ऐसे मामलों में आपको ExperimentalMaterial3Api एनोटेशन का इस्तेमाल करके:

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

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

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

Jetpack Compose इन सिद्धांतों को M3 MaterialTheme के साथ लागू करता है कंपोज़ेबल:

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

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

रंग संयोजन

कलर स्कीम का आधार, पांच मुख्य रंगों का सेट होता है. इनमें से सभी रंग 13 टोन के टोनल पटल से जुड़े होते हैं, जिनका इस्तेमाल मटीरियल 3 करता है कॉम्पोनेंट. उदाहरण के लिए, यह जवाब दें:

कलर स्कीम और कलर भूमिकाओं के बारे में ज़्यादा पढ़ें.

कलर स्कीम जनरेट करें

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

• 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 से अपनाया गया है. नाम और ग्रुप बनाए गए हैं इससे आसान बनाया जा सकता है: बड़े, मीडियम, डिसप्ले, हेडलाइन, टाइटल, मुख्य हिस्से, और लेबल और हर साइज़ के लिए, छोटे साइज़ में ही विज्ञापन दिखाए जा सकते हैं.

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 और फ़ॉन्ट से जुड़ी क्लास — मटीरियल 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

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

शेप्स

मटीरियल सरफ़ेस अलग-अलग आकार में दिखाए जा सकते हैं. लोगों का सीधे तौर पर ध्यान खींचने के लिए, कॉम्पोनेंट, उनकी स्थिति बताना, और ब्रैंड के बारे में बताना.

आकार का स्केल कंटेनर के कोनों की स्टाइल तय करता है, जिसमें वर्ग से पूरी तरह गोल में बदल जाता है.

आकार परिभाषित करें

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

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 Surface — ज़्यादातर 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 में कई तरह के कॉम्पोनेंट सुइट उपलब्ध हैं, जैसे कि बटन, ऐप्लिकेशन बार, नेविगेशन कॉम्पोनेंट, जिन्हें अलग-अलग कामों के लिए खास तौर पर डिज़ाइन किया गया है केस और स्क्रीन साइज़.

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

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

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 का इस्तेमाल मीडियम से बड़े साइज़ की टैबलेट के लिए किया जाता है जानकारी दिखाने के लिए ज़रूरी जगह. PermanentNavigationDrawer या दोनों का इस्तेमाल किया जा सकता है NavigationRail के साथ 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 को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानें.

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

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

रिपल

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

ओवरस्क्रोल

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

सुलभता

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

कलर सुलभता

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

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

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

प्राइमरी के ऊपर ऑन-प्राइमरी और ऊपर ऑन-प्राइमरी-कंटेनर का इस्तेमाल करें प्राइमरी-कंटेनर के साथ-साथ दूसरे ऐक्सेंट और न्यूट्रल कलर के लिए भी यही तरीका इस्तेमाल किया जाता है. उपयोगकर्ता के लिए ऐक्सेस किया जा सकने वाला कंट्रास्ट हो.

प्राइमरी के ऊपर तीसरे कंटेनर का इस्तेमाल करने से उपयोगकर्ता को खराब परफ़ॉर्मेंस कंट्रास्ट बटन:

// ✅ 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 पर माइग्रेट करना
• मटीरियल डिज़ाइन से जुड़े दिशा-निर्देश

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

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

वीडियो

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

{% endverba नया %}

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

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

{% verbatim %}