Material 3 Expressive, Material Design का नया वर्शन है. इसमें अपडेट की गई थीम, कॉम्पोनेंट, और डाइनैमिक कलर जैसी अपनी पसंद के मुताबिक बनाने की सुविधाएं शामिल हैं.

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

तरीके

अपने ऐप्लिकेशन कोड को M2.5 से M3 पर माइग्रेट करने के लिए, Compose Material को माइग्रेट करने के लिए फ़ोन पर दिए गए निर्देश में बताए गए तरीके का पालन करें. खास तौर पर:

• किसी एक ऐप्लिकेशन में लंबे समय तक M2.5 और M3, दोनों का इस्तेमाल नहीं किया जाना चाहिए
• अलग-अलग चरणों में बदलाव करना

डिपेंडेंसी

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

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:1.5.0-beta01")

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

Wear Compose फ़ाउंडेशन लाइब्रेरी के वर्शन 1.5.0-beta01 में कुछ नए कॉम्पोनेंट जोड़े गए हैं. इन्हें Material 3 कॉम्पोनेंट के साथ काम करने के लिए डिज़ाइन किया गया है. इसी तरह, Wear Compose नेविगेशन लाइब्रेरी के SwipeDismissableNavHost में, Wear OS 6 (एपीआई लेवल 36) या उसके बाद के वर्शन पर चलने पर अपडेट किया गया ऐनिमेशन है. Wear Compose Material 3 वर्शन पर अपडेट करते समय, हमारा सुझाव है कि आप Wear Compose फ़ाउंडेशन और नेविगेशन लाइब्रेरी को भी अपडेट करें:

implementation("androidx.wear.compose:compose-foundation:1.5.0-beta01")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta01")

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

M2.5 और M3, दोनों में थीम कॉम्पोज़ेबल का नाम MaterialTheme है. हालांकि, इंपोर्ट पैकेज और पैरामीटर अलग-अलग हैं. M3 में, Colors पैरामीटर का नाम बदलकर ColorScheme कर दिया गया है. साथ ही, ट्रांज़िशन लागू करने के लिए MotionScheme को शामिल किया गया है.

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
        colors = AppColors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
)

import androidx.wear.compose.material3.MaterialTheme

MaterialTheme(
        colorScheme = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

रंग

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

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme

val appColorScheme: ColorScheme = ColorScheme(
   // M3 ColorScheme parameters
)

यहां दी गई टेबल में, M2.5 और M3 के बीच के मुख्य अंतर के बारे में बताया गया है:

डाइनैमिक कलर थीम

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

डाइनैमिक कलर स्कीम लागू करने के लिए, dynamicColorScheme फ़ंक्शन का इस्तेमाल करें. साथ ही, डाइनैमिक कलर स्कीम उपलब्ध न होने पर, फ़ॉलबैक के तौर पर defaultColorScheme दें.

@Composable
fun myApp() {
  val myColorScheme = myBrandColors()
  val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
  MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}

मुद्रण कला

M3 में टाइपोग्राफ़ी सिस्टम, M2 से अलग है. इसमें ये सुविधाएं शामिल हैं:

• नौ नई टेक्स्ट स्टाइल
• फ़्लेक्स फ़ॉन्ट, जिनकी मदद से अलग-अलग वज़न, चौड़ाई, और गोल आकार के लिए टाइप स्केल को पसंद के मुताबिक बनाया जा सकता है

• AnimatedText, जो फ़्लेक्स फ़ॉन्ट का इस्तेमाल करता है

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

फ़्लेक्स फ़ॉन्ट

फ़्लेक्स फ़ॉन्ट की मदद से, डिज़ाइनर किसी खास साइज़ के लिए टाइप की चौड़ाई और वेट तय कर सकते हैं.

टेक्स्ट स्टाइल

M3 में ये TextStyles उपलब्ध हैं. ये डिफ़ॉल्ट रूप से, M3 के अलग-अलग कॉम्पोनेंट में इस्तेमाल किए जाते हैं.

आकार

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

• एक्स्ट्रा स्मॉल (एक्सएस)
• छोटा
• मध्यम
• बड़ा
• एक्स्ट्रा लार्ज

Compose में, यह M2 आकार क्लास और M3 आकार क्लास पर लागू होता है:

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
   // M3 Shapes parameters
)

शुरुआत करने के लिए, Compose में Material 2 से Material 3 पर माइग्रेट करें से आकार पैरामीटर मैपिंग का इस्तेमाल करें.

आकार में बदलाव करना

M3 में आकार में बदलाव करने की सुविधा जोड़ी गई है: अब आकार, इंटरैक्शन के हिसाब से बदलते हैं.

आकार बदलने की सुविधा, कई गोल बटन के वैरिएंट के तौर पर उपलब्ध है. यहां देखें:

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

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

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

यहां Material 3 के सभी कॉम्पोनेंट की पूरी सूची दी गई है:

आखिर में, Wear Compose Foundation लाइब्रेरी के 1.5.0-beta01 वर्शन के कुछ काम के कॉम्पोनेंट की सूची:

बटन

M3 में बटन, M2.5 से अलग होते हैं. M2.5 चिप की जगह बटन का इस्तेमाल किया गया है. Button लागू करने पर, Text maxLines और textAlign के लिए डिफ़ॉल्ट वैल्यू मिलती हैं. इन डिफ़ॉल्ट वैल्यू को Text एलिमेंट में बदला जा सकता है.

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

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

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

अगर TransformingLazyColumn और ScalingLazyColumn का इस्तेमाल किया जा रहा है, तो EdgeButton को ScreenScaffold में पास करें, ताकि वह स्क्रोल करने पर अपना आकार बदल सके. ScreenScaffold और TransformingLazyColumn के साथ EdgeButton का इस्तेमाल करने का तरीका जानने के लिए, नीचे दिया गया कोड देखें.

import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold

ScreenScaffold(
   scrollState = state,
   contentPadding = contentPadding,
   edgeButton = {
      EdgeButton(...)
   }
){ contentPadding ->
   TransformingLazyColumn(state = state, contentPadding = contentPadding,){
   // additional code here
   }
}

मचान

M3 में स्कैफ़ोल्ड, M2.5 से अलग है. M3 में, AppScaffold और नए ScreenScaffold कंपोज़ेबल ने स्कैफ़ोल्ड की जगह ले ली है. AppScaffold और ScreenScaffold, स्क्रीन का स्ट्रक्चर तय करते हैं. साथ ही, ScrollIndicator और TimeText कॉम्पोनेंट के ट्रांज़िशन को मैनेज करते हैं.

AppScaffold की मदद से, TimeText जैसे स्टैटिक स्क्रीन एलिमेंट को इन-ऐप्लिकेशन ट्रांज़िशन के दौरान भी दिखने दिया जा सकता है. जैसे, 'स्‍वाइप करके हटाएं' सुविधा. ​​यह मुख्य ऐप्लिकेशन कॉन्टेंट के लिए एक स्लॉट उपलब्ध कराता है. आम तौर पर, यह स्लॉट SwipeDismissableNavHost जैसे नेविगेशन कॉम्पोनेंट से मिलता है

गतिविधि के लिए एक AppScaffold और हर स्क्रीन के लिए एक ScreenScaffold का इस्तेमाल किया जाता है.

import androidx.wear.compose.material.Scaffold

Scaffold {...}

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold

AppScaffold {
   // Define the navigation hierarchy within the AppScaffold,
   // such as using SwipeDismissableNavHost.
   SwipeDismissableNavHost(...) {
      composable("home") {
         HomeScreen()
      }
      //other screens
   }
}
fun HomeScreen() {
    val scrollState = rememberScrollState()
    ScreenScaffold(scrollState = scrollState) {
    //rest of the screen code
    }
}

अगर HorizontalPagerIndicator के साथ HorizontalPager का इस्तेमाल किया जा रहा है, तो इसे HorizontalPagerScaffold पर माइग्रेट किया जा सकता है. HorizontalPagerScaffold को AppScaffold में रखा गया है. AppScaffold और HorizontalPagerScaffold, पेजर के स्ट्रक्चर को सेट करते हैं. साथ ही, HorizontalPageIndicator और TimeText कॉम्पोनेंट के ट्रांज़िशन को मैनेज करते हैं.

HorizontalPagerScaffold, डिफ़ॉल्ट रूप से स्क्रीन के बीच में HorizontalPageIndicator दिखाता है. साथ ही, TimeText और HorizontalPageIndicator को दिखाने/छिपाने के लिए निर्देश देता है. यह इस बात पर निर्भर करता है कि Pager को पेज किया जा रहा है या नहीं. यह PagerState से तय होता है.

इसमें एक नया AnimatedPage कॉम्पोनेंट भी है, जो पेज की पोज़िशन के आधार पर, स्केलिंग और स्क्रीम इफ़ेक्ट के साथ पेज को ऐनिमेट करता है.

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPagerScaffold(pagerState = pagerState) {
       HorizontalPager(
          state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
…
   }
}

आखिर में, M3 में VerticalPagerScaffold का इस्तेमाल किया गया है. यह HorizontalPagerScaffold के जैसे ही पैटर्न का पालन करता है:

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
   val pagerState = rememberPagerState(pageCount = { 10 })

   VerticalPagerScaffold(pagerState = pagerState) {
      VerticalPager(
         state = pagerState
      ) { page ->
             AnimatedPage(pageIndex = page, pagerState = pagerState){
                ScreenScaffold {
        …
   }
}

प्लेसहोल्डर

M2.5 और M3 के बीच, एपीआई में कुछ बदलाव हुए हैं. Placeholder.PlaceholderDefaults अब दो मॉडिफ़ायर उपलब्ध कराता है:

• Modifier.placeholder, जो अब तक डाउनलोड नहीं किए गए कॉन्टेंट के बजाय दिखाया जाता है
• प्लेसहोल्डर शिमर इफ़ेक्ट Modifier.placeholderShimmer, जो डेटा लोड होने के दौरान ऐनिमेशन लूप में चलने वाला प्लेसहोल्डर शिमर इफ़ेक्ट देता है.

Placeholder कॉम्पोनेंट में हुए अन्य बदलावों के बारे में जानने के लिए, नीचे देखें.

SwipeDismissableNavHost

SwipeDismissableNavHost, wear.compose.navigation का हिस्सा है. जब इस कॉम्पोनेंट का इस्तेमाल M3 के साथ किया जाता है, तो M3 MaterialTheme, LocalSwipeToDismissBackgroundScrimColor और LocalSwipeToDismissContentScrimColor को अपडेट करता है.

TransformingLazyColumn

TransformingLazyColumn, wear.compose.lazy.foundation का हिस्सा है. यह स्क्रोल करने के दौरान, सूची के आइटम पर ऐनिमेशन को स्केल करने और मॉर्फ़ करने की सुविधा जोड़ता है. इससे उपयोगकर्ता अनुभव बेहतर होता है.

ScalingLazyColumn की तरह ही, यह rememberTransformingLazyColumnState() का इस्तेमाल करके ऐसा TransformingLazyColumnState बनाता है जिसे सभी कंपोजिशन में याद रखा जाता है.

स्केलिंग और मॉर्फ़ करने वाले ऐनिमेशन जोड़ने के लिए, हर सूची के आइटम में यह जानकारी जोड़ें:

• Modifier.transformedHeight, जिसकी मदद से TransformationSpec का इस्तेमाल करके, आइटम की बदली हुई ऊंचाई का हिसाब लगाया जा सकता है. जब तक आपको आइटम में और बदलाव नहीं करने हैं, तब तक rememberTransformationSpec() का इस्तेमाल किया जा सकता है.
• SurfaceTransformation

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
   ScreenScaffold(state) { contentPadding ->
      TransformingLazyColumn(state = state, contentPadding = contentPadding) {
         items(count = 50) {
            Button(
               onClick = {},
               modifier =
                        Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Item $it")
                    }
                }
            }
        }
    }

काम के लिंक

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

सैंपल

GitHub पर Material3 ब्रांच में मौजूद Wear OS के सैंपल

Compose for Wear OS कोडलैब

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

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

डिज़ाइन

• डिज़ाइन से जुड़े दिशा-निर्देश