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 को धीरे-धीरे बंद करना होगा.
चरणों में किया जाने वाला तरीका
चरणों में माइग्रेट करने का सामान्य तरीका यहां बताया गया है:
- M2 डिपेंडेंसी के साथ-साथ M3 डिपेंडेंसी जोड़ें.
- अपने ऐप्लिकेशन की थीम के M2 वर्शन के साथ-साथ, M3 वर्शन भी जोड़ें.
- अपने ऐप्लिकेशन के साइज़ और जटिलता के आधार पर, अलग-अलग मॉड्यूल, स्क्रीन या कॉम्पोज़ेबल को M3 पर माइग्रेट करें. ज़्यादा जानकारी के लिए, नीचे दिए गए सेक्शन देखें.
- पूरी तरह से माइग्रेट होने के बाद, अपने ऐप्लिकेशन की थीम के M2 वर्शन हटा दें.
- 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 }
रंग

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 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 और इसके बाद के वर्शन पर डिवाइस के वॉलपेपर के रंगों का इस्तेमाल कर सकता है. इसके लिए, इन फ़ंक्शन का इस्तेमाल किया जा सकता है:
मुद्रण कला

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 में आकार का सिस्टम, 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 पर माइग्रेट करें |
नाम बदले गए एपीआई:
अन्य सभी एपीआई:
Compose Material 3 API के रेफ़रंस की खास जानकारी पर जाकर, 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() } } ) } )
टॉप ऐप्लिकेशन बार

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 में 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(…) }
बटन, आइकॉन बटन, और फ़्लाइंग ऐक्शन बटन

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 के रेफ़रंस की खास जानकारी पर जाकर, इनके बारे में जानें.
स्विच करें

M3 में स्विच, M2 से अलग है. M2 और M3, दोनों में स्विच कंपोज़ेबल का नाम Switch
है, लेकिन इंपोर्ट पैकेज अलग-अलग हैं:
M2
import androidx.compose.material.Switch Switch(…)
M3
import androidx.compose.material3.Switch Switch(…)
सतह और ऊंचाई

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
कर दिया गया है.
हाइलाइट और कॉन्टेंट ऐल्फ़ा

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
सैंपल ऐप्लिकेशन
- Reply M3 का सैंपल ऐप्लिकेशन
- Jetchat के सैंपल ऐप्लिकेशन को M2 से M3 पर माइग्रेट करना
- Jetnews के सैंपल ऐप्लिकेशन को M2 से M3 पर माइग्रेट करना
- अब Android M3 के हीरो ऐप्लिकेशन में :core-designsystem मॉड्यूल उपलब्ध है
वीडियो
एपीआई का रेफ़रंस और सोर्स कोड
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose में Material Design 2
- Compose में Material Design 3
- Compose में कस्टम डिज़ाइन सिस्टम