मटीरियल डिज़ाइन 3 मटीरियल डिज़ाइन का अगला डेवलपमेंट है. यह इसमें अपडेट की गई थीम, कॉम्पोनेंट, और Material You को मनमुताबिक बनाने की सुविधाएं शामिल हैं जैसे डाइनैमिक कलर. यह Material Design 2 का अपडेट है और यह ये ऐप्लिकेशन, Android 12 और उसके बाद के वर्शन पर नई विज़ुअल स्टाइल और सिस्टम यूज़र इंटरफ़ेस (यूआई) के साथ काम करते हैं.
यह गाइड, Compose मटीरियल से माइग्रेट करने पर फ़ोकस करती है (androidx.compos.material) Jetpack लाइब्रेरी से Compose Material 3 को जोड़ें (androidx.compos.material3) Jetpack लाइब्रेरी.
तरीके
आम तौर पर, लंबे समय तक किसी एक ऐप्लिकेशन में M2 और M3, दोनों का इस्तेमाल नहीं किया जाना चाहिए. यह ऐसा इसलिए होता है, क्योंकि दोनों डिज़ाइन सिस्टम और उनसे जुड़ी लाइब्रेरी अलग-अलग होती हैं काफ़ी अहम है.
आपका ऐप्लिकेशन किसी डिज़ाइन सिस्टम का इस्तेमाल कर सकता है, जैसे कि Figma का इस्तेमाल करके बनाया गया डिज़ाइन सिस्टम. ऐसे में ऐसे मामलों में, हमारा सुझाव है कि आप या आपकी डिज़ाइन टीम इसे M2 प्रॉपर्टी से माइग्रेट करें. Compose का माइग्रेशन शुरू करने से पहले M3 तक. माइग्रेट करने का कोई मक़सद नहीं है M3 में शामिल ऐप्लिकेशन, अगर इसका UX/यूज़र इंटरफ़ेस (यूआई) डिज़ाइन M2 पर आधारित हो.
इसके अलावा, माइग्रेशन के लिए आपका तरीका अलग-अलग होना चाहिए. यह इस बात पर निर्भर करता है कि साइज़, जटिलता, और UX/यूज़र इंटरफ़ेस (यूआई) डिज़ाइन. ऐसा करने से आप पर पड़ने वाले असर को कम से कम आपका कोड बेस. माइग्रेशन के लिए, आपको अलग-अलग चरणों को पूरा करना चाहिए.
कब माइग्रेट करें
आपको जल्द से जल्द माइग्रेशन शुरू करना चाहिए. हालांकि, यह ज़रूरी है कि यह तय करना कि आपका ऐप्लिकेशन पूरी तरह माइग्रेट होने के लिए सही स्थिति में है या नहीं M2 से M3 तक. "ब्लॉकर" वाली कुछ ऐसी स्थितियों की जांच करनी चाहिए जिनके हिसाब से काम किया जा सकता है शुरू करने से पहले:
स्थिति | सुझाया गया तरीका |
---|---|
वीडियो में “ब्लॉकर” का इस्तेमाल न किया गया हो | अलग-अलग चरणों में माइग्रेशन शुरू करें |
फ़िलहाल, M2 का कोई कॉम्पोनेंट M3 में उपलब्ध नहीं है. नीचे कॉम्पोनेंट और लेआउट सेक्शन देखें. | अलग-अलग चरणों में माइग्रेशन शुरू करें |
आपने या आपकी डिज़ाइन टीम ने ऐप्लिकेशन के डिज़ाइन सिस्टम को M2 से M3 में माइग्रेट नहीं किया है | डिज़ाइन सिस्टम को M2 से M3 पर माइग्रेट करें. इसके बाद, अलग-अलग चरणों में माइग्रेशन शुरू करें |
अगर ऊपर बताई गई स्थितियों का असर आपके खाते पर पड़ रहा है, तब भी आपको अलग-अलग चरणों को पूरा करना चाहिए ऐप्लिकेशन का अपडेट करने और रिलीज़ करने से पहले माइग्रेशन हो जाएगा. ऐसे मामलों में, आपको M2 और M3 को साथ-साथ इस्तेमाल करेगा. साथ ही, माइग्रेट करते समय M2 को धीरे-धीरे बंद कर देगा M3.
चरणबद्ध तरीका
अलग-अलग चरणों में माइग्रेशन करने के सामान्य तरीके यहां दिए गए हैं:
- M2 डिपेंडेंसी के साथ M3 डिपेंडेंसी जोड़ें.
- अपने ऐप्लिकेशन की थीम के M3 वर्शन के साथ-साथ अपने ऐप्लिकेशन के M2 वर्शन को भी जोड़ें ऐप्लिकेशन की थीम.
- अलग-अलग मॉड्यूल, स्क्रीन या कंपोज़ेबल को 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 के साथ ऐसे ही इस्तेमाल किया जा सकता है:
लाइब्रेरी | पैकेज और वर्शन |
---|---|
मटीरियल आइकॉन लिखना | androidx.compose.material:material-icons-*:$m2-version |
मटीरियल रिपल कंपोज़ करें | androidx.compose.material:material-ripple:$m2-version |
मटीरियल 3 विंडो साइज़ क्लास के बारे में जानकारी दें | androidx.compose.material3:material3-window-size-class:$m3-version |
एक्सपेरिमेंटल एपीआई
M3 के कुछ एपीआई को एक्सपेरिमेंट के तौर पर शुरू किया गया माना जाता है. ऐसे मामलों में आपको
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 कलर सिस्टम की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-color-update.png?authuser=9&hl=hi)
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 कलर स्कीम जनरेट करने के लिए, थीम बिल्डर टूल का इस्तेमाल करें. M2 का इस्तेमाल करें
टूल में रंग, सोर्स कलर के तौर पर “मुख्य” रंग के होते हैं. इन्हें टूल टोनल में बड़ा करता है
M3 कलर स्कीम में इस्तेमाल किए गए पैलेट. नीचे दी गई मैपिंग की मदद से,
शुरुआत का पॉइंट:
M2 | मटीरियल थीम बिल्डर |
---|---|
primary |
मुख्य |
primaryVariant |
Secondary |
secondary |
Tertiary |
surface या background |
ठीक-ठाक |
![M3 कलर स्कीम जनरेट करने के लिए, मटीरियल थीम बिल्डर में M2 कलर का इस्तेमाल किया जाता है](https://developer.android.com/static/develop/ui/compose/images/migration-colorscheme-update.png?authuser=9&hl=hi)
टूल से, हल्के और गहरे रंग वाली थीम के रंग की हेक्स कोड की वैल्यू कॉपी की जा सकती हैं और M3 ColorScheme इंस्टेंस लागू करने के लिए, उनका इस्तेमाल करें. इसके अलावा, मटीरियल थीम बिल्डर, 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
…
}
}
ज़्यादा जानकारी के लिए, लिखें गाइड में कस्टम डिज़ाइन सिस्टम देखें.
डाइनैमिक कलर
M3 में एक नई सुविधा डाइनैमिक कलर है. कस्टम पैरामीटर का इस्तेमाल करने के बजाय
कलर, M3 ColorScheme
में Android पर डिवाइस के वॉलपेपर के कलर का इस्तेमाल किया जा सकता है
12 और इसके बाद वाले वर्शन के लिए है. इसके लिए नीचे दिए गए फ़ंक्शन का इस्तेमाल करें:
मुद्रण कला
![M2 और M3 टाइपोग्राफ़ी सिस्टम की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-typography-update.png?authuser=9&hl=hi)
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 शेप सिस्टम की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-shape-update.png?authuser=9&hl=hi)
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 में मौजूद नहीं थीं. इसके अलावा, कुछ M3 कॉम्पोनेंट, M2 में मौजूद कॉम्पोनेंट की तुलना में ज़्यादा वैरिएशन हैं. आम तौर पर M3 एपीआई प्लैटफ़ॉर्म, अपने सबसे करीबी मिलते-जुलते प्लैटफ़ॉर्म की तुलना करने की कोशिश करता है M2 में.
अपडेट किए गए रंग, टाइपोग्राफ़ी, और शेप सिस्टम को ध्यान में रखते हुए, M3 कॉम्पोनेंट को मैप करना पसंद है इसकी वैल्यू दी गई हो. टोकन देखना अच्छा है डायरेक्ट्री में उपलब्ध सच्चाई का पता लगाना है.
कुछ कॉम्पोनेंट पर खास ध्यान देने की ज़रूरत होती है, लेकिन नीचे दिए गए फ़ंक्शन में कुछ खास बातों का ध्यान रखा जाता है शुरुआत करने के लिए, मैपिंग का सुझाव दिया जाता है:
एपीआई मौजूद नहीं हैं:
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 के नए कॉम्पोनेंट और लेआउट देखें रेफ़रंस के तौर पर खास जानकारी शामिल करें. साथ ही, नई रिलीज़ के लिए, रिलीज़ पेज पर नज़र बनाए रखें और अपडेट किए गए एपीआई.
स्कैफ़ोल्ड, स्नैकबार, और नेविगेशन पैनल
![स्नैकबार और नेविगेशन पैनल के साथ M2 और M3 स्कैफ़ोल्ड की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-scaffold-update.gif?authuser=9&hl=hi)
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 में containerColor
Scaffold
:
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 स्कैफ़ोल्ड की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-topbar-update.png?authuser=9&hl=hi)
M3 और M2 में मौजूद टॉप ऐप्लिकेशन बार अलग-अलग हैं. M2 में
और M3 में, मुख्य ऐप्लिकेशन बार कंपोज़ेबल का नाम TopAppBar
है, लेकिन इंपोर्ट
पैकेज और पैरामीटर अलग-अलग होते हैं:
M2
import androidx.compose.material.TopAppBar
TopAppBar(…)
M3
import androidx.compose.material3.TopAppBar
TopAppBar(…)
अगर आपको पहले M3 CenterAlignedTopAppBar
का इस्तेमाल करना है, तो
कॉन्टेंट को M2 TopAppBar
के बीच में रखें. इसके बारे में जानकारी होना अच्छी बात है
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 नेविगेशन बार की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-bottomnav-update.png?authuser=9&hl=hi)
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 बटनों की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-buttons-update.png?authuser=9&hl=hi)
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 पर देखें एपीआई के बारे में खास जानकारी.
स्विच करें
![M2 और M3 स्विच की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-switch-update.png?authuser=9&hl=hi)
M3 और M2 में स्विच करना अलग-अलग होता है. M2 और M3, दोनों में
कंपोज़ेबल को Switch
नाम दिया गया है, लेकिन इंपोर्ट पैकेज अलग हैं:
M2
import androidx.compose.material.Switch
Switch(…)
M3
import androidx.compose.material3.Switch
Switch(…)
सतह और ऊंचाई
![हल्के और गहरे रंग वाली थीम में, M2 की सतह से ऊंचाई और M3 की सतह की ऊंचाई की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-elevation-update.png?authuser=9&hl=hi)
M3 की सतह और ऊंचाई सिस्टम M2 से अलग हैं. इसके दो टाइप हैं ऊंचाई का M3:
- शैडो एलिवेशन (कोई शैडो कास्ट करता है, M2 की तरह)
- टोनल एलिवेशन (एक रंग को ओवरले करता है, M3 से नया)
Compose में, यह M2 Surface
फ़ंक्शन और M3 पर लागू होता है
Surface
फ़ंक्शन:
M2
import androidx.compose.material.Surface
Surface(
elevation = …
) { … }
M3
import androidx.compose.material3.Surface
Surface(
shadowElevation = …,
tonalElevation = …
) { … }
shadowElevation
दोनों के लिए, M2 में elevation
Dp
वैल्यू का इस्तेमाल किया जा सकता है
और/या M3 में tonalElevation
. यह UX/यूज़र इंटरफ़ेस (यूआई) के डिज़ाइन की प्राथमिकता पर निर्भर करता है.
ज़्यादातर कॉम्पोनेंट के पीछे, Surface
बैकिंग कंपोज़ेबल है. इसलिए, कॉम्पोनेंट
कंपोज़ेबल में एलिवेशन पैरामीटर दिखाए जाते हैं, जिन्हें आपको
तरीका है.
M3 में टोनल एलिवेशन को, M2 डार्क में एलिवेशन ओवरले के कॉन्सेप्ट की जगह इस्तेमाल किया गया है
थीम . इस वजह से, ElevationOverlay
और LocalElevationOverlay
M3 में मौजूद नहीं है और M2 में LocalAbsoluteElevation
को बदलकर यह हो गया है
M3 में LocalAbsoluteTonalElevation
.
प्रमुखता देना और कॉन्टेंट ऐल्फ़ा
![M2 और M3 आइकॉन और टेक्स्ट पर ज़ोर देने की तुलना](https://developer.android.com/static/develop/ui/compose/images/migration-emphasis-update.png?authuser=9&hl=hi)
M3 और M2 में प्रमुखता से फ़ोकस करने पर फ़ोकस काफ़ी अलग है. M2 में, इस्तेमाल किए जाने वाले मॉडल टेक्स्ट और कॉन्टेंट जैसे कॉन्टेंट को अलग करने के लिए, कुछ ऐल्फ़ा वैल्यू वाले “चालू” रंग आइकॉन. M3 में अब कुछ अलग-अलग तरीके उपलब्ध हैं:
- नए M3 मॉडल के “वैरिएंट पर” कलर के साथ “ऑन” कलर का इस्तेमाल किया गया है कलर सिस्टम.
- टेक्स्ट के लिए अलग-अलग फ़ॉन्ट का इस्तेमाल किया जा रहा है.
इस वजह से, ContentAlpha
और LocalContentAlpha
यहां मौजूद नहीं हैं
M3 है और इसे बदलना होगा.
शुरुआत करने के लिए, नीचे दी गई मैपिंग को इस्तेमाल करने का सुझाव दिया जाता है:
M2 | M3 |
---|---|
onSurface में ContentAlpha.high की सदस्यता लें |
आम तौर पर onSurface , टेक्स्ट के लिए FontWeight.Medium - FontWeight.Black |
onSurface में ContentAlpha.medium की सदस्यता लें |
आम तौर पर onSurfaceVariant , टेक्स्ट के लिए FontWeight.Thin - FontWeight.Normal |
onSurface में ContentAlpha.disabled की सदस्यता लें |
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
सैंपल ऐप्लिकेशन
- जवाब देने के लिए M3 का सैंपल ऐप्लिकेशन
- JetChat का सैंपल ऐप्लिकेशन M2 से M3 में माइग्रेट करने की सुविधा
- Jetnews के सैंपल ऐप्लिकेशन को M2 से M3 पर माइग्रेट करना
- अब Android M3 के हीरो ऐप्लिकेशन में :core-designsystem मॉड्यूल
वीडियो
एपीआई का संदर्भ और सोर्स कोड
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose में मटीरियल डिज़ाइन 2
- Compose में मटीरियल डिज़ाइन 3
- Compose में कस्टम डिज़ाइन सिस्टम जोड़ना