Compose में मटीरियल 2 से मटीरियल 3 पर माइग्रेट करना

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

इस गाइड में, Compose Material (androidx.compose.material) Jetpack लाइब्रेरी से Compose Material 3 (androidx.compose.material3) Jetpack लाइब्रेरी पर माइग्रेट करने के बारे में बताया गया है.

ध्यान दें: इस गाइड में, "M3" के तौर पर छोटा नाम इस्तेमाल किया गया है. यह नाम, इन शब्दों के लिए इस्तेमाल किया जा सकता है: "Material 3", "Material Design 3", "Material You", और Compose Material 3 (androidx.compose.material3) Jetpack लाइब्रेरी. "M2" के छोटे रूप का इस्तेमाल, "Material 2", "Material Design 2", और Compose Material (androidx.compose.material) Jetpack लाइब्रेरी के लिए किया जाता है. इन शब्दों का इस्तेमाल एक-दूसरे के लिए किया जा सकता है.

तरीके

आम तौर पर, आपको किसी एक ऐप्लिकेशन में लंबे समय तक M2 और M3, दोनों का इस्तेमाल नहीं करना चाहिए. ऐसा इसलिए है, क्योंकि दोनों डिज़ाइन सिस्टम और उनकी लाइब्रेरी, यूज़र एक्सपीरियंस (UX)/यूज़र इंटरफ़ेस (यूआई) डिज़ाइन और Compose लागू करने के तरीके के मामले में काफ़ी अलग-अलग हैं.

आपका ऐप्लिकेशन किसी डिज़ाइन सिस्टम का इस्तेमाल कर सकता है. जैसे, Figma का इस्तेमाल करके बनाया गया सिस्टम. ऐसे मामलों में, हमारा सुझाव है कि आप या आपका डिज़ाइन टीम, Compose माइग्रेशन शुरू करने से पहले, इसे M2 से M3 पर माइग्रेट कर लें. अगर किसी ऐप्लिकेशन का यूज़र एक्सपीरियंस (UX)/यूज़र इंटरफ़ेस (यूआई) डिज़ाइन, M2 पर आधारित है, तो उसे M3 पर माइग्रेट करने का कोई मतलब नहीं है.

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

ध्यान दें: अगर किसी मौजूदा ऐप्लिकेशन को M2 से M3 पर माइग्रेट करने के बजाय, नया ऐप्लिकेशन शुरू किया जा रहा है, तो हमारा सुझाव है कि शुरुआत से ही M3 का इस्तेमाल करें.

माइग्रेट करने का समय

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

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

भले ही, आप पर ऊपर बताई गई स्थितियों का असर पड़ा हो, लेकिन ऐप्लिकेशन के अपडेट को रिलीज़ करने से पहले, आपको माइग्रेशन के लिए धीरे-धीरे आगे बढ़ना चाहिए. ऐसे मामलों में, आपको M2 और M3 का एक साथ इस्तेमाल करना होगा. साथ ही, M3 पर माइग्रेट करते समय, M2 को धीरे-धीरे बंद करना होगा.

चरणों में किया जाने वाला तरीका

धीरे-धीरे माइग्रेट करने का सामान्य तरीका यहां बताया गया है:

1. M2 डिपेंडेंसी के साथ-साथ M3 डिपेंडेंसी जोड़ें.
2. अपने ऐप्लिकेशन की थीम के M2 वर्शन के साथ-साथ, M3 वर्शन भी जोड़ें.
3. अपने ऐप्लिकेशन के साइज़ और जटिलता के आधार पर, अलग-अलग मॉड्यूल, स्क्रीन या कॉम्पोज़ेबल को M3 पर माइग्रेट करें. ज़्यादा जानकारी के लिए, नीचे दिए गए सेक्शन देखें.
4. पूरी तरह से माइग्रेट होने के बाद, अपने ऐप्लिकेशन की थीम के M2 वर्शन हटा दें.
5. M2 डिपेंडेंसी हटाएं.

डिपेंडेंसी

M3 का पैकेज और वर्शन, M2 से अलग होता है:

M2

implementation "androidx.compose.material:material:$m2-version"

M3

implementation "androidx.compose.material3:material3:$m3-version"

Compose Material 3 रिलीज़ पेज पर, M3 के नए वर्शन देखें.

मुख्य M2 और M3 लाइब्रेरी के बाहर मौजूद अन्य मटीरियल डिपेंडेंसी में कोई बदलाव नहीं हुआ है. वे M2 और M3 पैकेज और वर्शन का इस्तेमाल करते हैं, लेकिन इससे माइग्रेशन पर कोई असर नहीं पड़ता. M3 के साथ, इनका इस्तेमाल बिना किसी बदलाव के किया जा सकता है:

लाइब्रेरी	पैकेज और वर्शन
Material आइकॉन बनाना	androidx.compose.material:material-icons-*:$m2-version
कॉम्पोज़ मटीरियल रिपल	androidx.compose.material:material-ripple:$m2-version

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

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

import androidx.compose.material3.ExperimentalMaterial3Api

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

थीम बनाई जा रही है

M2 और M3, दोनों में थीम कंपोजबल का नाम MaterialTheme है, लेकिन इंपोर्ट किए गए पैकेज और पैरामीटर अलग-अलग हैं:

M2

import androidx.compose.material.MaterialTheme

MaterialTheme(
    colors = AppColors,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M2 content
}

M3

import androidx.compose.material3.MaterialTheme

MaterialTheme(
    colorScheme = AppColorScheme,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M3 content
}

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

रंग

पहली इमेज. M2 कलर सिस्टम (बाईं ओर) बनाम M3 कलर सिस्टम (दाईं ओर).

M3 में रंग का सिस्टम, M2 से काफ़ी अलग है. कलर पैरामीटर की संख्या बढ़ गई है. साथ ही, उनके नाम अलग-अलग हैं और वे M3 कॉम्पोनेंट के साथ अलग तरीके से मैप होते हैं. Compose में, यह M2 Colors क्लास, M3 ColorScheme क्लास, और उनसे जुड़े फ़ंक्शन पर लागू होता है:

M2

import androidx.compose.material.lightColors
import androidx.compose.material.darkColors

val AppLightColors = lightColors(
    // M2 light Color parameters
)
val AppDarkColors = darkColors(
    // M2 dark Color parameters
)
val AppColors = if (darkTheme) {
    AppDarkColors
} else {
    AppLightColors
}

M3

import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme

val AppLightColorScheme = lightColorScheme(
    // M3 light Color parameters
)
val AppDarkColorScheme = darkColorScheme(
    // M3 dark Color parameters
)
val AppColorScheme = if (darkTheme) {
    AppDarkColorScheme
} else {
    AppLightColorScheme
}

M2 और M3 कलर सिस्टम के बीच काफ़ी अंतर है. इसलिए, Color पैरामीटर के लिए कोई सही मैपिंग नहीं है. इसके बजाय, M3 कलर स्कीम जनरेट करने के लिए, Material थीम बिल्डर टूल का इस्तेमाल करें. टूल में M2 रंगों को कोर सोर्स रंगों के तौर पर इस्तेमाल करें. टूल, इन रंगों को टोनल पैलेट में बड़ा करता है, जिनका इस्तेमाल M3 कलर स्कीम में किया जाता है. शुरुआत के लिए, यहां दी गई मैपिंग का सुझाव दिया जाता है:

M2	Material Theme Builder
primary	मुख्य
primaryVariant	Secondary
secondary	Tertiary
surface या background	ठीक-ठाक

ध्यान दें: M2 और M3 के कुछ रंगों के नाम एक जैसे होते हैं, जैसे कि प्राइमरी और सेकंडरी. हालांकि, हो सकता है कि उनके हेक्स कोड की वैल्यू एक जैसी न हों. ऐसा इसलिए होता है, क्योंकि Material Theme Builder, M2 कलर से टोनल पैलेट जनरेट करने के लिए एल्गोरिदम का इस्तेमाल करता है. टूल, M3 कलर स्कीम में इनका इस्तेमाल करते हैं.

दूसरी इमेज. Jetchat के M2 कलर, जिन्हें M3 कलर स्कीम जनरेट करने के लिए, Material Theme Builder में इस्तेमाल किया गया है.

इस टूल से, हल्की और गहरी थीम के लिए कलर हेक्स कोड की वैल्यू कॉपी की जा सकती हैं और उनका इस्तेमाल करके, M3 ColorScheme इंस्टेंस लागू किया जा सकता है. इसके अलावा, Material Theme Builder की मदद से Compose कोड को एक्सपोर्ट किया जा सकता है.

isLight

M2 Colors क्लास के उलट, M3 ColorScheme क्लास में isLight पैरामीटर शामिल नहीं होता. आम तौर पर, आपको थीम लेवल पर इस जानकारी की ज़रूरत होती है. उदाहरण के लिए:

M2

import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
import androidx.compose.material.MaterialTheme

@Composable
private fun AppTheme(
  darkTheme: Boolean = isSystemInDarkTheme(),
  content: @Composable () -> Unit
) {
  val colors = if (darkTheme) darkColors(…) else lightColors(…)
  MaterialTheme(
      colors = colors,
      content = content
  )
}

@Composable
fun AppComposable() {
    AppTheme {
        val cardElevation = if (MaterialTheme.colors.isLight) 0.dp else 4.dp
        …
    }
}

M3

import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme

val LocalCardElevation = staticCompositionLocalOf { Dp.Unspecified }
@Composable
private fun AppTheme(
   darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
   val cardElevation = if (darkTheme) 4.dp else 0.dp
    CompositionLocalProvider(LocalCardElevation provides cardElevation) {
        val colorScheme = if (darkTheme) darkColorScheme(…) else lightColorScheme(…)
        MaterialTheme(
            colorScheme = colorScheme,
            content = content
        )
    }
}

@Composable
fun AppComposable() {
    AppTheme {
        val cardElevation = LocalCardElevation.current
        …
    }
}

ज़्यादा जानकारी के लिए, Compose में कस्टम डिज़ाइन सिस्टम बनाने के बारे में गाइड देखें.

डाइनैमिक कलर

M3 में डाइनैमिक कलर की नई सुविधा है. M3 ColorScheme, पसंद के मुताबिक रंगों के बजाय, Android 12 और इसके बाद के वर्शन पर डिवाइस के वॉलपेपर के रंगों का इस्तेमाल कर सकता है. इसके लिए, इन फ़ंक्शन का इस्तेमाल किया जा सकता है:

• dynamicLightColorScheme
• dynamicDarkColorScheme

ध्यान दें: डाइनैमिक कलर स्कीम का इस्तेमाल करने पर भी, आपको हमेशा एक पसंद के मुताबिक कलर स्कीम की ज़रूरत होती है. ऐसा इसलिए, क्योंकि Android 12 और उसके बाद के वर्शन में इसकी पाबंदी है. उदाहरण के लिए, Jetchat देखें.

मुद्रण कला

तीसरी इमेज. M3 टाइपोग्राफ़ी सिस्टम (बाईं ओर) बनाम M2 टाइपोग्राफ़ी सिस्टम (दाईं ओर)

M3 में टाइपोग्राफ़ी सिस्टम, M2 से अलग है. टाइपोग्राफ़ी पैरामीटर की संख्या लगभग एक जैसी है, लेकिन उनके नाम अलग-अलग हैं और वे M3 कॉम्पोनेंट के साथ अलग तरह से मैप होते हैं. Compose में, यह M2 Typography क्लास और M3 Typography क्लास पर लागू होता है:

M2

import androidx.compose.material.Typography

val AppTypography = Typography(
    // M2 TextStyle parameters
)

M3

import androidx.compose.material3.Typography

val AppTypography = Typography(
    // M3 TextStyle parameters
)

शुरुआत के लिए, इन TextStyle पैरामीटर मैपिंग का सुझाव दिया जाता है:

M2	M3
h1	displayLarge
h2	displayMedium
h3	displaySmall
लागू नहीं	headlineLarge
h4	headlineMedium
h5	headlineSmall
h6	titleLarge
subtitle1	titleMedium
subtitle2	titleSmall
body1	bodyLarge
body2	bodyMedium
caption	bodySmall
button	labelLarge
लागू नहीं	labelMedium
overline	labelSmall

ध्यान दें: फ़िलहाल, M3 Typography क्लास में defaultFontFamily पैरामीटर शामिल नहीं है. यह पैरामीटर, M2 Typography क्लास में शामिल होता है. इसके बजाय, आपको हर TextStyles में fontFamily पैरामीटर का इस्तेमाल करना होगा.

आकार

चौथी इमेज. M2 शेप सिस्टम (बाईं ओर) बनाम M3 शेप सिस्टम (दाईं ओर)

M3 में आकार का सिस्टम, M2 से अलग है. शेप पैरामीटर की संख्या बढ़ गई है. साथ ही, इनका नाम अलग है और ये M3 कॉम्पोनेंट के साथ अलग तरीके से मैप होते हैं. Compose में, यह M2 Shapes क्लास और M3 Shapes क्लास पर लागू होता है:

M2

import androidx.compose.material.Shapes

val AppShapes = Shapes(
    // M2 Shape parameters
)

M3

import androidx.compose.material3.Shapes

val AppShapes = Shapes(
    // M3 Shape parameters
)

शुरुआत के लिए, इन Shape पैरामीटर मैपिंग का सुझाव दिया जाता है:

M2	M3
लागू नहीं	extraSmall
small	small
medium	medium
large	large
लागू नहीं	extraLarge

ध्यान दें: M3 शेप सिस्टम में none और full स्टाइल भी तय किए जाते हैं. ये स्टाइल एक जैसे होते हैं और Shapes क्लास का हिस्सा नहीं होते. इनके लिए, RectangleShape और CircleShape का इस्तेमाल करें.

कॉम्पोनेंट और लेआउट

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

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

कुछ कॉम्पोनेंट के लिए खास बातों का ध्यान रखना ज़रूरी है. हालांकि, शुरुआत के लिए इन फ़ंक्शन मैपिंग का सुझाव दिया जाता है:

एपीआई मौजूद नहीं हैं:

M2	M3
androidx.compose.material.swipeable	फ़िलहाल उपलब्ध नहीं है

बदले गए एपीआई:

M2	M3
androidx.compose.material.BackdropScaffold	M3 के बराबर कोई वैल्यू नहीं है. इसके बजाय, Scaffold या BottomSheetScaffold पर माइग्रेट करें
androidx.compose.material.BottomDrawer	M3 के बराबर कोई वैल्यू नहीं है. इसके बजाय, ModalBottomSheet पर माइग्रेट करें

नाम बदले गए एपीआई:

M2	M3
androidx.compose.material.BottomNavigation	androidx.compose.material3.NavigationBar
androidx.compose.material.BottomNavigationItem	androidx.compose.material3.NavigationBarItem
androidx.compose.material.Chip	androidx.compose.material3.AssistChip या androidx.compose.material3.SuggestionChip
androidx.compose.material.ModalBottomSheetLayout	androidx.compose.material3.ModalBottomSheet
androidx.compose.material.ModalDrawer	androidx.compose.material3.ModalNavigationDrawer

अन्य सभी एपीआई:

M2	M3
androidx.compose.material.AlertDialog	androidx.compose.material3.AlertDialog
androidx.compose.material.Badge	androidx.compose.material3.Badge
androidx.compose.material.BadgedBox	androidx.compose.material3.BadgedBox
androidx.compose.material.BottomAppBar	androidx.compose.material3.BottomAppBar
androidx.compose.material.BottomSheetScaffold	androidx.compose.material3.BottomSheetScaffold
androidx.compose.material.Button	androidx.compose.material3.Button
androidx.compose.material.Card	androidx.compose.material3.Card
androidx.compose.material.Checkbox	androidx.compose.material3.Checkbox
androidx.compose.material.CircularProgressIndicator	androidx.compose.material3.CircularProgressIndicator
androidx.compose.material.Divider	androidx.compose.material3.Divider
androidx.compose.material.DropdownMenu	androidx.compose.material3.DropdownMenu
androidx.compose.material.DropdownMenuItem	androidx.compose.material3.DropdownMenuItem
androidx.compose.material.ExposedDropdownMenuBox	androidx.compose.material3.ExposedDropdownMenuBox
androidx.compose.material.ExtendedFloatingActionButton	androidx.compose.material3.ExtendedFloatingActionButton
androidx.compose.material.FilterChip	androidx.compose.material3.FilterChip
androidx.compose.material.FloatingActionButton	androidx.compose.material3.FloatingActionButton
androidx.compose.material.Icon	androidx.compose.material3.Icon
androidx.compose.material.IconButton	androidx.compose.material3.IconButton
androidx.compose.material.IconToggleButton	androidx.compose.material3.IconToggleButton
androidx.compose.material.LeadingIconTab	androidx.compose.material3.LeadingIconTab
androidx.compose.material.LinearProgressIndicator	androidx.compose.material3.LinearProgressIndicator
androidx.compose.material.ListItem	androidx.compose.material3.ListItem
androidx.compose.material.NavigationRail	androidx.compose.material3.NavigationRail
androidx.compose.material.NavigationRailItem	androidx.compose.material3.NavigationRailItem
androidx.compose.material.OutlinedButton	androidx.compose.material3.OutlinedButton
androidx.compose.material.OutlinedTextField	androidx.compose.material3.OutlinedTextField
androidx.compose.material.RadioButton	androidx.compose.material3.RadioButton
androidx.compose.material.RangeSlider	androidx.compose.material3.RangeSlider
androidx.compose.material.Scaffold	androidx.compose.material3.Scaffold
androidx.compose.material.ScrollableTabRow	androidx.compose.material3.ScrollableTabRow
androidx.compose.material.Slider	androidx.compose.material3.Slider
androidx.compose.material.Snackbar	androidx.compose.material3.Snackbar
androidx.compose.material.Switch	androidx.compose.material3.Switch
androidx.compose.material.Tab	androidx.compose.material3.Tab
androidx.compose.material.TabRow	androidx.compose.material3.TabRow
androidx.compose.material.Text	androidx.compose.material3.Text
androidx.compose.material.TextButton	androidx.compose.material3.TextButton
androidx.compose.material.TextField	androidx.compose.material3.TextField
androidx.compose.material.TopAppBar	androidx.compose.material3.TopAppBar
androidx.compose.material.TriStateCheckbox	androidx.compose.material3.TriStateCheckbox

Compose Material 3 API के रेफ़रंस की खास जानकारी में जाकर, M3 के नए कॉम्पोनेंट और लेआउट देखें. साथ ही, नए और अपडेट किए गए एपीआई के लिए, रिलीज़ पेज पर नज़र रखें.

स्कैफ़ोल्ड, स्नैकबार, और नेविगेशन पैनल

पांचवीं इमेज. स्नैकबार और नेविगेशन पैनल के साथ M2 स्काफ़ोल्ड (बाईं ओर) बनाम स्नैकबार और नेविगेशन पैनल के साथ M3 स्काफ़ोल्ड (दाईं ओर).

M3 में स्कैफ़ोल्ड, M2 से अलग है. M2 और M3, दोनों में मुख्य लेआउट कॉम्पोज़ेबल का नाम Scaffold है. हालांकि, इंपोर्ट पैकेज और पैरामीटर अलग-अलग हैं:

M2

import androidx.compose.material.Scaffold

Scaffold(
    // M2 scaffold parameters
)

M3

import androidx.compose.material3.Scaffold

Scaffold(
    // M3 scaffold parameters
)

M2 Scaffold में मौजूद backgroundColor पैरामीटर का नाम अब M3 Scaffold में containerColor हो गया है:

M2

import androidx.compose.material.Scaffold

Scaffold(
    backgroundColor = …,
    content = { … }
)

M3

import androidx.compose.material3.Scaffold

Scaffold(
    containerColor = …,
    content = { … }
)

M2 ScaffoldState क्लास अब M3 में मौजूद नहीं है, क्योंकि इसमें एक ऐसा drawerState पैरामीटर है जिसकी अब ज़रूरत नहीं है. M3 Scaffold के साथ स्नैकबार दिखाने के लिए, इसके बजाय SnackbarHostState का इस्तेमाल करें:

M2

import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    content = {
        …
        scope.launch {
            scaffoldState.snackbarHostState.showSnackbar(…)
        }
    }
)

M3

import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    content = {
        …
        scope.launch {
            snackbarHostState.showSnackbar(…)
        }
    }
)

ध्यान दें: M2 में मौजूद SnackbarData क्लास को M3 में, SnackbarData और SnackbarVisuals में बांटा गया है.

M2 Scaffold के सभी drawer* पैरामीटर, M3 Scaffold से हटा दिए गए हैं. इनमें drawerShape और drawerContent जैसे पैरामीटर शामिल हैं. M3 Scaffold के साथ ड्रॉअर दिखाने के लिए, नेविगेशन ड्रॉअर वाले कॉम्पोज़ेबल का इस्तेमाल करें. जैसे, ModalNavigationDrawer:

M2

import androidx.compose.material.DrawerValue
import
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState

val scaffoldState = rememberScaffoldState(
    drawerState = rememberDrawerState(DrawerValue.Closed)
)
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { … },
    drawerGesturesEnabled = …,
    drawerShape = …,
    drawerElevation = …,
    drawerBackgroundColor = …,
    drawerContentColor = …,
    drawerScrimColor = …,
    content = {
        …
        scope.launch {
            scaffoldState.drawerState.open()
        }
    }
)

M3

import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet(
            drawerShape = …,
            drawerTonalElevation = …,
            drawerContainerColor = …,
            drawerContentColor = …,
            content = { … }
        )
    },
    gesturesEnabled = …,
    scrimColor = …,
    content = {
        Scaffold(
            content = {
                …
                scope.launch {
                    drawerState.open()
                }
            }
        )
    }
)

टॉप ऐप्लिकेशन बार

छठी इमेज. सबसे ऊपर ऐप्लिकेशन बार और स्क्रोल की गई सूची वाला M2 स्कैफ़ोल्ड (बाईं ओर) बनाम सबसे ऊपर ऐप्लिकेशन बार और स्क्रोल की गई सूची वाला M3 स्कैफ़ोल्ड (दाईं ओर)

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

M2

import androidx.compose.material.TopAppBar

TopAppBar(…)

M3

import androidx.compose.material3.TopAppBar

TopAppBar(…)

अगर पहले M2 TopAppBar में कॉन्टेंट को बीच में रखा जाता था, तो अब M3 CenterAlignedTopAppBar का इस्तेमाल करें. MediumTopAppBar और LargeTopAppBar के बारे में भी जानना अच्छा होता है.

M3 के सबसे ऊपर मौजूद ऐप्लिकेशन बार में एक नया scrollBehavior पैरामीटर होता है. इसकी मदद से, TopAppBarScrollBehavior क्लास को स्क्रोल करने पर अलग-अलग फ़ंक्शन मिलते हैं. जैसे, एलिवेशन बदलना. यह सुविधा, Modifer.nestedScroll की मदद से स्क्रोल किए जा रहे कॉन्टेंट के साथ काम करती है. M2 TopAppBar में, elevation पैरामीटर को मैन्युअल तरीके से बदलकर ऐसा किया जा सकता था:

M2

import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.TopAppBar

val state = rememberLazyListState()
val isAtTop by remember {
    derivedStateOf {
        state.firstVisibleItemIndex == 0 && state.firstVisibleItemScrollOffset == 0
    }
}

Scaffold(
    topBar = {
        TopAppBar(
            elevation = if (isAtTop) {
                0.dp
            } else {
                AppBarDefaults.TopAppBarElevation
            },
            …
        )
    },
    content = {
        LazyColumn(state = state) { … }
    }
)

M3

import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            scrollBehavior = scrollBehavior,
            …
        )
    },
    content = {
        LazyColumn { … }
    }
)

बॉटम नेविगेशन / नेविगेशन बार

सातवीं इमेज. M2 का सबसे नीचे मौजूद नेविगेशन (बाईं ओर) बनाम M3 का नेविगेशन बार (दाईं ओर).

M2 में बॉटम नेविगेशन को M3 में नेविगेशन बार नाम दिया गया है. M2 में BottomNavigation और BottomNavigationItem कॉम्पोज़ेबल हैं, जबकि M3 में NavigationBar और NavigationBarItem कॉम्पोज़ेबल हैं:

M2

import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem

BottomNavigation {
    BottomNavigationItem(…)
    BottomNavigationItem(…)
    BottomNavigationItem(…)
}

M3

import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem

NavigationBar {
    NavigationBarItem(…)
    NavigationBarItem(…)
    NavigationBarItem(…)
}

बटन, आइकॉन बटन, और फ़्लाइंग ऐक्शन बटन

आठवीं इमेज. M2 बटन (बाईं ओर) बनाम M3 बटन (दाईं ओर)

M3 में बटन, आइकॉन बटन, और फ़्लोटिंग ऐक्शन बटन (एफ़एबी), M2 में मौजूद बटन से अलग होते हैं. M3 में, M2 बटन के सभी कॉम्पोज़ेबल शामिल हैं:

M2

import androidx.compose.material.Button
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.IconToggleButton
import androidx.compose.material.OutlinedButton
import androidx.compose.material.TextButton

// M2 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M2 icon buttons
IconButton(…)
IconToggleButton(…)
// M2 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)

M3

import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.TextButton

// M3 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M3 icon buttons
IconButton(…)
IconToggleButton(…)
// M3 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)

M3 में नए बटन वैरिएंट भी शामिल हैं. इनके बारे में Compose Material 3 API के रेफ़रंस की खास जानकारी में जानें.

स्विच करें

नौवीं इमेज. M2 स्विच (बाईं ओर) बनाम M3 स्विच (दाईं ओर).

M3 में स्विच, M2 से अलग है. M2 और M3, दोनों में स्विच कंपोज़ेबल का नाम Switch है, लेकिन इंपोर्ट पैकेज अलग-अलग हैं:

M2

import androidx.compose.material.Switch

Switch(…)

M3

import androidx.compose.material3.Switch

Switch(…)

सतह और ऊंचाई

10वीं इमेज. लाइट थीम (बाईं ओर) और डार्क थीम (दाईं ओर) में, M2 और M3 के सर्फ़ेस की ऊंचाई की तुलना.

M3 में, सतह और ऊंचाई के सिस्टम, M2 से अलग हैं. M3 में, ऊंचाई के दो टाइप होते हैं:

• शैडो एलिवेशन (M2 की तरह ही परछाई डालता है)
• टोनल एलिवेशन (M3 में नया, रंग ओवरले करता है)

'लिखें' विकल्प में, यह M2 Surface फ़ंक्शन और M3 Surface फ़ंक्शन पर लागू होता है:

M2

import androidx.compose.material.Surface

Surface(
    elevation = …
) { … }

M3

import androidx.compose.material3.Surface

Surface(
    shadowElevation = …,
    tonalElevation = …
) { … }

UX/यूज़र इंटरफ़ेस (यूआई) डिज़ाइन की प्राथमिकता के आधार पर, M3 में shadowElevation और/या tonalElevation, दोनों के लिए M2 में elevation Dp वैल्यू का इस्तेमाल किया जा सकता है. Surface, ज़्यादातर कॉम्पोनेंट के पीछे मौजूद बैकिंग कॉम्पोज़ेबल है. इसलिए, कॉम्पोनेंट कॉम्पोज़ेबल भी एलिवेशन पैरामीटर दिखा सकते हैं. आपको इन्हें उसी तरह माइग्रेट करना होगा.

ध्यान दें: M3 में tonalElevation का इस्तेमाल करके, डिफ़ॉल्ट रूप से primary रंग का इस्तेमाल किया जाता है. ColorScheme क्लास में surfaceTint पैरामीटर का इस्तेमाल करके, इसे बदला जा सकता है.

M3 में टोनल एलिवेशन, M2 की डार्क थीम में एलिवेशन ओवरले के कॉन्सेप्ट की जगह लेता है . इस वजह से, ElevationOverlay और LocalElevationOverlay, M3 में मौजूद नहीं हैं. साथ ही, M2 में मौजूद LocalAbsoluteElevation को M3 में बदलकर LocalAbsoluteTonalElevation कर दिया गया है.

हाइलाइट और कॉन्टेंट ऐल्फ़ा

11वीं इमेज. M2 आइकॉन और टेक्स्ट पर ज़ोर देने की सुविधा (बाईं ओर) बनाम M3 आइकॉन और टेक्स्ट पर ज़ोर देने की सुविधा (दाईं ओर)

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

• बड़े किए गए M3 कलर सिस्टम के वैरिएंट ऑन कलर के साथ-साथ ऑन कलर का इस्तेमाल करना.
• टेक्स्ट के लिए अलग-अलग फ़ॉन्ट वेट का इस्तेमाल करना.

इस वजह से, ContentAlpha और LocalContentAlpha, M3 में मौजूद नहीं हैं और उन्हें बदलना होगा.

ध्यान दें: M3 में बंद किए गए स्टेटस के लिए, अब भी M2 की तरह अल्फा वैल्यू के साथ चालू रंगों का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, रंगों के हिसाब से भूमिकाएं लेख पढ़ें.

शुरुआत के लिए, इन मैपिंग का सुझाव दिया जाता है:

M2	M3
ContentAlpha.high वाला onSurface	onSurface आम तौर पर, टेक्स्ट के लिए FontWeight.Medium - FontWeight.Black
ContentAlpha.medium वाला onSurface	onSurfaceVariant आम तौर पर, टेक्स्ट के लिए FontWeight.Thin - FontWeight.Normal
ContentAlpha.disabled वाला onSurface	onSurface.copy(alpha = 0.38f)

यहां M2 बनाम M3 में आइकॉन पर ज़ोर देने का उदाहरण दिया गया है:

M2

import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha

// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
    Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Icon(…)
}

M3

import androidx.compose.material3.LocalContentColor

// High emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
    Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
    Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
    Icon(…)
}

यहां M2 और M3 में टेक्स्ट पर ज़ोर देने के उदाहरण दिए गए हैं:

M2

import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha

// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
    Text(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Text(…)
}

M3

import androidx.compose.material3.LocalContentColor

// High emphasis
Text(
    …,
    fontWeight = FontWeight.Bold
)
// Medium emphasis
Text(
    …,
    fontWeight = FontWeight.Normal
)
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
    Text(
        …,
        fontWeight = FontWeight.Normal
    )
}

बैकग्राउंड और कंटेनर

M2 में बैकग्राउंड को M3 में कंटेनर कहा जाता है. आम तौर पर, एक ही वैल्यू का इस्तेमाल करके, M2 में मौजूद background* पैरामीटर को M3 में मौजूद container* से बदला जा सकता है. उदाहरण के लिए:

M2

Badge(
    backgroundColor = MaterialTheme.colors.primary
) { … }

M3

Badge(
    containerColor = MaterialTheme.colorScheme.primary
) { … }

काम के लिंक

Compose में M2 से M3 पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, यहां दिए गए अन्य रिसॉर्स देखें.

Docs

• Compose में Material Design 3

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

• Reply M3 का सैंपल ऐप्लिकेशन
• Jetchat के सैंपल ऐप्लिकेशन को M2 से M3 पर माइग्रेट करना
  • alpha01 का शुरुआती माइग्रेशन
  • alpha10 के बारे में फ़ॉलो-अप अपडेट
• Jetnews के सैंपल ऐप्लिकेशन को M2 से M3 पर माइग्रेट करना
• अब Android M3 के हीरो ऐप्लिकेशन में उपलब्ध है :core-designsystem मॉड्यूल

वीडियो

• Jetpack Compose का इस्तेमाल करके, Material You को लागू करना

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

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