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

मटीरियल डिज़ाइन 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.

चरणबद्ध तरीका

अलग-अलग चरणों में माइग्रेशन करने के सामान्य तरीके यहां दिए गए हैं:

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

डिपेंडेंसी

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

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

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

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

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

एक्सपेरिमेंटल एपीआई

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

import androidx.compose.material3.ExperimentalMaterial3Api

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

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

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

import androidx.compose.material.MaterialTheme

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

import androidx.compose.material3.MaterialTheme

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

रंग

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

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
}

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 कलर स्कीम में इस्तेमाल किए गए पैलेट. नीचे दी गई मैपिंग की मदद से, शुरुआत का पॉइंट:

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

isLight

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

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
        …
    }
}

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 और इसके बाद वाले वर्शन के लिए है. इसके लिए नीचे दिए गए फ़ंक्शन का इस्तेमाल करें:

• dynamicLightColorScheme
• dynamicDarkColorScheme

मुद्रण कला

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

import androidx.compose.material.Typography

val AppTypography = Typography(
    // M2 TextStyle parameters
)

import androidx.compose.material3.Typography

val AppTypography = Typography(
    // M3 TextStyle parameters
)

हमारा सुझाव है कि नीचे दी गई TextStyle पैरामीटर की मैपिंग को शुरू करें अंक:

आकार

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

import androidx.compose.material.Shapes

val AppShapes = Shapes(
    // M2 Shape parameters
)

import androidx.compose.material3.Shapes

val AppShapes = Shapes(
    // M3 Shape parameters
)

हमारा सुझाव है कि नीचे दी गई Shape पैरामीटर की मैपिंग को शुरू करें अंक:

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

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

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

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

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

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

वे एपीआई जिनके नाम बदले गए हैं:

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

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

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

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

import androidx.compose.material.Scaffold

Scaffold(
    // M2 scaffold parameters
)

import androidx.compose.material3.Scaffold

Scaffold(
    // M3 scaffold parameters
)

M2 Scaffold में शामिल एक backgroundColor पैरामीटर को अब इसका नाम दिया गया है M3 में containerColor Scaffold:

import androidx.compose.material.Scaffold

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

import androidx.compose.material3.Scaffold

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

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

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(…)
        }
    }
)

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, के बजाय:

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()
        }
    }
)

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 है, लेकिन इंपोर्ट पैकेज और पैरामीटर अलग-अलग होते हैं:

import androidx.compose.material.TopAppBar

TopAppBar(…)

import androidx.compose.material3.TopAppBar

TopAppBar(…)

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

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

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) { … }
    }
)

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 कंपोज़ेबल:

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

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

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

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

बटन, आइकॉन बटन, और एफ़एबी

M3 में बटन, आइकॉन बटन, और फ़्लोटिंग ऐक्शन बटन (एफ़एबी) वे M2 में अलग हैं. M3 में 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(…)

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 पर देखें एपीआई के बारे में खास जानकारी.

स्विच करें

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

import androidx.compose.material.Switch

Switch(…)

import androidx.compose.material3.Switch

Switch(…)

सतह और ऊंचाई

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

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

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

import androidx.compose.material.Surface

Surface(
    elevation = …
) { … }

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.

प्रमुखता देना और कॉन्टेंट ऐल्फ़ा

M3 और M2 में प्रमुखता से फ़ोकस करने पर फ़ोकस काफ़ी अलग है. M2 में, इस्तेमाल किए जाने वाले मॉडल टेक्स्ट और कॉन्टेंट जैसे कॉन्टेंट को अलग करने के लिए, कुछ ऐल्फ़ा वैल्यू वाले “चालू” रंग आइकॉन. M3 में अब कुछ अलग-अलग तरीके उपलब्ध हैं:

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

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

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

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

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(…)
}

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 में टेक्स्ट पर ज़ोर देने का एक उदाहरण दिया गया है:

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(…)
}

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* के साथ, इन्हीं वैल्यू का इस्तेमाल किया गया. उदाहरण के लिए:

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

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

काम के लिंक

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

Docs

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

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

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

वीडियो

• Jetpack Compose में मौजूद कॉन्टेंट को लागू करना

एपीआई का संदर्भ और सोर्स कोड

• Material 3 API का रेफ़रंस कंपोज़ करें
• सोर्स कोड में मटीरियल 3 के सैंपल लिखना