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 लाइब्रेरी पर माइग्रेट करने के बारे में बताया गया है.

तरीके

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

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

रंग

M2 से M3 कलर सिस्टम की तुलना
पहली इमेज. 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 टर्शरी
surface या background ठीक-ठाक
M3 कलर स्कीम जनरेट करने के लिए, Material Theme Builder में इस्तेमाल किए गए M2 कलर
दूसरी इमेज. 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 और इसके बाद के वर्शन पर डिवाइस के वॉलपेपर के रंगों का इस्तेमाल कर सकता है. इसके लिए, इन फ़ंक्शन का इस्तेमाल किया जा सकता है:

मुद्रण कला

M2 और M3 टाइपोग्राफ़ी सिस्टम की तुलना
तीसरी इमेज. 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

आकार

M2 और M3 शेप सिस्टम की तुलना
चौथी इमेज. 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

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

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 स्कैफ़ोल्ड की तुलना
पांचवीं इमेज. स्नैकबार और नेविगेशन ड्रॉअर वाला 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 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 स्कैफ़ोल्ड की तुलना
छठी इमेज. सबसे ऊपर ऐप्लिकेशन बार और स्क्रोल की गई सूची वाला 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 में बॉटम नेविगेशन को 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 बटन की तुलना
आठवीं इमेज. 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 स्विच की तुलना
नौवीं इमेज. M2 स्विच (बाईं ओर) बनाम M3 स्विच (दाईं ओर).

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

M2

import androidx.compose.material.Switch  Switch() 

M3

import androidx.compose.material3.Switch  Switch() 

सतह और ऊंचाई

लाइट और डार्क थीम में, M2 के सर्फ़ेस एलिवेशन और M3 के सर्फ़ेस एलिवेशन की तुलना
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 में टोनल एलिवेशन, M2 की डार्क थीम में एलिवेशन ओवरले के कॉन्सेप्ट की जगह लेता है . इस वजह से, ElevationOverlay और LocalElevationOverlay, M3 में मौजूद नहीं हैं. साथ ही, M2 में मौजूद LocalAbsoluteElevation को M3 में बदलकर LocalAbsoluteTonalElevation कर दिया गया है.

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

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

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

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

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

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

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

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

वीडियो

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