इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

Material Design 3 का इस्तेमाल करके बनाया गया, Reply का सैंपल ऐप्लिकेशन — **पहली इमेज**. Material Design 3 का इस्तेमाल करके बनाया गया Reply का सैंपल ऐप्लिकेशन

डिपेंडेंसी

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 कॉम्पोनेंट में अपने-आप दिखने लगते हैं जिनका इस्तेमाल आपने ऐप्लिकेशन बनाने के लिए किया है.

मटीरियल डिज़ाइन के सबसिस्टम: रंग, टाइपोग्राफ़ी, और आकार — **दूसरी इमेज**. Material Design के सबसिस्टम: रंग, टाइपोग्राफ़ी, और आकार

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

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

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

रंग संयोजन

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

ऐप्लिकेशन की लाइट कलर स्कीम के सैंपल का जवाब दें — **तीसरी इमेज**. Reply के सैंपल ऐप्लिकेशन की लाइट कलर स्कीम

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

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

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

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

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

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

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

प्राइमरी कंटेनर और टेक्स्ट फ़ील्ड, जिनमें on-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,
    )
}
Material3Snippets.kt

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

**छठी इमेज**. फ़्लोटिंग ऐक्शन बटन के लिए, तीसरे-कंटेनर और तीसरे-कंटेनर पर-कम्बिनेशन.

मुद्रण कला

Material Design 3 में टाइप स्केल तय किया गया है. इसमें Material Design 2 से ली गई टेक्स्ट स्टाइल भी शामिल हैं. नाम और ग्रुपिंग को आसान बनाया गया है: डिसप्ले, हेडलाइन, टाइटल, बॉडी, और लेबल. इनमें से हर एक के लिए बड़े, मीडियम, और छोटे साइज़ उपलब्ध हैं.

Material Design 3 के लिए टाइपोग्राफ़ी का डिफ़ॉल्ट स्केल — **सातवीं इमेज**. Material Design 3 के लिए डिफ़ॉल्ट टाइपोग्राफ़ी स्केल

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

अलग-अलग टाइपोग्राफ़ी के इस्तेमाल के लिए, मुख्य हिस्सा बड़ा, मुख्य हिस्सा मीडियम, और लेबल मीडियम. — **आठवीं इमेज**. अलग-अलग टाइपोग्राफ़ी के इस्तेमाल के लिए, बॉडी बड़ा, बॉडी मीडियम, और लेबल मीडियम.

आपके प्रॉडक्ट को मटीरियल डिज़ाइन टाइप स्केल से लिए गए सभी 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 3 के सभी कॉम्पोनेंट के लिए, डिफ़ॉल्ट शेप की वैल्यू. — **10वीं इमेज**. सभी मटीरियल 3 कॉम्पोनेंट के लिए आकार की डिफ़ॉल्ट वैल्यू.

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

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

M3 में अलग-अलग रंगों और इसके रंगों के मेल से बनाया गया है. M3 में, अपने यूज़र इंटरफ़ेस (यूआई) पर फ़ोकस करने के दो तरीके हैं:

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

**11वीं इमेज**. हाइलाइट करने के लिए, न्यूट्रल रंगों के कॉम्बिनेशन का इस्तेमाल करना.

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

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

ऊंचाई

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

शैडो एलिवेशन के साथ टोन एलिवेशन — **12वीं इमेज**. शैडो एलिवेशनE के साथ टोनल एलिवेशन

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

**13वीं इमेज**. Material Design 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

BottomNavigationBar(बाईं ओर) और NavigationRail(दाईं ओर) के जवाब दिखाने की सुविधा — **15वीं इमेज**. `BottomNavigationBar` (बाईं ओर) और `NavigationRail` (दाईं ओर) का जवाब दिखाने वाला शोकेस

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

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

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

Reply के स्थायी नेविगेशन ड्रॉअर की झलक — **16वीं इमेज**. स्थायी नेविगेशन पैनल के शोकेस का जवाब दें

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

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

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 कॉम्पोनेंट के लिए स्पार्कल रिपल उपलब्ध है.

ओवरस्क्रोल

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

सुलभता

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

कलर सुलभता

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

Material का कलर सिस्टम, स्टैंडर्ड टोन वैल्यू और मेज़रमेंट उपलब्ध कराता है. इनका इस्तेमाल, सुलभ कंट्रास्ट रेशियो को पूरा करने के लिए किया जा सकता है.

Reply के सैंपल ऐप्लिकेशन में प्राइमरी, सेकंडरी, और टर्टियरी टोन पैलेट (ऊपर से नीचे) — **19वीं इमेज**. Reply के सैंपल ऐप्लिकेशन में, प्राइमरी, सेकंडरी, और टर्टियरी टोन वाले पैलेट (ऊपर से नीचे)

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

प्राइमरी के ऊपर 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

**20वीं इमेज**. ज़रूरत के मुताबिक कंट्रास्ट (बाईं ओर) बनाम खराब कंट्रास्ट (दाईं ओर)

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

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

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

बड़ी स्क्रीन

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

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

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

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

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

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

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

Docs

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

वीडियो

Jetpack Compose में Material You

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

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